Перейти к основному содержимому

Шаблонизатор Liquid в Октопус CDP

Liquid — язык шаблонов, созданный Shopify и ставший стандартом для писем и страниц, содержимое которых собирается «на лету». Вы пишете обычный HTML и добавляете в него команды в фигурных скобках: они подставляют данные и управляют тем, какие блоки показать конкретному получателю.

В Октопус CDP Liquid — это связующее звено между данными о клиенте и товарах и контентом коммуникации. Платформа знает о клиенте всё: профиль, события, сегменты, просмотренные и брошенные товары. Liquid вместе с масками позволяет вывести эти данные в письме или всплывающем окне — без разработки и без отдельного шаблона под каждый сегмент.

Как это работает​

Логика одинаковая для всех каналов:

  1. Сценарий собирает данные. Нода «Товары» формирует подборку по стратегии (брошенная корзина, последние просмотренные, товары из сегмента).
  2. Данные передаются в шаблон. Октопус передаёт массив товаров. Имя, email, телефон и другие данные клиента подставляются масками, например #USER_NAME#.
  3. Liquid подставляет значения. На этапе отправки шаблон «раскрывается»: Liquid-команды заменяются товарами из подборки, а маски — данными конкретного получателя.
  4. Клиент получает персональное сообщение — со своим именем, своей подборкой и своими условиями показа блоков.

Один шаблон — сколько угодно вариантов итогового письма. Отдельная вёрстка под каждый сегмент не нужна.

Где применяется​

ИнструментЧто даёт Liquid
РассылкиПерсональные письма с индивидуальной товарной подборкой и блоками под условие
Всплывающие окнаПерсональное содержимое попапа: индивидуальный промокод, конкретное предложение, товарная подборка
Сценарии автоматизацииКонтент шага коммуникации, зависящий от данных клиента и результата предыдущих нод

Liquid работает и на уровне внешних сервисов рассылок (например, UniSender): Октопус передаёт массив товаров, а шаблон отображает его в теле письма.

Из чего состоит шаблон​

Три базовые конструкции покрывают почти все задачи:

Вывод значения — двойные фигурные скобки:

{{ product.name }}

Условие — показать блок только тем, кому он нужен:

{% if product.available %}
  В наличии
{% else %}
  Нет в наличии
{% endif %}

Цикл — перебрать товары подборки:

{% for product in products %}
  {{ product.name }} — {{ product.price }} руб.
{% endfor %}

Дополнительно значения можно оформлять фильтрами через | — обрезать длинное название, дописать «руб.», пересчитать цену:

{{ product.name | truncate: 40 }}
{{ product.price | append: " руб." }}

Какие данные доступны​

Через Liquid в шаблон попадает массив товаров — результат работы ноды «Товары»: название, цена и старая цена, скидка, наличие, остаток, ссылки на страницу и изображения. Массив доступен, если нода «Товары» отработала в сценарии раньше отправки.

Данные клиента (имя, email, телефон, пользовательские поля) и значения с предыдущих шагов сценария, например выданный промокод, подставляются не через Liquid, а масками: #USER_NAME#, #PROMO_CODE# и т. д.

Готовый пример​

Небольшой блок письма: обращение по имени (маской #USER_NAME#) и подборка товаров с ценой, старой ценой и меткой наличия.

<p>Здравствуйте, #USER_NAME#! Мы подобрали для вас товары:</p>

<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  {% for product in products %}
  <tr style="border-bottom: 1px solid #f0f0f0;">
    <td style="padding: 12px; font-size: 14px;">
      <a href="{{ product.detail_page_url }}" style="color: #333333; text-decoration: none;">
        {{ product.name | truncate: 40 }}
      </a>
    </td>
    <td style="padding: 12px; font-size: 14px; text-align: right; white-space: nowrap;">
      {% if product.old_price %}<s style="color: #999999;">{{ product.old_price }} руб.</s>{% endif %}
      {{ product.price | append: " руб." }}
    </td>
    <td style="padding: 12px; text-align: center;">
      {% if product.available %}
      <span style="color: #2d7a3a; font-size: 12px;">В наличии</span>
      {% else %}
      <span style="color: #c0392b; font-size: 12px;">Нет в наличии</span>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</table>

Что важно помнить​

  • У каждой открывающей команды есть закрывающая: {% for %} → {% endfor %}, {% if %} → {% endif %}.
  • Названия полей пишутся строчными буквами: product.old_price, а не product.OLD_PRICE.
  • Если данных нет — цикл ничего не выведет, а условие просто скроет блок. Письмо не сломается, поэтому блоки, зависящие от необязательных данных (например, старая цена), стоит оборачивать в {% if %}.
  • Перед запуском массовой рассылки отправьте тестовое письмо: так видно, как шаблон раскрывается на реальных данных.

Остались вопросы?​

Если вы не нашли нужную статью, напишите нам - мы обновим документацию или поможем в Telegram.