Налаштування smart-контейнерів

Smart-контейнер — це елемент шаблону, що складається з базових блоків (зображення, текст, кнопка), контент яких автоматично підставляється зі сторінки товару на сайті.

Використовуйте smart-контейнери, якщо потрібно швидко додати до листа картки товарів без ручного заповнення кожного елемента.

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

У цій інструкції розглянемо, як перевірити, чи працює автозаповнення карток контенту і як внести вручну налаштування за необхідності.

Автозаповнення даних з сайту

При цьому способі потрібно лише скопіювати URL-адресу товару та вставити посилання в контейнер.

Додавання smart-контейнера до листа

1. Перейдіть до розділу Повідомлення → Повідомлення → Email.

2. Створіть новий лист або відкрийте існуючий.

3. Відкрийте панель Структури і Модулі.

4. Перейдіть на вкладку Мої модулі або Загальні модулі
5. Виберіть категорію Картки товарів.

Для прикладу налаштуємо контейнери, що містять:

• Зображення товару,
• Назву,
• Ціну,
• Кнопку.

6. Перетягніть модуль у лист.

Підстановка даних з сайту

1. Відкрийте сторінку товару та скопіюйте URL.

2. У налаштуваннях smart-контейнера відкрийте вкладку Дані.
3. Вставте URL у поле Посилання та натисніть Отримати.

Система автоматично підставить доступні дані.

Повторіть дії з пп. 1–3 для кожного контейнера.

Якщо плануєте використовувати модуль в інших розсилках — оновіть його або збережіть як новий.

Додавання додаткових параметрів

Цей спосіб надає більш гнучкий підхід для індивідуального налаштування змісту email, але потребує базових навичок роботи з HTML.

Використовуйте цей метод якщо потрібно додати нестандартні параметри товарів:

• розмір знижки,
• колір,
• артикул,
• країну походження,
• строк дії акції тощо.

Для налаштування додаткових параметрів потрібно виконати такі кроки:

1. Додати блок до контейнера.
2. Створити змінну.
3. Налаштувати правила зіставлення CSS селектора.

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

Додавання блоку

1. Додайте до контейнера блок Текст.

2. Виділіть блок та відкрийте редактор коду.

3. Додайте HTML-атрибут, наприклад class="Discount".

Створення змінних

1. У налаштуваннях контейнера натисніть іконку Конфігурація.
2. Натисніть +.
3. Додайте новий Елемент і з випадного меню оберіть значення. В нашому прикладі це поле для показу додаткової знижки.
4. Вкажіть:

• Ім’я змінної: Discount
• Значення змінної: discount

5. Збережіть конфігурацію.

Після цього в налаштуваннях контейнера з’явиться нове поле Знижка.

Правила зіставлення CSS селектора

1. Відкрийте сторінку товару в браузері.

2. Відкрийте DevTools для перевірки елементу сторінки: натисніть на клавіатурі Ctrl+Shift+ I або F12.
3. Активуйте інструмент вибору елемента: натисніть Ctrl+Shift+ С або кнопку з курсором у лівому верхньому куті на панелі DevTools.

4. Клікніть на потрібний елемент (наприклад, розмір знижки).

5. Скопіюйте CSS selector елемента.

5. У smart-контейнері відкрийте поле Знижка та натисніть правила зіставлення.
6. Вставте selector у поле.
7. Натисніть Перевірте правило та збережіть.

Якщо правило задано правильно, значення підтягнеться зі сторінки товару.

Кроки з налаштування нового контейнера подібні до описаних у розділі Додавання додаткових параметрів. Змінні й правила зіставлення потрібно створити для кожного елемента окремо.

Якщо виникнуть питання щодо налаштування smart-контейнерів, зверніться до служби підтримки за адресою [email protected].