Як реалізувати передачу масиву даних

За допомогою передачі масиву даних ви можете створювати картки товару та надсилати динамічні листи з персоналізованою інформацією, наприклад, даними на замовлення на різних етапах.

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

Розглянемо, як створити подію з форматом даних масиву та додати змінні до шаблону листа.

Створіть подію

Перейдіть до розділу «Automation» > «Менеджер подій» (Events manager). Натисніть «Додати нову подію» (Add new event) та виберіть пункт «Кастомна подія» (Custom event).

Читайте також «Як створити подію».

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

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

Після додавання всіх змінних натисніть «Додати». Подія успішно створена. Скопіюйте 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 та даними.

Ознайомтеся докладніше у статті з реальним прикладом у розділі «Протестуйте, що вийшло».

Оновлено: 19.01.2023