How to add the “Order” block in your own HTML email?
You can create an email in InSend based on templates (using a visual editor) or from scratch using the HTML language.
In the visual editor for emails, the "Order" block is added by dragging the appropriate element from the sidebar. To insert the "Order" block into an HTML email, you need to write instructions in Liquid - the language of templates.
Using the Liquid language in the "Order" element of the HTML email allows you to send a fully customized auto email that includes the full composition and cost of the order.
The order object is available in the HTML template under the name "Order". The following methods are available for this object:
- line_items - inventory of the order
- display_revenue - total amount of the order
- revenue - total amount of the order without currency
- order_id - unique order number
The following methods are available for the goods collection instance:
- name - product name (from XML feed)
- url - link to the product card in the store (from XML feed)
- picture - link to the product picture (from the XML feed)
- qnt - quantity of goods in the order price - price of goods total - total price of goods in the order (qnt * price)
The simplest example of order lines in an HTML newsletter:
<!-- start -->
<table>
<tr>
<td>Image</td>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
{% for line_item in order.line_items %}
<tr>
<td><img src="{{ line_item.picture }}" /></td>
<td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td>
<td>{{ line_item.price }}</td>
<td>{{ line_item.qnt }} pcs</td> <td>{{ line_item.total }}</td>
</tr>
{% endfor %}
</table> <br>
<b>Sum: {{ order.display_revenue }}</b>
<!-- end -->
This shows how to use all available order attributes and the products present in the order.
You can use all HTML and CSS constructs supported by mail clients to customize the order items. Please note that you should be careful when designing an HTML email and follow a set of recommendations, as email clients are quite capricious and do not understand some of the latest layout standards.
For example, a customized link with a product name might look like this:
<a href="{{line_item.url}}" style="text-decoration: none; color: #006699;">{{ line_item.name }}</a>
Important note! In preview mode when editing HTML emails and sending a test email, InSend uses an order with two fictitious products and prices, but with all styles applied. This is done so that you can easily imagine how the real order will look like. When you send a real trigger mailing to a customer, the examples are replaced with the actual goods from the XML feed. The styles for the decoration and other elements of the order are the same as you set in the preview mailing.
To design an order block using the templates in InSend, you can use the code below. In addition to the styles, a stub is used here in case there is no image of the product:
<!-- start -->
<table cellpadding="0" cellspacing="0" style="margin: 15px 0; font-size: 15px; line-height: 1.3em;" width="100%">
<tr>
<td colspan="5" style="padding: 0 0 10px 0;"> <h4 style="font-size: 22px; line-height: 1.2em; font-weight: 400; margin: 0; padding: 4px 0;">Your order</h4> </td>
</tr>
{% for line_item in order.line_items %}
<tr>
<td colspan="5" style="border-top: 1px solid #e0e0e0;"></td>
</tr>
<tr>
<td valign="middle" width="73" style="padding: 9px 14px 9px 0;"> <a href="{{line_item.url}}"> <br />{% assign line_item_image = line_item.picture %} {% if line_item_image == null %} <br />{% assign line_item_image = 'https://d2p70fm3k6a3cb.cloudfront.net/public/messages/common/product.jpg' %} <br />{% endif %} <img src="{{line_item_image}}" width="73"> </a> </td>
<td valign="middle" style="padding: 9px 0; font-size: 16px; line-height: 1.3em;"> <a href="{{line_item.url}}" style="text-decoration: none; color: #3e3e3e;"> {{ line_item.name | truncate: 10, '...' }} </a> </td>
<td valign="middle" width="140" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.price }}</td>
<td valign="middle" width="40" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.qnt }} pcs</td>
<td valign="middle" width="40" align="right" style="padding: 9px 0; font-size: 16px; line-height: 1.3em; font-weight: bold; white-space: nowrap;">{{ line_item.total }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="5" style="padding: 0 0 10px 0; border-top: 1px solid #e0e0e0;"></td> </tr>
<tr>
<td colspan="5">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="padding: 20px 0;"> <b>Order numberа: {{order.order_id}}</b> </td> <td valign="middle" style="padding: 20px 0; text-align: right; color: #30363c; font-size: 16px; line-height: 1.2em; text-align: right;"> <b>Total: {{order.display_revenue}}</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end -->
You can use standard liquid filters when designing fields in emails. Also, InSend supports md5 filter (encryption of strings or numbers with md5 algorithm).
Example of filters:
{% assign encoded_var = "Test" | downcase | md5 %} <p> <a href="http://example.com/?super_param={{encoded_var}}"></a> </p>
Here, the string "Test" is first lowercased with the case filter and then encrypted with the md5 filter.
Important note! Before sending an email, be sure to check how it looks in the preview and send yourself a test email (buttons at the top right) to ensure that all elements are displayed correctly.