Использование условий и циклов в вёрстке
Продвинутый синтаксис для улучшения персонализации и упрощения работы
Оглавление
Динамические условия с помощью оператора {% if %}
Логика применения: «Если известно значение переменной N, то подставляй его, если нет — сделай X».
Например, если известно имя пользователя — оно подставляется, если нет — то обращение будет «Дорогой подписчик»:
{% if name %}
{{name}}
{% else %}
Дорогой подписчик
{% endif %} Или, например, если известен пол подписчика, то подставляется соответствующее окончание, если нет — то нейтральное:
уважаем
{% if gender == 'Муж' %}
ый
{% elif gender == 'Жен' %}
ая
{% else %}
ый
{% endif %} Или всё сразу — с учётом пола, имени, фамилии, отчества.
{% if gender == 'Муж' and name and patronymic %}
Здравствуйте, уважаемый {{ name }} {{ patronymic }}
{% elif gender == 'Жен' and name and patronymic %}
Здравствуйте, уважаемая {{ name }} {{ patronymic }}
{% elif name and patronymic and lastname %}
Здравствуйте, {{ lastname }} {{ name }} {{ patronymic }}
{% elif name %} Здравствуйте, {{ name }} {% else %}
Здравствуйте {% endif %}Чтобы ФИО точно было с большой буквы, используйте фильтры для форматирования текстовых переменных ›
Это условие также можно применять для отображения бонусных баллов, размера скидки в зависимости от количества покупок — и в массе других кейсов.
Чем больше у вас пользовательских переменных — тем более персонализированные рассылки вы можете отправлять, применяя оператор if.
Условие «если» можно применять даже к целым блокам. Удобнее всего это делать в блочном редакторе, чтобы не прописывать условия в коде целиком.
О том, как мы использовали оператор if, чтобы скрывать или показывать целые блоки в нашей новогодней рассылке, читайте в статье «Как проверить персонализацию в письме».
Возможности применения оператора {% if %}
Используйте другие логические условия проверки значений текстовых и числовых переменных с помощью оператора if для улучшения персонализации в рассылках.
- название переменной
- условие (например, ==)
- значение переменной (для выполнения условия)
{% if variable == "value" %}
одно
{% else %}
другое
{% endif %} Например, можно показать разный текст в зависимости от количества заказов:
{% if order >= "1" %}
спасибо, что покупаете у нас
{% else %}
сделайте первый заказ
{% endif %} Равенство
==
Проверяет, равняется ли значение переменной заданному
{% if gender == "Муж" %}
Неравенство
!=
Проверяет, что значение переменной не равно заданному
{% if gender != "Муж" %}
Больше
>
Проверяет, что значение переменной больше заданного
{% if days > 5 %}
Больше или равно
>=
Проверяет, что значение переменной больше или равно заданному
{% if days >= 5 %}
Логическое И
and
Проверяет, что оба выражения true
{% if days > 5 and gender != "Муж" %}
Логическое ИЛИ
or
Проверяет, что хотя бы одно выражение true
{% if gender == "Муж" or gender == "Не задано" %}
Вхождение в последовательность
in
Проверяет, что переменная есть в списке
{% 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 ›
Технический специалист поддержки Mailganer
