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

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

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

📘

Важливо

Якщо сайт використовує OG (Open Graph) теги, які надають структуровані дані про вміст веб-сторінки, це дозволяє eSputnik автоматично підставляти інформацію про товари в лист.

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

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

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

При цьому способі потрібно лише скопіювати 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".
4. Застосуйте зміни.

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

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

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

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

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

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

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

📘

Примітка

В прикладі розглянуто базовий спосіб перевірки елементів веб-сторінці за допомогою DevTools в Google Chrome для Windows. Якщо ви користуєтеся іншими браузерами та операційними системами, зверніться до документації щодо використання DevTools та перевірки елементів.

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

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

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

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

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

📘

Примітка

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

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

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