How to insert the “Order” block in your HTML newsletter
You can create a mailing in Convead based on templates (using a visual designer) or from scratch using the HTML language.
In the visual designer for email mailings, the “Order” block is inserted by dragging the corresponding element from the sidebar. To insert the “Order” block in an HTML newsletter, you need to write instructions in Liquid – the language of templates.
The use of the Liquid language in the “Order” element of the HTML newsletter allows you to send a fully customized trigger letter containing the full composition and cost of the order.
The object of the order is available in the HTML template under the name “order”. The following methods are available for this object:
- line_items – order goods collection
- display_revenue – total amount of the order
- revenue – total order amount without currency
- order_id – unique order number
The following methods are available for the product collection instance:
- name – product name (from XML feed)
- url – link to the product card in the store (from the XML feed)
- picture – link to the product image (from XML feed)
- qnt – quantity of goods in the order
- price – price of goods
- total – the total price of the goods in the order (qnt * price)
The simplest example of order lines in an HTML newsletter:
<code><code><!-- 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 you can use all the available order attributes and the products that are present in the order.
To customize order items, you can use any HTML and CSS constructs supported by mail clients. Please note that when you lay out an HTML newsletter you should be careful and adhere to a number of recommendations, because email clients are quite capricious and do not understand some of the most recent layout standards.
For example, a customized link with a product name might look like this:
<code><code><a href="{{line_item.url}}" style="text-decoration: none; color: #006699;">{{ line_item.name }}</a>
Important point! In preview mode when editing HTML emails, and when sending a test mail, Convead uses an order with two fictitious products and prices, but with all styles applied. This is done so that you can easily imagine what the real order will look like. When you send a real trigger mailing to a client, their actual goods from the XML feed will be substituted for the examples. The styles of decoration and other elements of the order will be the same as you set up in the preview mailing.
To style an order block using the templates in Convead, you can use the code below. In addition to the styles, a stub is used here in case there is no picture of the product:
<code><code><!-- 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;">Ваш заказ</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 }} шт</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 mailings. Plus, Convead supports filter md5 (encoding strings or numbers using the md5 algorithm).
Example of filters:
<code><code>{% assign encoded_var = "Test" | downcase | md5 %} <p> <a href="http://example.com/?super_param={{encoded_var}}"></a> </p>
Here, the “Test” string will first be lowercased using the downcase filter and then encoded with the md5 filter.
Important point! Before sending a newsletter, be sure to check how it will look in the preview and send yourself a test email (buttons at the upper right) to make sure that all the items are displayed correctly.