Инструкция

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

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

Динамические условия с помощью оператора {% 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> и вёрстка «поедет».

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

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

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

Фичи

Интеграции

Цены

Поддержка

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