How to insert the “Abandoned cart” block in your own HTML mailing

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 mailings, the “Abandoned cart” block is inserted by dragging the appropriate item from the sidebar. To insert an “Abandoned cart” block in the HTML-designed mailing, you will need to write instructions in Liquid – the language of templates.

Using the Liquid language for the “Abandoned cart” element in the HTML mailing allows you to send a fully customized trigger email with details of the full composition and cost of the abandoned cart.

The object of the abandoned cart (the last cart) is available in the HTML mailing with the “Automatic” type under the “cart” name. This is not used for one-time and scheduled mailings. The following methods are available for this object:

• line_items – the collection of items in the cart
• display_revenue – the total amount of the abandoned cart
• revenue – the total amount of the abandoned cart without currency

The following methods are available for the product collection:

• name – product name (from XML feed)
• url – link of the product card in the store (from XML feed)
• image_url – link to the product image (from XML feed)
• qnt – number of items in the cart
• price – price of the goods
• total – total price of the items in the cart (qty * price)

The simplest example of the output for an abandoned cart in an HTML-designed mailing:

<!-- start --> 
<table>
    <tr>
        <td>Image</td>
        <td>Name</td>
        <td>Цена</td>
        <td>Кол-во</td>
        <td>Sum</td>
    </tr> 
    {% for line_item in cart.line_items %}
    <tr>
        <td><img src="{{ line_item.image_url }}" /></td>
        <td><a href="{{ line_item.url }}">{{ line_item.name }}</a></td>
        <td>{{ line_item.price }}</td>
        <td>{{ line_item.qnt }} pieces</td>
        <td>{{ line_item.total }}</td>
    </tr>
    {% endfor %}
</table>
<b>Sum: {{ cart.display_revenue }}</b> 
<!-- End -->

Here you can see how you can use all the available attributes of the abandoned cart and the items that are in it.

You can use any HTML and CSS constructs supported by email clients to customize the items in the shopping cart. Please note that when laying out HTML mailings you should be careful to stick to a number of recommendations because email clients can be quite capricious and do not always understand some of the modern 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! In the preview mode when editing HTML emails, and when sending a test mail, Convead will show a cart with two fictitious product caps and prices, but complete with styling. This is done so that you can imagine what the email will look like with a real cart. When sending this trigger mailing to the client, their actual goods from the XML feed will be substituted in the email. The styles that you configured for the mailing will be used for the products and other aspects of the cart.

To make a cart block in the style of Convead’s template mailings, you can use the code below. In addition to setting the styles, a cap is used here in case there is no picture of the product.

You can use standard Liquid filters when designing fields in mailings. Plus, Convead supports the md5 filter (encode strings or numbers using the md5 algorithm).

Example of using filters:

{% assign encoded_var = 'Test' | downcase | md5 %} <p> <a href="http://example.com/?super_param={{encoded_var}}"></a> </p>

Here, the “Test” string will be lowercase first, using the downcase filter, and then encoded with the md5 filter.

Important point! Before sending a mailing, 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.