Transactional e-mails structure
Summary
Introduction
This document is intended to list predefined variables when building custom transactional e-mails to be sent to customers via Mailjet. Each of these e-mails are triggered by changes in a store’s order, cart or customer.
In these transactional e-mails you can use custom info about the resource you are reffering to. To use this info, you have to set variables in your Mailjet transactional emails, following Mailjet’s template language and our order, cart, and customer data structures. To send the e-mail, we create a contact in Mailjet, and it’s info can also be used.
List of transactional emails
In the following table you can see the customizable e-mails.
| Description | Link to example | |
|---|---|---|
| Order confirmation | Notify customers that their payment has been processed | Example |
| Payment confirmation | Notify customers that their payment has been corfirmed | Example |
| Shipping confirmation | Notify customers that their order is on the way | Example |
| Delivery confirmation | Notify the user that the package was delivered | Example |
| Order invoice | Send a receipt to customers when they buy something from your store | Example |
| Cancellation confirmation | Notify customers that their order has been cancelled | Example |
| Refund confirmation | Notify customers that their refund has been processed | Example |
| New user | Notify users about their registration | Example |
| Abandoned cart | Notify customers about their abandoned cart | Example |
Examples
Order confirmation
In the following code you can see the example of an e-mail sent right after the buyer’s finished the order in checkout. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }}! We just recived your order <a href="{{ var:status_link }}">#{{ var:number }}</a></h1>
<p> Your package will be delivered in {% for shipping_line in var:shipping_lines %} {{ shipping_line.delivery_time.days }} {% endfor %} working days </p>
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price * item.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>
Payment confirmation
In the following code you can see the example of an e-mail sent right after the buyer’s payment was aproved. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{mj:contact.name}}! your payment for order <a href="{{ var:status_link }}">#{{ var:number }}</a> was aproved</h1>
{% for shipping_line in var:shipping_lines %}
<p> We'll post your package for shipping in {{ shipping_lines.posting_deadline.days }} days </p>
{% endfor %}
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price * item.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</html>
Shipping confirmation
In the following code you can see the example of an e-mail sent when the shipping company starts the delivery process. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }}! The products of order <a href="{{ var:status_link }}">#{{ var:number }}</a> are on the way!</h1>
<p>
{% for shipping_line in var:shipping_lines %}
{% if data:shipping_line.scheduled_delivery:"N/A" %}
<p> Your package will be delivered at {{ shipping_line.scheduled_delivery }}</p>
{% else %}
<p> Your package will be deliverede in {{ shipping_line.delivery_time.days }}</p>
{% endif %}
{% endfor %}
{% for shipping_line in var:shipping_lines %}
{% for tracking_codes in var:tracking_codes %}
<a href="{{shipping_line.tracking_codes.link}}"> Track your package in this link</a>
{% endfor %}
{% endfor %}
</p>
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price * item.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>
Delivery confirmation
In the following code you can see the example of an e-mail sent when the shipping company notify that the package was delivered. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }}, your package from order <a href="{{ var:status_link }}">#{{ var:number }}</a> was delivered!</h1>
<p>
Now just enjoy your purchases. =)
And do not forget, whenever you need us, we'll be here.
<br>
</p>
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price*items.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>
Order invoice
In the following code you can see the example of an e-mail sent when a invoice is generated for the buying transaction. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }}, here is the invoice generated for order <a href="{{ var:status_link }}">#{{ var:number }}</a></h1>
<li>
{% for shipping_line in var:shipping_lines %}
{% for invoices in shipping_lines %}
<a href="{{ shipping_line.invoices.link }}">Link to download the invoice</a>
{% endfor %}
{% endfor %}
</li>
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price*items.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>
Cancellation confirmation
In the following code you can see the example of an e-mail sent when the buyer’s payment was not aproved. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }}, your payment for order <a href="{{ status_link }}">#{{ var:number }}</a> was cancelled :( </h1>
<p>
But do not worry, you still can buy these amazing items. Here is a <a href="{{ var:checkout_link }}">link</a> to our checkout, if you want to try buying this again.
</p>
<h3> Order details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price * item.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>
Refund confirmation
In the following code you can see the example of an e-mail sent when the buyer’s payment amount is refunded. This e-mail uses our Order data structure.
<html>
<body>
<h1>Hello {{ mj:contact.name }},</h1>
<p>
We refunded the payment relative to order <a href="{{ status_link }}">#{{ var:number }}</a>
<br>
We hope you had a great experience and come back visiting our store soon!
</p>
</body>
</html>
New user
In the following code you can see the example of an e-mail sent to new users when login in the first time in the store. This e-mail uses our Customer data structure.
<html>
<body>
<h1>Hello {{mj:contact.name}}, it's a pleasure to see you here.</h1>
{% if data:discount.value:"N/A" %}
<p>Your registration was successful, enjoy our offers!!</p>
{% else %}
<p>You're a special customer, and have a discount of ${{ discount.value }} in every purchase!</p>
{% endif %}
</body>
</html>
Abandoned cart
In the following code you can see the example of an e-mail sent when the customer leaves a cart whithout finishing the order. This e-mail uses our Cart data structure.
<html>
<body>
<h1>Hello {{mj:contact.name}}, looks like you forgot some items in the cart</h1>
<p>
Buy this items today and get 30% discount with the cupom #SUPERSALE. Take a closer look in the items that you are missing:
</p>
<h3> Cart details:</h3>
<ul>
{% for item in var:items %}
<li>
Product: <img src="{{ item.picture.big.url }}" />{{ item.name }} x {{ item.quantity }}
Price: {{ item.final_price }} Total: {{ item.final_price*items.quantity }}
</li>
{% endfor %}
</ul>
<p>
Subtotal: {{ var:currency_symbol }} {{ var:amount.subtotal }} <br>
Freight: {{ var:currency_symbol }} {{ var:amount.freight }} <br>
Discount: {{ var:currency_symbol }} {{ var:amount.discount }} <br>
Total: {{ var:currency_symbol }} {{ var:amount.total }}
</p>
</body>
</html>