К черту рутину! Генератор карточек товаров в eSputnik

Одна из главных фич eSputnik — экономия времени на подготовке и отправке рассылок. А одна из возможностей, решающая эту задачу — генератор карточек товаров. Он помогает быстро верстать стандартные товарные блоки в письмах: вы вставляете ссылки на страницы с нужными карточками товаров на сайте — и получаете готовые блоки для письма с изображениями, названиями, ценами и ссылками (кнопками).

Ой, да, это последняя статья из серии инструкций eSputnik.

В сообщении, куда вы планируете добавлять товарные блоки, нажмите на “Добавить новый блок” (пока это доступно только в старом редакторе).

В каталоге шаблонов блоков выберите “Генератор карточек товаров”.

В новой вкладке откроется редактор.

Как это работает: Сначала вам нужно выбрать шаблон карточек товаров. Блок может состоять из двух или трех товаров. Во вкладке html можно отредактировать выбранный шаблон, задать нужные цвета ссылок, размер и шрифт текстов и т.д.

В поля слева вставьте ссылки на товары на своем сайте и нажмите на кнопку “Получить значения”.

После в поле “Результат” вы увидите готовые блоки с товарами, которые можно использовать в письме. Вам останется только нажать на кнопку “Скопировать HTML”, вернуться в письмо, выбрать любой блок и вставить в него сохраненный в буфере обмена код, используя HTML-редактор.

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

Для этого нажимаем на значок шестеренки под полями для ссылок. После вы увидите окно такого вида.

Здесь мы заполняем правила получения названия товара (name), изображения товара (imgurl), цены (price). Чтобы пропустить этот этап, вы можете нажать на кнопку “Заполнить для моего сайта” — и представители технической поддержки eSputnik.com сделают все сами.

Если хотите продолжить разбираться, как это работает, поехали дальше. Понадобятся базовые знания об html и css.

Начнем с вкладки name — название товара. Введите url страницы, которую хотите использовать в качестве тестовой, в самое первое поле. Затем откройте эту страницу и определите в каком теге хранится название товара. Чаще всего это тег <h1>.

Запишите название этого тега в CSS Селектор. Нажмите кнопку “Тест”, чтобы проверить, все ли верно. Там должно появится название товара.

Теперь зададим правила получения цены товара. Смотрим, в каком теге находится эта информация на сайте. К примеру, цена находится в теге <b>, у которого class=“price”.

Так и запишем в CSS Селектор: b[class=price].

Такая форма записи является универсальной, но вообще, если используется атрибут class, будет верной запись b.price.

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

Для этого в поле “Регулярное выражение” нужно указать, какие именно значения и на что нужно заменить.

Переходим к изображениям. По тому же примеру записываем тег с классом, где находится изображение. Используйте атрибут SRC для CSS Селектора картинки.

Когда все правила прописаны и протестированы, нажимайте “Готово”.

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

Для этого откройте html и укажите свою переменную в нужном месте. Переменные должны начинаться с символа $, содержать название латинскими буквами без пробелов и индекс. Пример — $oldPrice1.

Сохраните новую переменную в html-шаблоне — и она появится в виде одного из динамических полей для описания товаров.

Останется только прописать Правила получения значений для этой переменной в настройках.

Кстати, настраивать правила и кастомизировать шаблон карточек товаров вам понадобится всего один раз. Дальше — только вставляйте ссылки на страницы сайта и получайте готовые блоки для письма моментально. Удобно, не правда ли?

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

Статья предоставлена коллегами из сервиса рассылок eSputnik.
Все инструкции по еСпутник.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Дополните выражение: