Настройка 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 + C или кнопку с курсором в левом верхнем углу на панели DevTools для выбора опции “Проверить элемент”.
Выберите элемент на странице, нажав левую кнопку мыши. В нашем случае это “В наличии”.
В редакторе кода кликните правую клавишу мыши и из выпадающего меню выберите “Копировать selector”.
В smart-контейнере перейдите к секции “Правила соответствия” и выберите вкладку “Откуда брать”.
Для переменной p_exists вставьте скопированный селектор в поле “CSS селектор”. Поле “Атрибут” оставьте пустым.
К контейнеру подтянется информация со страницы товара о его наличии.
Примечание
Обычно веб-сайты используют стандартные названия CSS селекторов, поэтому настройка smart-контейнеров должна быть применена к большинству веб-страниц, наследующих стандарты CSS. Некоторые веб-страницы имеют индивидуальные названия селекторов и атрибуты, требующие расширенных настроек или создания новых smart-контейнеров.
Шаги по настройке нового контейнера будут похожи на шаги, указанные в разделе “Добавление параметров в существующие карточки”. Только добавление переменных и правил соответствия нужно задавать каждому элементу.
Если у вас возникнут вопросы по настройке smart-контейнеров, свяжитесь с нами по адресу support@esputnik.com.