Инструкция

Использование условий и циклов в вёрстке

Продвинутый синтаксис для улучшения персонализации и упрощения работы

Динамические условия с помощью оператора {% if %}

Логика применения: «Если известно значение переменной N, то подставляй его, если нет — сделай X».

Например, если известно имя пользователя — оно подставляется, если нет — то обращение будет «Дорогой подписчик»:

{% if name %} 
    {{name}} 
{% else %} 
    Дорогой подписчик 
{% endif %}

Или, например, если известен пол подписчика, то подставляется соответствующее окончание, если нет — то нейтральное:

уважаем 
{% if gender == 'Муж' %} 
  ый 
{% elif gender == 'Жен' %} 
  ая 
{% else %} 
  ый 
{% endif %}

Аналогично можно применять это условие для отображения бонусных баллов, размера скидки в зависимости от количества покупок, и в других случаях.

Чем больше у вас пользовательских переменных — тем более персонализированные рассылки вы можете отправлять, применяя оператор if.

Условие «если» можно применять даже к целым блокам. Удобнее всего это делать в блочном редакторе, чтобы не прописывать условия в коде целиком.

О том, как мы использовали оператор if, чтобы скрывать или показывать целые блоки в нашей новогодней рассылке, читайте в статье «Как проверить персонализацию в письме».

Возможности применения оператора {% if %}

Используйте другие логические условия проверки значений текстовых и числовых переменных с помощью оператора if для улучшения персонализации в рассылках.

Логика конструкции остаётся такой же, но дополнительно нужно подставить:

название переменной
условие (например, ==)
значение переменной (для выполнения условия)

Пример: где variable — это название переменной, а value — значение переменной (текст или число), а между ними — нужное условие.

{% if variable == "value" %} 
    одно
{% else %} 
    другое
{% endif %}

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

{% if order >= "1" %} 
    спасибо, что покупаете у нас
{% else %} 
    сделайте первый заказ
{% endif %}

Таблица условий для оператора {% if %}

Равенство

Проверяет, равняется ли значение переменной заданному

{% if gender == "Муж" %}

Неравенство

Проверяет, что значение переменной не равно заданному

{% if gender != "Муж" %}

Больше

Проверяет, что значение переменной больше заданного

{% if days > 5 %}

Больше или равно

Проверяет, что значение переменной больше или равно заданному

{% if days >= 5 %}

Логическое И

and

Проверяет, что оба выражения true

{% if days > 5 and gender != "Муж" %}

Логическое ИЛИ

Проверяет, что хотя бы одно выражение true

{% if gender == "Муж" or gender == "Не задано" %}

Вхождение в последовательность

Проверяет, что переменная есть в списке

{% if variable in list %}

Отсутствие в последовательности

not in

Проверяет, что переменной нет в списке

{% if variable not in list %}

Цикл for

Базовая логика применения: многократное выполнение фрагмента кода для каждого элемента итерируемого объекта (например, списка или словаря).

В вёрстке конструкцию {% for %} используют чтобы «перебирать» значения пользовательской переменной и упростить работу с повторяющимися блоками.

Например, вы можете перебрать значения пользовательской переменной, если переменная является итерируемым объектом: списком или словарём.

Важно: пользовательская переменная должна быть итерируемым объектом — списком или словарём.

Итерация по списку: поиск значения переменной в списке.

item = значение переменной
list = список

{% for item in list %}
  <p>{{ item }}</p>
{% endfor %}

Проверка условий внутри цикла: проверят, находится ли переменная с заданным значением в списке. Используется совместно с оператором if.

Пример ниже — поиск значения «банан» (item) в списке (list), где есть «яблоко», «банан», «груша».

{% for item in list %}
  {% if item == "банан" %}
    <p>Найден банан!</p>
  {% else %}
    <p>{{ item }}</p>
  {% endif %}
{% endfor %}

Блок с товарными рекомендациями

В вёрстке письма используются 2 цикла: причина рекомендации (например, просмотренные товары или товары из корзины) и рекомендуемые товары.

Что такое товарные рекомендации >

Инструкция по подготовки вёрстки триггера с блоком товарных рекомендаций >
Как настроить товарные рекомендации в рассылках >

Исходные товары (причина рекомендаций) находятся в массиве s_products, рекомендуемые товары находятся в массиве r_products. Чтобы вывести все товары из массивом нужен оператор цикла.

Синтаксис на примере массива с исходными товарами {% for product in s_products %}...{% endfor %}. Внутри цикла подставляются переменные о товаре.

<html>
 <body>
   ...
   <h2>Товары в корзине</h2>

   {% for product in s_products %} //начало цикла, в каждой итерации берётся следующий элемент из массива s_products
   <div>
     <p><a href="{{ product.url }}"><img src="{{ product.image_url }}"/></a></p>
     <p>{{ product.name }}, {{ product.amount }} шт., {{ product.price }} руб.</p>
   </div>
   {% endfor %} //конец цикла

   <h2>Рекомендуем посмотреть</h2>

   {% for product in r_products %} //начало цикла, в каждой итерации берётся следующий элемент из массива r_products
   <div>
     <p><a href="{{ product.url }}"><img src="{{ product.image_url }}"/></a></p>
     <p>{{ product.name }}, {{ product.price }} руб.</p>
   </div>
   {% endfor %} //конец цикла

   ...
 </body>
</html>

Ещё один пример, когда у товара есть 2 цены — до скидки и после. Предположим, что не у всех товаров есть цена до скидки. Тогда в вёрстке нужно использовать проверку {% if product.oldprice %}

{% for product in r_products %}
...
  <p>
    Цена:
    {% if product.oldprice %}<strike>{{ product.oldprice }} руб.</strike>{% endif %}
    {{ product.price }} руб.
  </p>
...
{% endfor %}

Другой пример: если требуется в строго ограничить количество отображаемых товаров до 6, и при этом по 3 товара в каждом ряду.

<table>
  <tr>
    {% for product in r_products %}
      {% if forloop.counter <= 3 %}
        <td>...</td>
      {% endif %}
    {% endfor %}
  </tr>
  <tr>
    {% for product in r_products %}
      {% if forloop.counter > 3 and forloop.counter <= 6 %}
        <td>...</td>
      {% endif %}
    {% endfor %}
  <tr>
</table>

forloop.counter — это специальная переменная, которая автоматически считает номер текущей итерации в цикле {% for %}.

Этот же пример, только оптимизированный с точки зрения использования количества циклов:

<table>
  <tr>
    {% for product in r_products %}

      {% if forloop.counter <= 3 %}
        <td>...</td>
      {% endif %}

      {% if forloop.counter == 3 %}
  </tr>
  <tr>
      {% endif %}
  
      {% if forloop.counter > 3 and forloop.counter <= 6 %}
        <td>...</td>
      {% endif %}

    {% endfor %}
  <tr>
</table>

В блочном редакторе Mailganer есть готовые полосы с блоками рекомендаций.

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

Переменные в Mailganer >
Как подставить переменную в письмо >
Как работать с переменными в блочном редакторе >
Как проверить персонализацию в письме >

Если остались вопросы — напишите нам в поддержку на support@mailganer.ru или в онлайн-чате внутри платформы.

Помогает перевести клиентские запросы на язык, понятный команде разработки. Отслеживает баги и тестирует новые фичи. Собирает идеи по улучшению продукта — и следит, чтобы они доехали до прода

Виктор Русин

Технический специалист поддержки Mailganer

14.11.2023

дата публикации

19.01.2025

дата последнего обновления

Использование условий и циклов в вёрстке

Оглавление

Динамические условия с помощью оператора {% if %}

Возможности применения оператора {% if %}

Цикл for

Блок с товарными рекомендациями