Sample B
Following the instructions in this article, you will learn how to utilize the API and SRT transformer to create an email message.
Assumptions Made for Design Requirements
Apart from the existing static header and footer in the template, the generation area requires the inclusion of a static banner and a captivating title. Following the title, three product cards should be displayed in each row, repeating as long as available data is in the data source query. However, on the fourth cycle, it is necessary to repeat the banner once. If there are not enough cards in the data source to fit in one line of three containers, they must be placed in a structure with one or two containers stretched across the width.
The final message design must be as follows:
Creation of SRT transformer
In order to fulfill the requested design, we need to follow the steps below to create an email message using an SRT transformer:
- Start section: This section includes static banner and title modules. Since these modules remain the same as saved and don't require any data injection from the
dataSourceswe can utilize theskipValue:trueparameter. - Repeatable section: This section should contain modules of an empty structure with three containers and defined modules for each container. However, we must use a structure with a button at the very bottom in case there are no more items in the data source. And also, on the second cycle, we must include a static module with the banner.
- Tail section: We will only enter this section if there are not enough elements (products) in our data source to fill one row with three containers completely. This ensures that any remaining cards from the repeatable section are placed appropriately. We will have only two rules in the tail section. The first rule includes a module with a structure and a single container where we will place the same module with one product. And the second rule includes a structure with two containers where we will place the same module with two products.
Below is the code for the configuration as requested:
{
"name":"SRT_example_B",
"config":{
"start":[
{
"id":"structure_with_hero_section", // UID of the Hero section saved to the Modules.
"skipValue":true // States data inapplicable to current module.
},
{
"id":"structure_with_title_and_cta", // UID of the dynamic module saved to the Modules.
"skipValue":true
}
],
"repeatable":[
{
"id":"structure_empty_3_containers", // UID of the empty structure with 3 containers saved to the Modules.
"content":[
{
"id":"product_card" // UID of the smart container (product card) saved to the Modules.
},
{
"id":"product_card"
},
{
"id":"product_card"
}
]
},
{
"id":"structure_with_cta", // UID of the structure with "See More" button saved to the Modules.
"rules":{
"records":0 // The rule states that the object can be used only when there are no more items left in the data source after the cycle is completed.
}
},
{
"id":"structure_with_static_banner", // UID of the module with static banner saved to the Modules.
"skipValue":true, // States data inapplicable to current module.
"rules":{
"only":2 // The rule states that the object can only repeat once in the second cycle. If the rule is set to 1 or 3, it means the object's content will be displayed only once in the first or third cycle, respectively, indicating that the content will appear in the email message during a specific cycle without repeating in subsequent cycles.
}
}
],
"tail":[
{
"id":"structure_empty_1_container",
"content":[
{
"id":"product_card"
}
],
"rules":{
"records":1 // The rule states that the object can be used only when there is one item left in the data source after all the cycles are completed.
}
},
{
"id":"structure_empty_2_containes2",
"content":[
{
"id":"product_card"
},
{
"id":"product_card"
}
],
"rules":{
"records":2 // The rule states that the object can be used only when there are two items left in the data source after all the cycles are completed.
}
}
]
}
}
Preparing the request body to create an email message
After generating the SRT rule, we can apply it by making a POST request to generate the email message. Below is a sample body request with row data:
{
"dataSources":[
{
"name":"Source for SRT",
"type":"RAW",
"value":[
{
"url":"https://my.store.com/1",
"p_name":"Burger Deluxe",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/g508c2454742bc875d5b894928707586f6f84c72f9394d53dc84ae96c3dc17c0ca6602b92d982eb976a550bd2560065.jpeg",
"p_price":"$9.99",
"p_description":"Classic beef burger with special sauce."
},
{
"url":"https://my.store.com/2",
"p_name":"Crispy Chicken",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/g6b5990d1f0152cc8abf1a15e3e67eee115aedce8899879a8d0921fa07ef458605bcca5441bffb2a1fb085b3b17895c.jpeg",
"p_price":"$8.99",
"p_description":"Tender fried chicken with a crispy coating."
},
{
"url":"https://my.store.com/3",
"p_name":"Cheese Pizza",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/g62bebef9194ff3ce2b3dc3c486eadf1dc13daf2866ff31ac97f50ecc38f280d8e6ad47e7a95bd32b71ff4152d740f8.jpeg",
"p_price":"$10.99",
"p_description":"Traditional cheese pizza with a thin crust."
},
{
"url":"https://my.store.com/4",
"p_name":"Spicy Wings",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/g73c4730dff9673ada7830cd31ec8383e917145e313fade955f2eb4fb97811ab713a7f30a900ad2ace427938bf36279.jpeg",
"p_price":"$7.99",
"p_description":"Hot chicken wings with a tangy sauce."
},
{
"url":"https://my.store.com/5",
"p_name":"Veggie Wrap",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/g6f1f0b6392ed7d69c9963709df64027471ad48b367300e06619b9e308365a6e9a44f918c31c8e77ad259ff7285a74e.jpeg",
"p_price":"$6.99",
"p_description":"Fresh vegetable medley wrapped in a tortilla."
},
{
"url":"https://my.store.com/6",
"p_name":"Loaded Fries",
"p_image":"https://stripocdn.email/content/guids/CABINET_bb3fcdd24c9db8847ad38a4aed1beecdc1b0954412c0bce53f279d420cef8bac/images/ge5457c2f851237616836280c07f5bc4091bb21d00fc4b560749d34692c35b7260e521ea1ba89fdc47ce4cc4c82f74b.jpeg",
"p_price":"$5.99",
"p_description":"Crispy fries topped with melted cheese."
},
... // Add as many data objects as necessary in this location.
{
"url":"https://my.store.com/7",
"p_name":"BBQ Ribs",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/g4c3d093ca5e7abe50ff0e24ea4fe60de4adf3c04b1b4107861ead3de0b832cf12456e4f69302385ab7521fde4e641e.jpeg",
"p_price":"$12.99",
"p_description":"Tender, smoky ribs glazed with a sauce."
},
{
"url":"https://my.store.com/8",
"p_name":"CFish Tacos",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/gb498bd84fe81ef8f7c5c41dd1fedc345ff1e2ff5047c2cec0a4c6e21e021edbfa5f6af1b7446b8e2536e2c47110a73.jpeg",
"p_price":"$9.99",
"p_description":"Grilled fish fillet wrapped in a tortillas."
},
{
"url":"https://my.store.com/9",
"p_name":"Choc Sundae",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/gc97336825bb399f04375cc6d49cee2655f99ad94649961b04a867bfd70c98e20453e69dd4b31fb94298188a4c2b07e.jpeg",
"p_price":"$4.99",
"p_description":"Creamy vanilla ice cream with a syrup."
},
{
"url":"https://my.store.com/10",
"p_name":"BBQ Bacon Burger",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/g81575a19c31a336fc62a086a543d1c719e525319d12f0bb9456be5a17c857ca6d79e4a56319ccf58349f662145f63b.jpeg",
"p_price":"$10.99",
"p_description":"Juicy beef patty topped with crispy bacon and smoky BBQ sauce."
},
{
"url":"https://my.store.com/11",
"p_name":"Crispy Fish Sandwich",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/g395375085e97eadb9262c1b204936dd723682c97bcdb80bc6515c808e60e89a97a80b48cff054439ef35912a1b2109.jpeg",
"p_price":"$9.99",
"p_description":"Crispy breaded fish fillet served on a soft bun with tartar sauce."
},
{
"url":"https://my.store.com/12",
"p_name":"Nachos Supreme",
"p_image":"https://stripocdn.email/content/guids/CABINET_389a92e993fb24156b08430ad480134c34520e86ee8b84a2a93fadd103cb2bfa/images/gd4f9437d7ee047f370752516852d2531db1decf1843a05d29269d40d6c13565b625fbe2f67f65b4acdfd14a39070ac.jpeg",
"p_price":"$8.99",
"p_description":"Crispy tortilla chips loaded with melted cheese and tangy salsa."
}
]
}
],
"transformers":[
{
"type":"srt",
"config":{
"name":"SRT_example_B"
}
}
],
"composers":[
],
"templateId":"123456789",
"emailName":"SRT_example_B"
}
Voila! We will obtain the email message designed according to the specified requirements by making the request. To create a new email message in the same design but with different data, we need to modify the dataSources section in the request. There is no need to make changes to the SRT transformer itself or the module placement, as they are already saved and can be referenced by specifying the corresponding name in the request. This approach saves us time when creating email messages with the same design but varying data, offering convenience and efficiency in the process.
Updated over 1 year ago