Как вставить блок «Брошенный просмотр» в собственную HTML-рассылку?

В Convead можно создать рассылку, на основе шаблонов (применяя визуальный конструктор) или с нуля, используя язык HTML.

В визуальном конструкторе рассылки блок «Брошенный просмотр» вставляется перетаскиванием соответствующего элемент из сайдбара. Чтобы вставить брошенный просмотр в HTML-рассылку нужно прописать инструкции на языке шаблонов Liquid.

Важный момент! Блоки с динамическим контентом доступны только при вёрстке триггерных рассылок.

Использование элементов языка Liquid в элементе «Брошенный просмотр» в HTML-рассылке позволяет отправлять полностью кастомизированное триггерное письмо со списком просмотренных товаров.

Объект просмотренные товары доступен в HTML-шаблоне под именем product_collection. У данного объекта доступны следующие методы:

line_items – коллекция товаров корзины;

Для экземпляра коллекции товаров доступны следующие методы:

name — название товара (из XML фида);
url — ссылка карточки товара в магазине (из XML фида);
image_url — ссылка на изображение товара (из XML фида);
price — цена товара;

Простейший пример вывода строк брошенного просмотра в HTML-рассылке:

<!-- начало списка товаров --> 
<table> 
<tr> 
<td>Image</td> 
<td>Product</td> 
<td>Price</td> 
</tr> 
{% for line_item in product_collection.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> 
</tr> 
{% endfor %} 
</table> 
<!-- конец списка товаров -->

Здесь показано, как можно использовать все доступные атрибуты брошенного просмотра.

Для кастомизации вы можете использовать любые конструкции HTML и CSS, поддерживаемые почтовыми клиентами. Обратите внимание, что при верстке HTML-рассылок следует быть осторожными и придерживаться ряда рекомендаций, т.к. почтовые клиенты довольно капризны и не понимают некоторые современные стандарты верстки.

Например, кастомизированная ссылка с названием товара может выглядеть так:

<a href="{{line_item.url}}" style="text-decoration: none; color: #006699;"> {{ line_item.name }} </a>

Чтобы добавить описание для товара, воспользуйтесь данной переменной:

{{ line_item.description }}

В рассылке отобразится столько товаров, сколько пользователь посмотрел за визит. Если нужно ограничивать количество, добавьте liquid-код:

{% if forloop.index < 30 %}…{% endif %}

Важный момент! В режиме предварительного просмотра при редактировании HTML-письма, а также при отправке тестового письма Convead нарисует блок с двумя вымышленными товарами-заглушками и ценами, но с применением всех указанных вами стилей. Это сделано для того, чтобы можно было представить, как будет выглядеть этот блок в письме. При отправке настоящей триггерной рассылки клиенту, в письмо подставляется ваши реальные товары из XML-фида с товарами. Стили оформления товаров и прочих элементов будут использованы те, что вы настроили в рассылке.

Чтобы оформить блок брошенный просмотр в стиле шаблонных рассылок Convead можно использовать код, представленный ниже. Кроме настройки стилей здесь используется заглушка на случай, если нет картинки товара:

<!-- начало списка товаров -->
<table cellpadding="0" cellspacing="0" style="margin: 15px 0; font-size: 15px; line-height: 1.3em;" width="100%"> 
<tr>
    <td colspan="3" 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 product_collection.line_items %}
<tr>
    <td colspan="3" 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}}">
            {% assign line_item_image = line_item.image_url %}{% if line_item_image == null %} 
            {% assign line_item_image = 'https://d2p70fm3k6a3cb.cloudfront.net/public/messages/common/product.jpg' %}
            {% 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>
</tr>
{% endfor %}
</table>
<!-- конец списка товаров -->

При оформлении полей в рассылках можно использовать стандартные фильтры liquid. Плюс, в Convead поддерживается фильтр md5 (кодирование строки или числа с помощью алгоритма md5).

Пример использования фильтров:

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