Dynamic templates for transactional campaign

In the Sitecore Send API we use the Mustache templating language to generate and render personalized content based on the data received via the API. This approach allows you to customize the recipient experience by tailoring specific elements, such as text and images, to meet individual preferences and requirements.

Iteration

You can loop data to go through lists of items and create dynamic content. Each item can be accessed individually, making it easy to structure your response.

To do that, add the HTML code in the campaign editor using an HTML item, and then include the JSON structure in the API Payload. Format your code as the below example:

Code to add in the template design editor via HTML item.

curl

<body>
    <div class="container">
    {{#each order.products}}
        <div class="product">
            <a href="{{this.link}}">
                <img src="{{this.img}}" alt="product image">
            </a>
            <div class="product-details">
                <h2>{{this.name}}</h2>
                <p>Characteristics: {{this.valiant.name}}</p>
                <p>Quantity: {{this.quantity}} - Total {{this.price.grossValue}}</p>
            </div>
        </div>
       {{/each order.products}}
     <a href="https://www.shopify.com/blog/abandoned-cart-emails" class="checkout-button">Checkout Now</a>
    </div>
</body>

JSON structure to add in the Payload in the transactional API

curl

"Substitutions": {
    "order": {
        "products": \[
            {
                "name": "T-shirt",
                "link": "https://google.com",
                "quantity": 3,
                "price": {
                    "grossValue": 1200,
                    "netValue": 1000
                },
                "variant": {
                    "name": "red",
                    "id": "kev8484j49j9j9"
                },
                "details": \[
                    "tech",
                    "deals"
                \],
                "img": "https://www.raybiztech.com/Admin/RBT/media/RBT-Images/sitecore-lap.png"
            },
            {
                "name": "Dress",
                "link": "https://moosend.com",
                "quantity": 2,
                "price": {
                    "grossValue": 600,
                    "netValue": 500
                },
                "variant": {
                    "name": "blue",
                    "id": "lksdjger8grgj9e8"
                },
                "details": \[
                    "tech",
                    "deals"
                \],
                "img": "https://www.softwebsolutions.com/wp-content/webp-express/webp-images/uploads/2023/05/Sitecore-CMS.jpg.webp"
            }
        \]
    }
}

If you have suggestions for improving this article, let us know!