Настройка Smart-элементов

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

Наша палочка-выручалочка - это smart-контейнер, который позволит существенно сэкономить ваше время на создание письма.

Что такое smart-элемент?

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

• внешний вид контейнера, 
• переменные, 
• установить правила, откуда брать значения и куда их подставлять.

Чтобы в дальнейшем просто подставить ссылку на товар, а система подтянула в карточку товара всю информацию.

В этом видео мы расскажем, как настроить смарт-блок.

Пример создания smart-элемента

Возьмем для примера сайт toys.com.ua. Для создания карточки товара нам понадобятся картинка, название товара и цена.
Подготовим карточку товара. Возьмем структуру с тремя контейнерами (количество контейнеров может быть любым, в зависимости от ваших потребностей) 

Желательно сразу наполнять контентом, для удобства, чтобы сразу было видно, куда и что добавлять. Все элементы должны быть расположены в одном контейнере.

Наполним ее согласно дизайна сайта, в такой последовательности:

• Картинка
• Название товара
• Цена
• Кнопка

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

В результате у нас открывается конфигурация, где мы будем настраивать все необходимые ссылки:

Что важно знать - есть 2 типа данных, которые нам нужно настроить. Они прописываются в разделе “Правила соответствия”:

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

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

Начнем настройку Smart-блоков

Для полноценной карточки товара этого мало, поэтому мы добавляем, нажав на плюсик, нужные нам пункты: 

Из выпадающего списка выбираем

• картинку, 
• название, 
• цену.

Картинка

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

По умолчанию используется img:

Для удобства добавим класс:

Затем переходим в настройки картинки, на вкладку “Куда применить” и прописываем селектор:

У каждой картинки также есть атрибут, в данном случае - src, реже встречается html, в зависимости от сайта. Прописываем его:

Затем проверяем результат на вкладке “Внешние данные” - подставилась ссылка на нашу картинку:

Название товара

Начинаем настраивать отображение названия по аналогии. Прописываем вручную возле названия класс, копируя из конфигурации, либо придумывая свое - главное, чтобы он был уникальным.

В нашем примере селектор это a.name, атрибут здесь не нужен, так как это обычное текстовое поле.

В результате название будет отображаться на вкладке “Внешний вид”

Цена

По аналогии с другими полями настраиваем цену. Смотрим в коде html-селектор, в данном примере цена имеет селектор span.price. Получаем результат:

То есть мы добавили селекторы в блок, куда будут подставляться товары с сайта и провели их настройку.  Это настройка только шаблона письма, следующий шаг - сбор данных с сайта.

Настраиваем передачу данных из сайта в письмо

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

Изображение

Находим селектор изображения на сайте. Если вы работаете в Google Chromе, откройте инспектор кода с помощью кнопки F12 и с помощью поиска элемента выбираем:

и переходим к настройке второй части: заполняем раздел “Откуда взять”.
На сайте находим ссылку на изображение товара в редакторе кода и смотрим селектор и атрибут, в нашем случае это src:

Прописываем его на вкладке “Откуда взять”:

Подставляем ссылку на товар: 

Если все настроено корректно, у вас сразу же подтянется изображение.

Чтобы корректно подтягивалось альтернативное название в изображении товара, добавляем селектор h1:

Затем пропишем 2 селектора в разделе “Куда применять”:

Указываем атрибуты alt и title. 

Цена

Определяем на сайте селектор цены, в нашем случае это [itemprop=price]

и прописываем его в самом блоке.

Нажимаем “Получить значение” и сравниваем результат.
Мы можем добавить еще один селектор, чтобы подтягивалась валюта с сайта, или сразу же прописать валюту в коде письма, если она не меняется.

Проверяем полученный результат

Для проверки правильности настроек копируем код и вставляем в соседние 2 контейнера. Чтобы проверить, что они работают, берем ссылки на другие товары и подставляем в контейнер: 

Получаем результат:

Небольшие лайфхаки:

1. Настройте один смарт-блок со всеми данными, которые могут понадобиться. При необходимости можно удалять отдельные контейнеры в блоке.

2. Если вы хотите скопировать структуру в другое письмо, используйте редактор JSON.

Скопируйте весь код из этого раздела и затем вставьте его в другое письмо к нужной структуре.

3. Сохраняйте по-разному оформленные контейнеры в библиотеку и используйте их в любом письме.

4. Из одного оформленного контейнера вы можете сделать любую карточку: три в ряд, четыре в столбик, поэтому не обязательно создавать с нуля полную карточку - просто скопируйте содержимое контейнера в соседнюю ячейку.

5. Можно настраивать для текстовых блоков такие же контейнеры, например, для блоговых статей.