Now that we are aware of the possibilities Mailjet's template language offers, we can put them all together.
This section will show you how to quickly be up and running with your first transactional template. This section leverages Mailjet's responsive mail builder (Passport) which helps you design your emails easily.
At the end of this section you will have a flexible e-commerce template, which will cover different types of actions - order confirmation (including list of purchased products), out of stock notice, refund request, unavailable product notification.
OK, let's go!
- First, go to the Gallery for transactional templates and pick one. For our demonstration, we chose the one called "Receipt".
- Configure Subject, Email Address and Name of the Sender
- Design the template
In this section, we can actually start designing our own template. You can use the template language to insert text, images or advanced logic.
Of course, we would like our email to vary, depending on the the purpose of the message. We can achieve this by leveraging the conditional statements. If the email is order confirmation or refund, we would like to display additional section with the products and their description. We can insertTemplate language block with the following code:
{% if var:step == "refund" or var:step == "confirmorder" %}
Your clients can order N products, how to handle this? Well, let’s use loop structure for that! You can iterate on all the purchased products in order to display them in the template using smart loops. {% for purchase in var:products %}
To display the goods nicely, we can add 1 split section, where we will have an image on the left side and some product information on the right side:
<ul>PRODUCT TYPE:</ul><li>{{purchase.name}}</li>
<ul>PRODUCT DESCRIPTION:</ul>{{purchase.description}}We should close the loop afterwards in order to proceed further. You can add Template language block with {% endfor %} .
In order to display price details per product, we could make a table with 4 columns in our responsive template builder with column names - Name, Number, Price, Total. You will print the values nested in the product variable in the respective column.
When you extract the loop from the template, it will look like this:
twig linenums="1" hl_lines="1 6"
{% for purchase in var:products %}
{{purchase.name}}
{{purchase.number}}
{{purchase.price}}
{{purchase.totalprice}}
{% endfor %}As we need this section only if the email is related to order confirmation or refund, we have opened a condition. Don't forget that we need to close it. For better visibility, you can add {% endif %} in separate Template block.
When confirming order, we need to show the customer additional details about the order. We can add another table and print inside the information about the order, stored in the variable order.
html linenums="1"
{% if var:step == "confirmorder" %} {{var:totalprice:"Default value"}}
{{var:order_date:"Default value"}} {{var:order_id:"Default value"}} {% endif %}Here is what the final results will look like!
# API call to send order confirmation
"Vars":
{
"products":[
{"name":"T-shirt",
"number":2,
"price":"$20.00",
"totalprice":"$40.00",
"link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
"description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
},
{
"name":"T-shirt",
"number":1,
"price":"$20.00",
"totalprice":"$20.00",
"link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
"description":" <li> Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li> 1x1 rib knit collar and shoulder-to-shoulder taping</li> <li> Double-needle hem</li> <li> Imported</li> <li>Machine wash cold</li>"
}
],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"unavailable",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}The API call above will result in the following message, delivered to the recipient as order confirmation:
# API call for out of stock item
"Vars":
{
"products":[
{"name":"T-shirt",
"number":2,
"price":"$20.00",
"totalprice":"$40.00",
"link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
"description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
},
{
"name":"T-shirt",
"number":1,
"price":"$20.00",
"totalprice":"$20.00",
"link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
"description":" <li> Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li> 1x1 rib knit collar and shoulder-to-shoulder taping</li> <li> Double-needle hem</li> <li> Imported</li> <li>Machine wash cold</li>"
}
],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"unavailable",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}The API call above will result in the following message, delivered to the recipient as a notification for unavailable product.
# API call to send refund request
"Vars":
{
"products":[
{"name":"T-shirt",
"number":2,
"price":"$20.00",
"totalprice":"$40.00",
"link":"https://s-media-cache-ak0.pinimg.com/736x/25/cf/c1/25cfc1d2d5239d2c37eebdd354d9a285.jpg",
"description":"<li>Funny T-shirt for coders<\/li> <li>100% cotton<\/li> <li>Machine washable</li>"
},
{
"name":"T-shirt",
"number":1,
"price":"$20.00",
"totalprice":"$20.00",
"link":"http://rlv.zcache.com/keep_calm_and_code_on_t_shirt_programming_nerd-r7592d3683abe4438863f9192f03bd467_804gy_512.jpg",
"description":" <li> Standard fit</li> <li> Fits true to size</li> <li> 5.4 oz. 100% cotton</li> <li> 1x1 rib knit collar and shoulder-to-shoulder taping</li> <li> Double-needle hem</li> <li> Imported</li> <li>Machine wash cold</li>"
}
],
"vat":"$12.00",
"totalprice":"$72.00",
"firstname":"Mr. Awesome",
"step":"refund",
"order_date":"10-01-2016",
"order_id":"423482",
"productname":"T-shirt"
}The API call above will result in the following message, delivered to the recipient as refund information.