Динамические карточки товаров: как они устроены в редакторе Pixcraft

Подборки товаров — один из самых популярных и выразительных элементов писем. Именно они приходят на помощь, если нужно быстро показать ассортимент и направить внимание получателя. А если в карточках используется динамический контент, можно управлять их логикой и внешним видом, не создавая десятки элементов вручную.

В статье расскажем о том, что такое динамические карточки товаров, как они устроены и как Pixcraft реализовал логику работы с динамической сеткой в рамках маркетинговой платформы Altcraft.

В чём разница между статическими и динамическими карточками

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

• разовые рассылки с общим каталогом, актуальным на момент отправки;
  
  
• промо-кампании, в которых ассортимент остаётся неизменным;
  
  
• ручные подборки, где нужна сформированная связка продуктов.

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

Как динамические карточки товаров работают в письмах

Сначала задаётся один шаблон карточки: внешний вид и набор полей. Он становится формой, которая используется в товарной сетке. Затем в этот шаблон подставляются товары из фида и указывается нужное количество карточек в сетке, при этом каждая содержит свои данные.

Пример использования динамических карточек для рекомендации товаров. Источник: Really Good Emails

Источник данных

Динамические карточки опираются на структурированный набор сведений о товарах. В разных платформах источниками могут выступать JSON-файлы, таблицы, YML-фиды, API, вебхуки или данные из CMS/CRM.
Независимо от того, какой формат используется, главное условие — чтобы файл содержал всю необходимую информацию о продуктах:

• наименование;
  
  
• изображение;
  
  
• цену;
  
  
• ссылку;
  
  
• бренд или категорию;
  
  
• дополнительные характеристики: цвет, размер, материал и так далее.

В письмах шаблоны карточек работают с этими данными как с переменными: в каждое поле подставляются соответствующие значения.

Особенности вёрстки

Товарные подборки должны корректно выглядеть и на мобильных устройствах, и в почтовых клиентах вроде десктопного Outlook. В мобильных клиентах сетка чаще всего перестраивается и адаптируется под ширину экрана. Однако для корректного отображения в Outlook (из-за ограниченной поддержки CSS) необходимо добавлять вспомогательную табличную разметку в условных комментариях.

Ниже — пример того, как может выглядеть код статичной сетки из четырёх товаров в два столбца:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    карточка товара 1
    </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 300px">
<![endif]-->
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    карточка товара 2
    </div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
<tr><td valign="top" style="width: 300px">
<![endif]-->
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    карточка товара 3
    </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 300px">
<![endif]-->    
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    карточка товара 4
    </div>
</td></tr>
</table>    

В случае с динамической сеткой задача усложняется: здесь необходимо рассчитывать разбиения на строки. Для этого в шаблоне используют счётчик итераций и проверяют, когда пора «закрывать» текущую строку и начинать новую.

Обобщённо в коде это может выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">

    { FOREACH item IN products }

    <div style="display: inline-block; vertical-align: top; width: 300px;">
    карточка товара item
    </div>

    { IF !loop.last }
        { IF loop.index % 2 == 0 }
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top" style="width: 300px">
            <![endif]-->
        { ELSE }
            <!--[if (gte mso 9)|(IE)]>
            </td></tr>
            <tr><td valign="top" style="width: 300px">
            <![endif]-->
        { END }
    { END }

 { ENDFOREACH }

</td></tr>
</table>

Здесь процесс можно описать следующим образом:

• проверяем, последняя ли это карточка (!loop.last);
  
  
• вычисляем остаток от деления на количество колонок, в нашем случае — две (loop.index % 2 == 0).

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

Как мы добавили работу с динамическими карточками в Altcraft

В 2024 году редактор писем Pixcraft был интегрирован в маркетинговую платформу Altcraft. Она объединяет информацию о клиентах и каналы взаимодействия, позволяя автоматизировать коммуникации через сегментацию, персонализацию, многоступенчатые сценарии и синхронизацию с различными источниками данных.

Специально для удобной работы с каталогом был добавлен особый примитив «Товары». Это готовый инструмент для сборки динамических товарных сеток внутри письма.

Данные поступают из «Маркета» — модуля для работы с продуктами. Ассортимент загружается через YML-файлы в обычном виде или в архиве (.zip, .tar.gz) вручную либо автоматически по расписанию. Помимо этого в «Маркете» предусмотрена возможность создавать позиции самостоятельно.

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

Настройки примитива «Товары»

Свойства «Товаров» включают вкладки «Дизайн» и «Данные».

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

Чтобы добавить новый элемент в шаблон карточки, достаточно выбрать его из списка и перетащить в нужное место. Доступны специальные заготовки:

• название товара;
  
  
• изображение;
  
  
• цена;
  
  
• старая цена;
  
  
• кнопка со ссылкой.

Также можно добавлять и обычные элементы из раздела «Примитивы».

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

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

Карточки товаров работают с двумя сущностями: «Маркет. Продукты» и «Маркет. SKU». Это значит, что в зависимости от задачи можно задействовать либо сами товары, либо их необходимые вариации.

При способе выборки по фильтрам отображение товаров настраивается по таким параметрам, как:

• производители;
  
  
• категории;
  
  
• диапазон цен;
  
  
• товары только с изображениями;
  
  
• товары только с доставкой;
  
  
• товары, где задана старая цена;
  
  
• отображение только товаров в наличии.

Фильтрация возможна в том числе по пользовательским полям. Их можно добавлять и к продуктам, и к SKU.

Помимо этого доступна выборка по ID товаров. С её помощью можно выбрать и отобразить определённые позиции из каталога.

Предпросмотр в реальном времени

Товарная сетка отображается именно так, как она будет выглядеть в письме с учётом текущих фильтров и настроек. При изменениях параметров фильтрации, источника данных, способа выборки или внешнего вида набор карточек тут же перестраивается. Например, меняется структура или подставляются новые данные.

Это даёт два преимущества:

• можно моментально оценить итоговый вид карточек в письме;
  
  
• снижается риск пропустить ошибку: если фильтр слишком строгий или данных недостаточно, проблема проявляется сразу.

Превращение динамических карточек в статические

Для того, чтобы зафиксировать результат динамической подборки и превратить её в статический набор карточек, достаточно одного нажатия кнопки. В редакторе Pixcraft для этого используется функция «Преобразовать в статичные карточки», которая:

• убирает динамическую логику и источник данных, фактически отвязывая карточки от «Маркета»;
  
  
• сохраняет текущие данные каждой карточки и преобразует сетку в набор независимых элементов, которые можно отредактировать вручную.

Внешний вид товарной сетки при этом сохраняется: отступы, цвета, кнопки и расположение элементов остаются такими же, как и в исходной динамической версии.

Благодаря этой функции примитив «Товары» можно использовать в качестве инструмента быстрого заполнения подборок, без ручной вставки изображений, ссылок и цен. Достаточно лишь:

• отобрать товары по фильтрам;
  
  
• проверить, что подборка выглядит корректно;
  
  
• преобразовать её в статику;
  
  
• при необходимости отредактировать отдельные карточки.

Как подключить визуальный редактор писем Pixcraft к вашему бизнесу

Если вы хотите использовать функционал Pixcraft в собственной бизнес-структуре, выберите формат, который подходит вашей организации: встраивание редактора (white label) или локальное развёртывание (on-premise).

Встраивание редактора писем в продукт

Pixcraft можно интегрировать в различные сервисы, включая CRM-системы и другие корпоративные инструменты. Редактор становится частью вашего интерфейса и не содержит визуальных маркировок Pixcraft.

Вы получаете:

• блочный редактор писем с гибкими настройками;
  
  
• кастомизируемый внешний вид интерфейса;
  
  
• поддержку AMP и возможность разработки специальных AMP-блоков под ваши требования;
  
  
• библиотеку готовых блоков для быстрой и удобной сборки писем.

Чтобы узнать больше о размещении редактора в вашей платформе, свяжитесь с командой Pixcraft.

Локальная установка в контуре клиента (on-premise)

Pixcraft также доступен в формате полной локальной установки. Продукт может быть развернут в вашем контуре, за счёт чего все данные остаются внутри инфраструктуры и не передаются сторонним сервисам. Такой вариант подходит для банков, телеком-компаний, госсектора, крупных розничных сетей и других организаций с повышенными требованиями к безопасности.

В рамках on-premise-варианта доступны в том числе:

• создание и редактирование писем, включая динамические карточки и интерактивные AMP-компоненты;
  
  
• сбор и хранение статистики, а также ответы пользователей в AMP-формах;
  
  
• AI-генерация текстов, изображений и целых писем;
  
  
• работа с готовыми блоками и шаблонами.

Напишите нам, и мы проконсультируем вас по всем вопросам локальной установки редактора Pixcraft.

Заключение

Динамические товарные карточки в Pixcraft делают работу с подборками удобнее и проще. Гибкие настройки обеспечивают максимально предсказуемый процесс: данные, структура и визуальная часть находятся под вашим контролем, а результат остаётся стабильным, аккуратным и точным.

Подключите Pixcraft к вашему бизнесу и получите в своё распоряжение полноценный редактор писем для задач самых разных масштабов, от единичной акции до регулярных кампаний. А если вы хотите прокачать навыки в email-маркетинге, загляните в наш Telegram-канал. Там мы делимся полезными материалами, лайфхаками и идеями для работы.