Инструкция для скриптовой интеграции модуля рекомендаций
Вывод рекомендаций на сайт
Для вывода рекомендаций в нужном блоке на странице сайта нужно разместить контейнер с названием id = enrecom – container. Именно здесь будут размещаться рекомендации.
Пример:
<!DOCTYPE html>
<html>
<body>
<div id="enrecom-container">здесь будут наши рекомендации</div>
</body>
</html>
Запрос на выдачу рекомендаций:
<script type="text/javascript">
ekEvents.push('getRecomList', { productIds: ['id товара, для которого нужны рекомендации'], scriptId: 'id блока рекомендаций', sessionId: 'сессия пользователя', limit: 'количество рекомендаций', account: 'системное имя аккаунта'});
</script>
| Имя | Тип | Описание | Обязательность |
|---|---|---|---|
| productIds | Array of strings | Артикул товара(-ов), для которого нужны рекомендации | Обязательно для товароориентированных алгоритмов |
| scriptId | String | ID блока рекомендаций (в интерфейсе) | Обязательно |
| sessionId | String | ID сессии пользователя | Обязательно |
| limit | String | Кол-во товаров в блоке рекомендаций | Необязательно |
| account | String | Системное имя аккаунта (запросите у аккаунт-менеджера) | Обязательно |
Подробнее о параметре sessionId
sessionId можно получить с помощью API-метода или с помощью скрипта (сессию необходимо считать с localstorage параметр enPop_sessionId.data и передать в этом параметре).
Рекомендации формируются для сессии контакта и выдаются только в том случае, если контакт (с этой сессией) есть в базе enKod
Подробнее о параметре productIds
Обязательность параметра зависит от алгоритма, который используется в блоке рекомендаций. Для товароориентированных алгоритмов передача Id обязательна, для остальных - можно не передавать параметр productIds совсем или передавать пустым.
Для каких алгоритмов требуется передавать Id товара:
- Похожие товары по тексту
- Похожие товары по изображению
- Сопутствующие товары
- Популярные товары в категории
Подробнее о параметре limit
Вы можете передать параметр limit, если вам требуется в конкретном месте вывести меньше рекомендованных товаров, чем было настроено в блоке в интерфейсе. Если передать в параметре значение больше установленного, то мы не сформируем рекомендации, превышающие лимит в настройках блока.
Пример отображения блока с товаром на сайте:
Пример вёрстки для блока с товаром
После настройки получения рекомендаций вам необходимо реализовать вывод товаров на сайт. Для этого нужно сверстать блок товаров в соответствии с вашим дизайном и логикой сайта. Ниже приведен пример верстки блока, который вы можете использовать, как основу. В примере прописаны все основные и обязательные атрибуты для корректной работы рекомендаций.
Важно! Обязательным элементом верстки блока товара является data-id="{{id}}". Этот атрибут необходимо прописать для того элемента, клики по которому требуется отслеживать. Если у элемента, для которого добавлен этот атрибут, есть дочерние элементы, то клики по ним также будут отслеживаться. Например, можно отслеживать клики только по изображению товара или кнопке добавления в корзину, а можно клики по всему блоку целиком.
Пример верстки, в котором клики будут отслеживаться для всех элементов блока:
<div class="item" data-id="{{id}}">
<div class="bx_catalog_item_container last-child">
<a data-url="{{url}}" class="text_blocked" href="{{url}}">
<div class="image bgc-gray-product">
<img class="activeImg" src="{{picture}}">
<img class="hover" src="{{picture}}">
</div>
<div class="text">{{name}}</div>
<div class="prod_link last-child"></div>
</a>
<div class="price-holder last-child">
<div class="price">{{price}} руб.</div>
<div class="buy_link"></div>
</div>
</div>
</div>
Пример верстки, в котором клики будут отслеживаться для блока с кнопкой покупки:
<div class="item">
<div class="bx_catalog_item_container last-child">
<a data-url="{{url}}" class="text_blocked" href="{{url}}">
<div class="image bgc-gray-product">
<img class="activeImg" src="{{picture}}">
<img class="hover" src="{{picture}}">
</div>
<div class="text">{{name}}</div>
<div class="prod_link last-child"></div>
</a>
<div class="price-holder last-child" data-id="{{id}}">
<div class="price">{{price}} руб.</div>
<div class="buy_link"></div>
</div>
</div>
</div>
Параметры товара в примере:
- id – id товара;
- url – url-ссылка на товар;
- picture – url-ссылка на изображение;
- name – наименование товара;
- price – стоимость товара.
Пример отображения контейнера с блоками товаров на сайте:
