Инструкция

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

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

Оператор {% if %}
Цикл for
Товарные рекомендации

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

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

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

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

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

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

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

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

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

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

Цикл for

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

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

Рассмотрим на примере следующей задачи: разместить в виде таблицы данные из списка.

Чтобы создать таблицу в HTML, используют тэги:

<table> — создаёт контейнер для таблицы;
<tr> — строка в таблице;
<td> — ячейка в строке.

В этом случае нужно будет прописать все значения в коде полностью, используя указанные выше теги. Вёрстка будет выглядеть так:

<table>
    <tr>
        <td>Text 1</td>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
</table>

<table>
    <tr>
        <td>Text 4</td>
        <td>Text 5</td>
        <td>Text 6</td>
    </tr>
</table>

<table>
    <tr>
        <td>Text 7</td>
        <td>Text 8</td>
        <td>Text 9</td>
    </tr>
</table>

На выходе получится следующая таблица:

Цикл for позволяет вам не писать весь код выше вручную, а использовать конструкцию. Тогда код будет выглядеть так:

{% for i in array %}
<table>
	<tbody>
		<tr>
			<td>{{ i }}</td>
		</tr>
	</tbody>
</table>
{% endfor %}

Array — это итерируемый объект, например список вида [«Саша», «Маша», «Даша»], а i — это временная переменная, которая «пробежится» по списку и на каждом «подходе» будет забирать соответствующие данные.

То есть на первом шаге i=«Саша», на втором шаге i=«Маша» и т.д.

На выходе вы получите аналогичную таблицу, но сэкономите время.

Важно при подготовке вёрстки не вставлять опертары {% for %} или {% if %} между тегами <table> и <td>. Иначе при сохранении письма операторы автоматически переместятся перед <table> и вёрстка «поедет».

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

В вёрстке письма используются 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>

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

<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 или в онлайн-чате внутри платформы.