Интеграция через скрипт

Содержание

Интеграция через скрипт
- Клик по товару в блоке рекомендаций
- Клик по товару в блоке рекомендаций 2.0

Интеграция через скрипт

Для вывода рекомендаций в нужном блоке на странице сайта нужно разместить контейнер с названием id = enrecom – container. Именно здесь будут размещаться рекомендации.

Пример:

<!DOCTYPE html>

<html>
    <body>
    <div id="enrecom-container">здесь будут наши рекомендации</div>
    </body>
</html>

Запрос на выдачу рекомендаций:

<script type="text/javascript">
    ekEvents.push('getRecomList', { productIds: 'id товаров, для которых нужны рекомендации', scriptId: 'остаётся пустым', sessionId: 'сессия пользователя', limit: 'количество рекомендаций', account: 'название аккаунта из enKod'}); 
</script>

Имя	Тип	Описание	Обязательность
productIds	[]String	Артикул товара (или несколько товаров), для которого нужны рекомендации	Обязательно
scriptId	String	ID сценария в интерфейсе enRecom	Обязательно
sessionId	String	ID сессии пользователя	Обязательно
account	String	Системное название аккаунт (нужно запросить у Аккаунт-менеджера)	Обязательно

Для получения рекомендаций вам понадобится сверстать два блока html и отправить их нам в отдельных файлах:

блок с продуктом;
блок, в котором будут располагаться блоки с продуктами.

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

Пример отображения блока с продуктом на сайте:

Пример вёрстки для блока с продуктом:

<div class="item">
    <div class="bx_catalog_item_container last-child">
        <a enrecom-item data-id="{{id}}" 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>

Здесь используются следующие параметры продукта:

{{id}} – id товара;
{{url}} – url-ссылка на товар;
{{picture}} – url-ссылка на изображение;
{{name}} – наименование товара;
{{price}} – стоимость товара.

Важно! Обязательным элементом верстки блока продукта является data-id=«{{id}}«. Это значение является константой и не должно быть другим.

Пример отображения контейнера с блоками продуктов на сайте:

Пример верстки контейнера, в котором будет находиться блок с продуктами:

<h2 class="h2 text-center">Рекомендации</h2>
<div class="right-column full-column">
    <div class="catalog-list last-child">
        <div class="special-deal-block catalog-list col3">
            <div class="anti-margin-box catalog-section last-child">{{products}}</div>
        </div>
    </div>
</div>

Важно! Обязательным элементом верстки контейнера является {{products}}. Это значение является константой и не должно быть другим.

Клик по товару в блоке рекомендаций

Зарезервированные названия полей:

productId - id товара (обязательный)
typeRecom - тип рекомендаций (для этого типа всегда: personal) (обязательно)
location - место рекомендаций: main, 404, product_page, lk, basket.

<script type="text/javascript">
    ekEvents.push('clickRecom',{'productId': 'ID товара', 'information':{'typeRecom':'personal', 'location':'месторасположение'}})
</script>

Клик по товару в блоке рекомендаций 2.0

Зарезервированные названия полей:

productId - id товара (обязательный)
customScriptId - ID сценария enRecom (обязательно)
location - место рекомендаций: main, 404, product_page, lk, basket.

<script type="text/javascript">
    ekEvents.push('clickRecom',{'productId': 'ID товара', 'information':{'customScriptId':'id сценария', 'location':'месторасположение'}})
</script>