Налаштування smart-контейнерів
Smart-контейнер — це елемент шаблону, що складається з базових блоків (картинка, текст, кнопка), контент яких автоматично підставляється з сайту.
Зверніть увагу
Якщо ваш сайт використовує OG (Open Graph) теги, які надають структуровані дані про вміст веб-сторінки, це дозволяє eSputnik автоматично підставляти інформацію про товари в лист.
Коли дані з сайту не підтягуються або потрібно показати додаткові параметри товару, до існуючих карток параметри додаються вручну.
У цій інструкції розглянемо, як перевірити, чи працює автозаповнення карток контенту і як внести вручну налаштування за необхідності.
Автоматична підстановка даних з сайту
Суть цього способу у тому, що вам потрібно лише скопіювати URL-адресу товару та вставити посилання в контейнер. Після чого система підставить відповідні дані до листа.
Перейдіть до розділу “Повідомлення” → “Повідомлення” → “Email”. Відкрийте email або створіть новий.
Примітка
Якщо ви використовуєте лист із налаштованим оформленням, стилі оформлення одразу застосуються до усіх доданих об'єктів з бібліотеки модулів.
Перейдіть до вкладки “Модулі” → “Загальні”. Виберіть категорію “Картки товарів” та додайте готовий модуль.
Для прикладу візьмемо модуль з картками, що містять:
Зображення товару,
Назву,
Ціну,
Кнопку.
Перетягніть картку до листа.
Підстановка даних у контейнер
Відкрийте сторінку товару та скопіюйте url адресу.
Натисніть “Smart-Контейнер” → “Дані” → “Smart” у меню зліва та вставте скопійовану адресу в поле “Посилання”.
Система підставить дані:
Підтягнуться всі параметри, за винятком самої назви кнопки, тому змініть її назву та продублюйте модуль далі.
Вставте скопійовані адреси для кожного товару у відповідний контейнер у листі.
Збережіть налаштовану структуру до бібліотеки модулів для використання в інших листах.
Додавання параметрів до існуючих карток
Цей спосіб налаштування smart-контейнерів більш трудомісткий і вимагає певних технічних навичок, однак, це надає більш гнучкий підхід для індивідуального налаштування змісту email.
При використанні цього методу ви можете додавати різні параметри товару, такі як колір, артикул, країна походження, величина знижки, строки дії акції тощо. Це особливо корисно, якщо у вас різноманітний асортимент товарів із різними характеристиками.
Для налаштування потрібно виконати такі кроки:
Додати в лист блоки та вказати для них змінні та правила відповідності,
Підставити CSS селектор елементу.
Розглянемо приклад, коли потрібно додати до готового модуля інформацію про наявність товару.
Редагування HTML коду
Додайте до контейнера блок “Текст” із текстом “Наявність”.
Натисніть “Smart-контейнер” у верхній частині контейнера.
Відкрийте код цього блоку натиснувши відповідну іконку на панелі редактора.
Додайте атрибут class до поля “Наявність”: class="Exists".
Додавання змінних та правил відповідності
Виберіть в налаштуваннях контейнера вкладку “Дані” → “Smart” → “Конфігурація”.
Натисніть “+” → “Змінна var”.
Додайте змінну p_exists та вкажіть її назву “Exists”.
Перейдіть до секції “Правила відповідності”, виберіть вкладку “Куди примінити” і для змінної p_exists вкажіть селектор — “.Exists”. Поле “Атрибут” залиште порожнім.
Увага
Назва CSS селектора елементу чутлива до регістру і має співпадати з назвою атрибута класу, що вказана у коді листа.
Перейдіть на вкладку “Зовнішній вигляд”. Якщо все зроблено вірно, то має з'явитись поле “Exists”.
Підстановка CSS селектора
Перейдіть на сторінку товару у вашому браузері.
Примітка
В прикладі розглянуто базовий спосіб перевірки елементів веб-сторінці за допомогою DevTools в Google Chrome для Windows. Якщо ви користуєтеся іншими браузерами та операційними системами, зверніться до документації щодо використання DevTools та перевірки елементів.
Перевірте елемент сторінки: натисніть на клавіатурі “Ctrl+Shift+ I” або F12 та відкрийте DevTools.
Натисніть Ctrl+Shift+ С або кнопку з курсором у лівому верхньому куті на панелі DevTools для вибору опції “Перевірити елемент”.
Виберіть елемент на сторінці натиснувши ліву кнопку миші. В нашому випадку це “В наявності”.
В редакторі коду клікніть праву клавішу миші, та з випадного меню виберіть “Копіювати selector”.
У smart-контейнері перейдіть до секції “Правила відповідності”, та виберіть вкладку “Звідки брати”.
Для змінної p_exists вставте скопійований селектор у поле “CSS селектор”. Поле “Атрибут” залиште порожнім.
До контейнера підтягнеться інформація зі сторінки товару щодо його наявності.
Примітка
Зазвичай, веб-сайти використовують стандартні назви селекторів CSS, тому налаштування smart-контейнерів має бути застосовано до більшості веб-сторінок, що наслідують стандарти CSS. Деякі веб-сторінки мають індивідуальні назви селекторів та атрибути, що потребують розширених налаштувань або створення нових smart-контейнерів.
Кроки з налаштування нового контейнера будуть схожими до кроків зазначених у розділі “Додавання параметрів до існуючих карток”. Тільки додавання змінних та правил відповідності треба задавати для кожного елементу.
Якщо у вас виникнуть питання з налаштування smart-контейнерів зв'яжіться з нами за адресою support@esputnik.com.