Как реализовать передачу массива данных

С помощью передачи массива данных вы можете создавать карточки товара и отправлять динамические письма с персонализированной информацией — например, данными по заказу на разных этапах.

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

Рассмотрим, как создать событие с форматом данных массива и добавить переменные в шаблон письма.

Создайте событие

Перейдите в раздел «Automation» > «Менеджер событий». Нажмите «Добавить новое событие» и выберите «Пользовательское событие».

Читайте также «Как создать событие».

Напротив названия переменной для передачи массива данных выберите тип «Структура». Добавьте переменные по продукту внутри структуры.

Для передачи ссылки на изображение товара используйте переменную типа «Строка».

После добавления всех переменных нажмите «Добавить». Событие успешно создано. Скопируйте URL, на который будут отправляться данные, и само тело структуры данных. Их нужно передать вашему разработчику для настройки отправки информации с вашего сайта через POST запрос.

Добавьте массив данных в шаблон

Вы можете вставить массив данных в шаблон письма в упрощенном или блочном редакторе. Чтобы обозначить начало и конец массива данных, добавьте |[ for item in products ]| и |[ endfor ]|.

Где products — название переменной, обозначающей массив.

Чтобы указать переменную из переменной структуры, вам нужно к каждой переменной добавить item. К примеру, если вы передаете ссылку на картинку товара с помощью переменной img, вам нужно добавить в шаблон переменную в виде {{item.img}}.

Для отображения картинки используйте тег отображения изображения с атрибутом источника <img scr="{{item.img}}">.

Чтобы указать кликабельной ссылки, используйте тег создания ссылки с атрибутом адреса <a href="/{{item.url}}">.

Создание карточки товара

Для создания карточки товара рекомендуется создать таблицу, где каждый элемент — картинка или текст — это отдельная ячейка таблицы, и тут действуют как стили картинки, так и стили таблицы.

Пример кода с массивом данных без стилей:

<div>|[ for item in products ]|
<table>
<tbody>
<tr>
<td><img scr="{{item.img}}"></td>
<td>{{item.name}}</td>
<td>{{item.id}}</td>
<td><a href="/{{item.url}}">текст</a></td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
|[ endfor ]|</div>

Вы можете добавить инлайновые стили для таблицы через атрибут style, чтобы отобразить информацию в карточке под свой дизайн. Вы можете также создавать такие письма без знаний HTML, используя готовые шаблоны. Читайте подробнее: «Как создавать динамические письма по событиям на основе готовых шаблонов SendPulse».

Настройка расположения товаров в ряд

При создании карточки товара товары располагаются в одну колонку по вертикали по 1 товару в ряд. Чтобы расположить товары в ряд по горизонтали, внутри тега <tbody> добавьте следующие строки:

<table>
    <tbody><!--{% set columns = 4 %}--> <!--{% for item in products%}--> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr><!--{% endif %}-->
            <td>{{ item.product_name }}:{{ item.product_price }}</td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--></tr>
    <!--{% endif %}--> <!--{% endfor %}--></tbody>
</table>

Где:

Добавление через редактор

Перейдите в режим редактирования шаблона. Откройте редактирование исходного кода шаблона.

Если вы создаете шаблон в блочном конструкторе, вам нужно добавить элемент «Текст» и в панели редактирования элемента нажать <> для открытия исходного кода.

Вставьте массив данных со стилями таблицы.

Пример шаблона после добавления табличной верстки в исходный код:

Проверьте результат

Чтобы проверить отображение шаблона, создайте автоворонку с этим шаблоном в блоке «Email», запустите цепочку и отправьте событие с вашим email и данными.

Ознакомьтесь подробнее в статье с реальным примером в разделе «Протестируйте, что получилось».

Обновлено: 09.01.2023