Что такое Smart-объект и зачем он нужен?

Smart-объект — это структура, контейнер или полоса, в которых присутствуют базовые блоки такие, как "Картинка", "Текст", "Кнопка" и пр., но для них активирована опция получения данных через переменные из внешних источников. Достаточно один раз настроить контент, в котором будут расположены в нужном порядке заголовок товара, картинка, цена, описание и кнопка «Купить», а также их внешний вид. Далее добавить переменные, установить правила, откуда брать значения и куда их применять и всё — smart-объект готов к использованию. Нужно всего лишь указать ссылку на страницу продукта на сайте и система самостоятельно будет подгружать с нее нужные  данные и применит их в указанных местах Вашего письма.

Smart-объект позволяет автоматизировать рутинный процесс добавления множества однотипных блоков и незаменим в работе любого интернет-магазина.

Как создать Smart-объект?

Для примера давайте рассмотрим создание карточки товара, расположенного на сайте https://ru.boohoo.com. Для карточки из этого сайта нам нужны будут картинка продукта, его название и цена.

В редакторе DashaMail создаем структуру, например, из двух контейнеров (добавить можно любое количество контейнеров, на Ваше усмотрение). В первый контейнер добавляем нужные нам блоки ("Картинка", два блока "Текст", "Кнопка"), т.е. делаем “скелет” нашей карточки товара:

Далее выделяем контейнер с базовыми блоками (для этого кликаем по синей вкладке “Контейнер” сверху), выбираем в боковой панели кнопку “Данные” и кликаем на кнопку “Начать” для активации Smart-свойства:

В результате, вместо кнопки отобразится визуальный конструктор, в котором мы можем:

  • настроить правила получения значений и применения их через переменные к нужным блокам внутри письма (вкладка “Конфигурация”);
  • просмотреть и откорректировать вручную (при желании) полученные значения настроенных переменных из сайта (вкладка “Внешний вид”).

Для начала конфигурации добавим переменные. Для удобства пользования, по нажатию на иконку добавления переменной, будет показан список самых популярных, которые чаще всего могут быть у Товаров/Продуктов или у Блоговых записей.

ВНИМАНИЕ! Как только мы активируем smart-свойство любому объекту, по умолчанию создается переменная URL, которую удалить нельзя.

Так как мы запланировали сделать карточку с картинкой, названием и ценой, то добавляем соответствующие переменные из раздела "Продукты". Каждой добавленной переменной создается своя вкладка для конфигурации. Итого их у нас получается четыре, включая URL:

Далее необходимо настроить правила получения значения для этих переменных и их применения в нашем smart-объекте. Для этого переходим к пункту "Правила соответствия", который состоит из двух вкладок:

  • "Куда применить" - тут необходимо задать правила, куда именно нужно применить уже полученные значения переменных в нашем smart-объекте.
  • "Откуда взять" - в нем настраиваются правила, откуда нужно получить значения переменных с нужного нам сайта. Также здесь есть пункты, позволяющие преобразовать полученное значение через регулярные выражения или применяя различные виды форматирования.

Правила для каждой вкладки настраиваются через общепринятый механизм поиска элементов в HTML через CSS-селекторы и Атрибуты, о которых более детально можно прочитать здесь.

Так как этот процесс требует определенных знаний устройства сайтов, давайте рассмотрим его детальнее для каждой переменной из нашего примера.

Переменная URL

У этой переменной есть пункт “Динамический сайт”, который по умолчанию выключен. Если сайт, с которого Вы хотите получить значения для любой из переменных smart-объекта, является динамическим — отметьте этот пункт, поставив чекбокс напротив:

Динамический сайт — сайт, содержимое которого создается на КЛИЕНТСКОЙ стороне javascript-ом, т.е. получив HTML страницы на ней нельзя найти нужные элементы, не выполнив перед этим все положенные скрипты. Например, цена рассчитывается на лету и т.п.

Сайт, с которого мы собираемся получить значения, не является динамическим, поэтому мы пропускаем пункт и переходим сразу к "Правилам соответствия".

Так как нам нужно, чтобы в smart-объекте были ссылки на сайт по клику на кнопку “Купить” и картинку продукта, во вкладке “Куда применить” мы прописываем правило, чтобы значение переменной устанавливалось всем элементам ‘a’ (поле CSS селектор) в атрибут ‘href’ (поле Атрибут):

ВНИМАНИЕ! Для переменной URL не доступна вкладка “Откуда взять”, так как по сути сама ссылка на сайт и является источником получения данных.

Переменная для картинки продукта

Установим для начала правило получения картинки продукта для вкладки “Внешнее правило”. Для этого открываем страницу сайта с продуктом, наводим курсор на картинку, кликаем правой кнопкой мыши для открытия контекстного меню и выбираем пункт “Посмотреть код” (обратите внимание что этот пункт меню может называться иначе на Вашем компьютере, например “Исследовать” или кнопка f12). В результате откроется консоль, в которой мы увидим CSS-селекторы с атрибутами:

В нашем случае, правило для получения картинки получилось следующим:

CSS-селектор: div#product-primary-image.product-primary-image.js-product-primary-image a
Атрибут: href

Устанавливаем их в соответствующие поля вкладки “Откуда взять”. Для вкладки “Куда применить” указываем:

CSS-селектор: .esd-block-image .adapt-img
Атрибут: src

Благодаря этому правилу, полученное значение картинки будет применено для атрибута ‘src’, который расположен в блоке “Картинка”.

Переменные для названия продукта и цены

Принцип действия переменных для названия и цены продукта такой же, как мы уже сделали для картинки. Только есть некоторая хитрость, которой мы хотим с Вами поделиться.

Как Вы помните, мы добавили два блока “Текст” в наш smart-объект. Первый мы будем использовать для названия, а второй — для цены. Причем контент для первого блока будет заполняться только из сайта, а для блока с ценой: часть контента будет браться с сайта, а часть будет неизменной. Например, вот так:

Во втором текстовом блоке выделенное слово “Цена:” будет константой, а текст далее будет заменяться на значение, полученное из сайта.

Чтобы наш smart-объект смог различить эти блоки (какой из текстовых полей мы хотим сделать для названия, а какой для цены), а также понимать куда именно применять полученный контент — нужно каждому из них добавить свой уникальный класс в редакторе кода HTML. В нашем случае, это будут классы esd-p-name и esd-p-price:

Теперь заполняем поочередно для каждой переменной внутренние и внешние правила для контрола "Конфигурация".

В нашем случае,

Для переменной Name

  • куда применить:

CSS-селектор: .esd-block-text.esd-p-name
Атрибут: пусто
CSS-селектор 2: .esd-block-image a img
Атрибут: title
CSS-селектор 3: .esd-block-image a img
Атрибут: alt

  • откуда взять:

CSS-селектор: h1.product-name.is-mobile.js-product-name
Атрибут: пусто

Для переменной Price

  • куда применить:

CSS-селектор: .esd-p-price
Атрибут: пусто

  • откуда взять:

CSS-селектор: span[itemprop=price]
Атрибут: пусто

Все основные и сложные настройки на этом этапе заканчиваются. Теперь нам необходимо только значения по ссылке с внешнего сайта. Для этого просто вставьте ссылку на товар в поле Link и дождитесь несколько секунд для отображения полученных данных:

В итоге мы получаем следующую картину:

Во вкладке "Внешний вид" мы можем настроить более красивое оформление блока и скопировать его для добавления других карточек товара в шаблон:

Напомним, что блок можно сохранить в свою личную библиотеку для того, чтобы в дальнейшем использовать его в рамках других шаблонов :)

Вы нашли ответ?