Как вставить блок "Брошенная корзина" в собственную html рассылку

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

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

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

Объект брошенной корзины (последней корзины) доступен в HTML-рассылке с типом "Автоматическая" под именем "cart". Для разовых и рассылок по расписанию не используется. У данного объекта доступны следующие методы:

  • line_items – коллекция товаров корзины;
  • display_revenue – итоговая сумма брошенной корзины.
  • revenue – итоговая сумма брошенной корзины без валюты.

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

  • name — название товара (из XML фида);
  • url — ссылка карточки товара в магазине (из XML фида);
  • image_url — ссылка на изображение товара (из XML фида);
  • qnt — количество товара в корзине;
  • price — цена товара;
  • total – итоговая цена товара в корзине (кол-во * цена).

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

<table>
  <tr>
    <td>Изображение</td>
    <td>Наименование</td>
    <td>Цена</td>
    <td>Кол-во</td>
    <td>Итого</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 }} шт.</td>
    <td>{{ line_item.total }}</td>
  </tr>
{% endfor %}
</table>
<br><b>Итого на сумму: {{ cart.display_revenue }}</b>

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

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

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

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

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

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

<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 cart.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.image_url %}{% 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;">
            <a href="ссылка на вашу корзину">Вернуться к покупкам</a>
          </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: {{cart.display_revenue}}</b>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

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

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

Здесь строка Test сначала будет приведена к нижнему регистру с помощью фильтра downcase, а затем закодирована фильтром md5

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

Все еще нужна помощь? Связаться с нами Связаться с нами