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

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

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

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

Автоматична підстановка даних з сайту

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

1. Перейдіть до розділу “Повідомлення” → “Повідомлення” → “Email”. Відкрийте email або створіть новий.

2. Перейдіть до вкладки “Модулі” → “Загальні”. Виберіть категорію “Картки товарів” та додайте готовий модуль.

Для прикладу візьмемо модуль з картками, що містять:

• Зображення товару,

• Назву,

• Ціну,

• Кнопку.

3. Перетягніть картку до листа.

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

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

2. Натисніть “Smart-Контейнер”  → “Дані” → “Smart” у меню зліва та вставте скопійовану адресу в поле “Посилання”.

3. Система підставить дані:

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

5. Вставте скопійовані адреси для кожного товару у відповідний контейнер у листі.

6. Збережіть налаштовану структуру до бібліотеки модулів для використання в інших листах.

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

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

При використанні цього методу ви можете додавати різні параметри товару, такі як колір, артикул, країна походження, величина знижки, строки дії акції тощо. Це особливо корисно, якщо у вас різноманітний асортимент товарів із різними характеристиками.

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

• Додати в лист блоки та вказати для них змінні та правила відповідності,

• Підставити CSS селектор елементу.

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

Редагування HTML коду

1. Додайте до контейнера блок “Текст” із текстом  “Наявність”. 

2. Натисніть “Smart-контейнер” у верхній частині контейнера.

3.  Відкрийте код цього блоку натиснувши відповідну іконку на панелі редактора.

4. Додайте атрибут class до поля “Наявність”: class="Exists".

Додавання змінних та правил відповідності

1. Виберіть в налаштуваннях контейнера вкладку “Дані” → “Smart” → “Конфігурація”.

2. Натисніть “+” → “Змінна var”.

3. Додайте змінну p_exists та вкажіть її назву  “Exists”.

4. Перейдіть до секції  “Правила відповідності”, виберіть вкладку “Куди примінити”  і для змінної p_exists вкажіть селектор — “.Exists”. Поле “Атрибут” залиште порожнім.

5. Перейдіть на вкладку “Зовнішній вигляд”. Якщо все зроблено вірно, то має з'явитись поле “Exists”.

Підстановка CSS селектора

1. Перейдіть на сторінку товару у вашому браузері.

2. Перевірте елемент сторінки: натисніть на клавіатурі “Ctrl+Shift+ I” або F12 та відкрийте DevTools. 

3. Натисніть Ctrl+Shift+ С або кнопку з курсором у лівому верхньому куті на панелі DevTools для вибору опції “Перевірити елемент”.

4.  Виберіть елемент на сторінці натиснувши ліву кнопку миші.  В нашому випадку це “В наявності”.

5. В редакторі коду клікніть праву клавішу миші, та з випадного меню виберіть “Копіювати selector”.

6. У smart-контейнері перейдіть до секції  “Правила відповідності”, та виберіть вкладку “Звідки брати”.

7. Для змінної p_exists вставте скопійований селектор у поле “CSS селектор”. Поле “Атрибут” залиште порожнім.

До контейнера підтягнеться інформація зі сторінки товару щодо його наявності.

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

Якщо у вас виникнуть питання з налаштування smart-контейнерів зв'яжіться з нами за адресою support@esputnik.com.