Главная Как вставить блок "Популярные товары" в собственную HTML-рассылку

Как вставить блок "Популярные товары" в собственную HTML-рассылку

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

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

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

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

ТОП КУПЛЕННЫХ
<table>
 <tr>
   <td>Изображение</td>
   <td>Наименование</td>
   <td>Цена</td>
   <td>Кол-во</td>
   <td>Итого</td>
 </tr>
 {% for line_item in account.top_purchased_offers %}
   <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 }} шт.</td>
  <td>{{ line_item.total }}</td>
   </tr>
 {% endfor %}
</table>
ТОП ПРОСМАТРИВАЕМЫХ
<table>
 <tr>
   <td>Изображение</td>
   <td>Наименование</td>
   <td>Цена</td>
   <td>Кол-во</td>
   <td>Итого</td>
 </tr>
 {% for line_item in account.top_viewed_offers %}
   <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 }} шт.</td>
  <td>{{ line_item.total }}</td>
   </tr>
 {% endfor %}
</table>

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

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

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

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

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

{{ line_item.description }}


Важный момент!
Перед отправкой рассылки обязательно посмотрите, как она будет выглядеть в предпросмотре и отправьте себе тестовое письмо (кнопки в верхней правой части), чтобы удостовериться что все элементы отображаются корректно.

Полезные статьи