Logo

Использование smart-элементов eSputnik

Александр Зеленский

Support Manager Stripo

Используя смарт-элементы – внешние и внутренние селекторы – создадим примеры смарт-контейнеров. Обсудим работу smart-контейнеров на примере двух популярных сайтов: Walmart и Amazon.

Smart-контейнеры – это элементы, которые позволяют вам перейти по ссылке на какой-либо сайт и получить с него различные данные. Обычно они используются для создания однотипных элементов. Если вы хотите создать карточку товара с картинкой, ценой, описанием и еще какими-то данными, вы можете их использовать – после этого вам нужно будет просто подставлять новые ссылки в этот контейнер, и когда все настроено, он будет автоматически подтягивать данные с этого сайта. Обратите внимание, что smart-контейнеры не всегда могут подтянуть все возможные данные со всех возможных сайтов: некоторые сайты грузят данные динамически, и, к сожалению, smart-контейнеры не могут подтянуть данные с них.

Чтобы создать письмо и перейти к созданию smart-контейнера, вам нужно перейти в меню «Сообщения» и создать в нем новое письмо. Затем переходим к созданию контейнера: кликаем на функционал «Данные» и выбираем «Smart». Создадим несколько элементов. Я предлагаю получать картинку, название товара, цену, описание и ссылку, которая будет вести на сайт, – это наиболее частые случаи использования smart-контейнеров.

Как работают smart-контейнеры

Они используют внутренние и внешние CSS-селекторы. Вы можете видеть кнопки «Куда применить» – это внутренний селектор, и «Откуда взять» – внешний селектор, по которому будет идти smart-контейнер – он будет находить нужные данные и, используя внутренний селектор «Куда применить», добавлять эти данные в ваше письмо. Я создал базу для нашего контейнера. Нам потребуется использовать редактор кода для того, чтобы создать внутренние селекторы «Куда применить». Я предлагаю использовать классы: они простые, мы можем дать им имена. Когда мы создали внутренние селекторы, их необходимо настроить в меню «Настройки smart-элемента», в нашем случае контейнера. Также вы можете создавать smart-структуру и smart-полосы, но наиболее частый случай использования – smart-контейнеры, потому что карточки товаров обычно верстаются в smart-контейнерах.

Внутренние селекторы

Создаем нужные поля. У нас уже есть ссылка – нам нужно создать название, цену, описание. Для данного элемента используется только внутренний селектор, потому что внешний – это и есть сама ссылка, которую нужно будет добавить. Чтобы ссылка подтягивалась как ссылка, а не как текст, мы можем задать этот элемент как ссылку: у него появится атрибут href, и в этот атрибут мы сможем подтягивать нужную нам ссылку. Аналогично нужно настроить название товара, только здесь использовать атрибут уже не нужно: мы будем подтягивать его прямо в тег в сам текст. То же самое с ценой и описанием. Для картинки нам надо использовать не просто класс, но и атрибут, потому что нам нужно получить ссылку на картинку.

Внешние селекторы

Переходим на сайт Walmart. Здесь мы можем выбрать любую категорию товара, например, игрушки. Выбираем любую игрушку и пробуем получить нужные данные с этого сайта. Для того чтобы использовать нужные селекторы, я буду использовать панель инструментов разработчика. Она открывается нажатием на кнопку F12 на клавиатуре. Я собираюсь использовать селектор элементов, для того чтобы увидеть теги и атрибуты различных элементов. Мы видим, что картинка имеет различные классы. В идеале нужно использовать id: он уникальный для страницы, обычно он не повторяется больше в коде – попробуем использовать его. Для того, чтобы использовать id, нам нужен символ решетки. Для того, чтобы использовать класс, нужно ставить точку в начале названия и атрибут src. Также попробуем получить цену: для нее есть id и множество вложенных тегов. Получаем название и описание таким же способом. Желательно, чтобы эти данные повторялись на другой странице, чтобы мы убедились, как это работает.

Использовать редактор eSputnik для создания рассылок

Как получить данные

Нам нужна ссылка, по которой мы перешли на данный сайт. Вставляем ее в соответствующий раздел smart-контейнера и получаем картинку, описание доставки, название, ссылку, только не очень корректно отобразились цены. Посмотрим, что можно сделать с ценой, чтобы нам не пришлось редактировать ее после того, как она будет вытянута. Нужно кликнуть правой кнопкой мыши по элементу, выбрать «Copy» – «Copy selector» – он автоматически копирует селектор к данному элементу, и можно попробовать его скопировать и вставить в нужное поле. Этот способ нам помог наконец решить проблему с выводом цены: он сам нашел нужный селектор – это работает.

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

Попробуем поработать с другим сайтом, в этот раз возьмем Amazon. Выберем какой-нибудь товар, например, подушку, и попробуем настроить его. Для этого мы можем создать копию этой структуры, и поскольку у нас уже настроены внутренние селекторы «Куда применить», нам нужно только изменить внешние селекторы «Откуда взять». Итак, у нас есть картинка. Насколько я знаю, Amazon использует id для картинок, что очень хорошо: главные картинки не дублируются, их легко можно использовать для того, чтобы получить данные.

Мы используем id, поэтому используем знак решетки. Смотрим название товара. Используется id для названия. Для цены также используем id, просто добавив в строку без атрибута. По этому же принципу добавляем описание. Это не сработало, потому что Amazon грузит данные динамически. В данном случае должен помочь пункт «Динамический сайт», активировать который можно с помощью соответствующего контроллера. Не забываем поменять ссылку на сайт. Мы получили все необходимые данные: подушку, ее название, цену и описание.

Теперь попробуем точно таким же образом проверить какой-нибудь другой элемент, например, рюкзак. Будет ли этот товар подтягиваться? Да, название, цена, картинка, описание – все работает корректно.

При помощи настроек редактора кода вы можете отредактировать эти элементы. Например, вы бы хотели, чтобы цена задавалась красным цветом или название товара выделялось жирным шрифтом. Мы можем заключить теги с названием товара в различные другие теги для визуальной корректировки – данные будут подтягиваться, оформленные соответствующим образом. Точно так же можно настроить любые цвета, размеры шрифтов и т. д. Они будут уже отредактированными втягиваться в ваше письмо.

Special Request Inline