Инструкция
Использование условий и циклов в вёрстке
Продвинутый синтаксис для улучшения персонализации и упрощения работы
Динамические условия с помощью оператора {% if %}
Логика применения: «Если известно значение переменной N, то подставляй его, если нет — сделай X».
Например, если известно имя пользователя — оно подставляется, если нет — то обращение будет «Дорогой подписчик»:
Например, если известно имя пользователя — оно подставляется, если нет — то обращение будет «Дорогой подписчик»:
{% if name %}
{{name}}
{% else %}
Дорогой подписчик
{% endif %}
Или, например, если известен пол подписчика, то подставляется соответствующее окончание, если нет — то нейтральное:
уважаем
{% if gender == 'Муж' %}
ый
{% elif gender == 'Жен' %}
ая
{% else %}
ый
{% endif %}
Аналогично можно применять это условие для отображения бонусных баллов, размера скидки в зависимости от количества покупок, и в других случаях.
Чем больше у вас пользовательских переменных — тем более персонализированные рассылки вы можете отправлять, применяя оператор if.
Условие «если» можно применять даже к целым блокам. Удобнее всего это делать в блочном редакторе, чтобы не прописывать условия в коде целиком.
Чем больше у вас пользовательских переменных — тем более персонализированные рассылки вы можете отправлять, применяя оператор 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=«Маша» и т.д.
На выходе вы получите аналогичную таблицу, но сэкономите время.
То есть на первом шаге 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 есть готовые полосы с блоками рекомендаций.
Если остались вопросы — напишите нам в поддержку на support@mailganer.ru или в онлайн-чате внутри платформы.