Instructions for script integration of the recommendations module

Displaying recommendations on the site

To display recommendations in the necessary block on the site page you need to place a container called id = enrecom - container. This is where recommendations will be placed.

Example:

<!DOCTYPE html>
<html>
    <body>
    <div id="enrecom-container">here our recommendations will be placed</div>
    </body>
</html>

Request for Recommendations:

<script type="text/javascript">
    ekEvents.push('getRecomList', { productIds: ['id of the product for which recommendations are needed'], scriptId: 'recommendation block id', sessionId: 'user session', limit: 'number of recommendations', account: 'system account name'}); 
</script>

Name	Type	Description	Mandatory
productIds	Array of strings	ID of the product(s) for which recommendations are needed	Mandatory for product-oriented algorithms
scriptId	String	ID of recommendation block (in the interface)	Mandatory
sessionId	String	User session ID	Mandatory
limit	String	Number of products in the recommendation block	Optional
account	String	System name of the account (ask your account-manager)	Mandatory

More information about the sessionId parameter

sessionId can be obtained using an API method or using a script (the session must be read from the localstorage parameter enPop_sessionId.data and passed in this parameter).

Recommendations are generated for a contact's sessionId and are issued only if the contact (with this session) exists in the enKod database

More about the productIds parameter

Whether the parameter is mandatory depends on the algorithm used in the recommendation block. For product-oriented algorithms, passing Id is mandatory; for others, you can not pass the productIds parameter at all or pass it empty.

Algorithms that require passing the Product Id:

Similar with similar text
Similar similar to the image
Related products
Popular products in a category

More about limit parameter

You can pass the limit parameter if you need to display fewer recommended products in a specific location than was set up in the block in the interface. If you pass a value greater than the set value in the parameter, then we will not generate recommendations that exceed the limit in the block settings.

Example of displaying a block with a product on the site:

Example of layout for a block with a product

After configuring the receiving of recommendations, you need to implement the output of goods on the site. To do this, you need to layout the product block in accordance with your design and site logic. Below is an example of block layout, which you can use as a basis. The example contains all the basic and mandatory attributes for correct work of recommendations.

Important! A mandatory element of the product block layout is data-id="{{id}}". This attribute must be specified for the element whose clicks you want to track. If an element that has this attribute added has child elements, then clicks on those elements will also be tracked. For example, you can track clicks only on the product image or the add to basket button, or you can track clicks on the entire block.

Here is an example of layout in which clicks will be tracked for all elements of the block:

<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}} USD</div>
            <div class="buy_link"></div>
        </div>
    </div>
</div>

An example of a layout in which clicks will be tracked for a block with a buy button:

<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}} USD</div>
            <div class="buy_link"></div>
        </div>
    </div>
</div>

Example product parameters:

id - id of the product;
url - url link to the product;
picture - url link to the image;
name - product name;
price - price of the product.

Example of displaying a container with blocks of products on the site:

Table of Contents