Roster Product Recommendation¶
roster_product_recommendation module is used to display tile slider with recommended products.
Configuration parameters¶
title¶
string Title of the module. If not specified title won't be displayed.
description¶
string Description of the module. If not specified description won't be displayed.
displayDescription¶
int if set to 1 module description will be displayed.
numberOfProductsToShow¶
int Number which define how many product tiles should be displayed in slider. Maximum value is 16.
phoneProductsCountPerRow¶
int An indicator of how many products should fit in one row of the grid on phone resolution.
tabletProductsCountPerRow¶
int An indicator of how many products should fit in one row of the grid on tablet resolution.
laptopProductsCountPerRow¶
int An indicator of how many products should fit in one row of the grid on laptop resolution.
desktopProductsCountPerRow¶
int An indicator of how many products should fit in one row of the grid on desktop resolution.
hasArrowsOnMobile¶
int if set to 1 navigation arrows will be displayed on mobile view.
hasFavouriteIcon¶
int if set to 1 the favourite icon will be displayed
hasSkuCode¶
int if set to 1 a sku code will be displayed
hasProducerCode¶
int if set to 1 a producer code will be displayed
hasProducerName¶
int if set to 1 a producer name will be displayed
hasRegularPriceWhilePromotionActive¶
int if set to 1 the regular price will be displayed on products undergoing a promotion
hasPercentageDiscountValue¶
int if set to 1 a percentage value of the discount will be displayed on products undergoing promotion
hasTaxInfo¶
int if set to 1 tax info will be displayed
hasUnitPrice¶
int if set to 1 the unit price will be displayed
hasPriceWithoutDeliveryInfo¶
int if set to 1 the information about unaccounted shipping costs will be displayed
hasAddToBasketButton¶
int if set to 1 add to basket button will be displayed
hasAvailabilityStatus¶
int if set to 1 the availability status will be displayed
shouldShortenLongProductName¶
int if set to 1 a long product name will be trimmed to take no more than two lines
recommendationsBasedOnTrends¶
int if set to 1 recommendations will be created based only on trends in the last weeks
numberOfWeeks¶
int the number of weeks on the basis of which recommendations will be made
algorithm¶
string product selection algorithm, possible values are:
selfLearning- Machine learning system that analyzes customer navigation patterns, product relationships, and other factors. By predicting user behavior, it recommends products tailored to individual customer needsmostViewed- On pages without browsing options (e.g., Home), displays the most viewed products from recent weeks. On pages with product lists (e.g., categories) or search results, it shows the most viewed items but applies the customer's filters.bestsellers- On pages without browsing optionss (e.g., Home), displays the most purchased products from recent weeks. On pages with product lists (e.g., categories) or search results, it shows the most frequently purchased items, filtered according to the customer's selections.otherCustomers- On a product page suggests products commonly ordered with the displayed item over recent weeks. On the cart page, it recommends items frequently purchased alongside any products currently in the cart.
recommendations¶
Module source code¶
{% from "@macros/slider.twig" import slider %}
{% from "@macros/product_tile.twig" import product_tile %}
{% if moduleInstance > 0 and moduleConfig.recommendations > 0 %}
{% set recommendationProducts = ObjectApi.getProductRecommendations(moduleConfig.recommendations, moduleInstance) %}
{% set moduleInstanceId = 'roster-product-recommendations-' ~ moduleInstance %}
{% set maxProductsToShow = 16 %}
{% set productsPerPageDesktop = moduleConfig.desktopProductsCountPerRow|default(4) %}
{% set productsPerPageLaptop = moduleConfig.laptopProductsCountPerRow|default(3) %}
{% set productsPerPageTablet = moduleConfig.tabletProductsCountPerRow|default(3) %}
{% set productsPerPageMobile = moduleConfig.phoneProductsCountPerRow|default(1) %}
{% set productsToShow = moduleConfig.numberOfProductsToShow > maxProductsToShow ? maxProductsToShow : moduleConfig.numberOfProductsToShow %}
{{ recommendationProducts.setItemCountPerPage(productsToShow) }}
{% set productsVisible = productsToShow > recommendationProducts.count ? recommendationProducts.count : productsToShow %}
{% set sliderSettings = {
"perPage": productsPerPageDesktop,
"arrows": productsVisible > productsPerPageDesktop,
"pagination": true,
"hasArrowsOnMobile": moduleConfig.hasArrowsOnMobile == '1',
"breakpoints": {
1440: {
"perPage": productsPerPageLaptop,
"arrows": productsVisible > productsPerPageLaptop
},
1000: {
"perPage": productsPerPageTablet,
"arrows": productsVisible > productsPerPageTablet
},
576: {
"perPage": productsPerPageMobile
}
}
} %}
{% set productTileSettings = {
"hasFavouriteIcon": moduleConfig.hasFavouriteIcon == '1',
"hasSkuCode": moduleConfig.hasSkuCode == '1',
"hasProducerCode": moduleConfig.hasProducerCode == '1',
"hasProducerName": moduleConfig.hasProducerName == '1',
"hasRegularPriceWhilePromotionActive": moduleConfig.hasRegularPriceWhilePromotionActive == '1',
"hasPercentageDiscountValue": moduleConfig.hasPercentageDiscountValue == '1',
"hasTaxInfo": moduleConfig.hasTaxInfo == '1',
"hasUnitPrice": moduleConfig.hasUnitPrice == '1',
"hasPriceWithoutDeliveryInfo": moduleConfig.hasPriceWithoutDeliveryInfo == '1',
"hasAddToBasketButton": moduleConfig.hasAddToBasketButton == '1',
"hasAvailabilityStatus": moduleConfig.hasAvailabilityStatus == '1',
"shouldShortenLongProductName": moduleConfig.shouldShortenLongProductName == '1'
} %}
{% set sliderItemsTemplate %}
{% for recommendation in recommendationProducts %}
<li class="splide__slide">
{{ product_tile(recommendation.product, productTileSettings|merge({ instanceId: moduleInstanceId, imageSize: systemConfig.lSize, basketTrackingParams: recommendation.basketTrackingParams }), {
url: recommendation.product.url ~ recommendation.viewTrackingParams
}) }}
</li>
{% endfor %}
{% endset %}
{% if not recommendationProducts|length == 0 %}
<div class="promotions-products">
{% if moduleConfig.title %}
<h2 class="module__header">
{{ moduleConfig.title }}
</h2>
{% endif %}
{% if moduleConfig.description and moduleConfig.displayDescription == '1' %}
<div class="grid__col grid__col_xs-12 grid__col_md-10">
<span class="module__description">{{ moduleConfig.description }}</span>
</div>
{% endif %}
{{ slider(sliderItemsTemplate, {
id: "recommendations-#{moduleInstance}",
sliderConfig: sliderSettings
}) }}
</div>
{% endif %}
{% endif %}
Used macros¶
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type":"recommendations",
"name":"recommendations"
},
{
"type":"infobox",
"name":"infobox",
"options":{
"type":"blank",
"message":"%s Related settings in the admin panel%s- enabling [product recommendations](%s)",
"placeholderValues":[
"####",
"\n",
"\/admin\/configRecommendations"
]
}
},
{
"type": "text",
"name": "title",
"label": "Module title",
"defaultValue": "Recommended for you",
"supportsTranslations": true,
"isRequired": true
},
{
"type": "checkbox",
"name": "displayDescription",
"label": "Display extra description under module title",
"defaultValue": 0,
"children": [
{
"type": "textarea",
"name": "description",
"label": "Description",
"supportsTranslations": 1,
"relations": [
{
"parentName": "displayDescription",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "radio",
"name": "algorithm",
"label": "Product selection algorithm",
"defaultValue": "selfLearning",
"isRequired": true,
"options": {
"radioOptions": [
{
"key": "selfLearning",
"label": "Self-learning system based on machine learning",
"hint": "The machine learning mechanism operates on anonymised data: it analyzes customer navigation paths, relationships between products and many other factors. It anticipates the next steps and suggests products best suited to the needs of individual customers."
},
{
"key": "mostViewed",
"label": "Most viewed",
"hint": "If the module is on a page that does not contain browsing options (eg Home), the algorithm searches for the most viewed products in the last weeks (the number of weeks can be specified below). If the module is included in the list of products (e.g categories) or in the search results, the products most viewed in the last weeks are also returned, but with the filters applied by the customer."
},
{
"key": "bestsellers",
"label": "Bestsellers",
"hint": "If the module is on a page that has no browsing options (eg Home), the algorithm searches for the most purchased products in the last weeks (the number of weeks can be specified below). If the module is included in the list of products (e.g categories) or in the search results, the products most frequently purchased in the last weeks are also returned, but with the filters applied by the customer."
},
{
"key": "otherCustomers",
"label": "Other customers also bought...",
"labelDescription": "For a module with this algorithm to work, it must be placed on the product page or the cart page.",
"hint": "If the module is on the product page, the algorithm searches for products that have been ordered together with the presented product in the last weeks (the number of weeks can be specified below). If the module is on the cart page, the algorithm searches for products that were ordered together with any of the products in the cart - also in the last weeks."
}
]
}
},
{
"type": "checkbox",
"name": "recommendationsBasedOnTrends",
"label": "Create recommendations based only on trends in the last weeks (recommended)",
"defaultValue": 1,
"children": [
{
"type": "number",
"name": "numberOfWeeks",
"label": "The number of weeks on the basis of which recommendations will be made",
"labelDescription": "Min. 1 week, max. 3 weeks",
"hint": "Depending on the trends in your store's industry, you can set different periods for creating recommendations. For industries where trends come and go quickly, we propose a short period (e.g. 1-2 weeks), and for very stable industries, a longer period (3 weeks).",
"isRequired": true,
"defaultValue": 1,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1 } },
{ "type": "lessEqThan", "options": { "max": 3 } }
],
"relations": [
{
"parentName": "recommendationsBasedOnTrends",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHiddenAndOptional", "setDisabled"]
},
{
"value": 1,
"actions": ["setVisibleAndRequired", "setAvailable"]
}
]
}
]
}
]
},
{
"type": "number",
"name": "numberOfProductsToShow",
"label": "Number of products in the module",
"labelDescription": "Max. 16.",
"isRequired": true,
"defaultValue": 16,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1} },
{ "type": "lessEqThan", "options": { "max": 16} }
]
},
{
"type": "header",
"name": "headerMobile",
"label": "Mobile",
"options": {"icon": "phone"},
"children": [
{
"type": "number",
"name": "phoneProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 2.",
"isRequired": true,
"defaultValue": 1,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1} },
{ "type": "lessEqThan", "options": { "max": 2} }
]
}
]
},
{
"type": "header",
"name": "headerTablet",
"label": "Tablet",
"options": {"icon": "tablet"},
"children": [
{
"type": "number",
"name": "tabletProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 4.",
"isRequired": true,
"defaultValue": 3,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1} },
{ "type": "lessEqThan", "options": { "max": 4} }
]
}
]
},
{
"type": "header",
"name": "headerLaptop",
"label": "Laptop",
"options": {"icon": "laptop"},
"children": [
{
"type": "number",
"name": "laptopProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 5.",
"isRequired": true,
"defaultValue": 3,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1} },
{ "type": "lessEqThan", "options": { "max": 5} }
]
}
]
},
{
"type": "header",
"name": "headerDesktop",
"label": "Desktop",
"options": {"icon": "desktop"},
"children": [
{
"type": "number",
"name": "desktopProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 6.",
"defaultValue": 4,
"isRequired": true,
"validators": [
{ "type": "int" },
{ "type": "greaterEqThan", "options": { "min": 1} },
{ "type": "lessEqThan", "options": { "max": 6} }
]
}
]
},
{
"type": "header",
"name": "headerMobileDevices",
"label": "Mobile devices",
"options": {"icon": "mobile_devices"},
"children": [
{
"type": "checkbox",
"name": "hasArrowsOnMobile",
"label": "Enable navigation arrows",
"defaultValue": 1
}
]
}
]
},
{
"state": "unfolded",
"label": "Product tile",
"elements": [
{
"type": "infobox",
"name": "infoboxProductTile",
"options": {
"type": "blank",
"message": "#### Related settings in the admin panel%s- changing phrases in [translations](%s)%s- enabling vendor's code, 30-day lowest price and unit price calculation in [product settings](%s)%s- displaying net\/gross prices in the [price and VAT rate settings](%s)%s- enabling the ability to buy in [order settings](%s)%s- setting product [availability statuses](%s)",
"placeholderValues": [
"\n",
"\/admin\/configLanguages\/list",
"\n",
"\/admin\/configProducts",
"\n",
"\/admin\/configTax\/list",
"\n",
"\/admin\/configShopping",
"\n",
"\/admin\/configAvailabilities\/list"
]
}
},
{
"type": "header",
"name": "productOptions",
"label": "Display for every product:",
"children": [
{
"type": "checkbox",
"name": "hasFavouriteIcon",
"label": "\"Add to favourites\" icon",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "hasSkuCode",
"label": "product code\/SKU",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "hasProducerCode",
"label": "vendor's code",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "hasProducerName",
"label": "vendor's name",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "hasUnitPrice",
"label": "unit price",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "hasRegularPriceWhilePromotionActive",
"label": "regular price (for products on sale)",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "hasPercentageDiscountValue",
"label": "by how many percent the price has changed (for products on sale)",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "hasTaxInfo",
"label": "tax class (if there is only one price: net or gross)",
"defaultValue": 0,
"hint": "Tax Class rate will be displayed regardless of these settings, if the store displays the net and gross prices at the same time."
},
{
"type": "checkbox",
"name": "hasPriceWithoutDeliveryInfo",
"label": "information that prices are quoted without delivery costs",
"defaultValue": 0
},
{
"type": "checkbox",
"name": "hasAddToBasketButton",
"label": "\"Add to cart\" button",
"defaultValue": 1
},
{
"type": "checkbox",
"name": "hasAvailabilityStatus",
"label": "availability status",
"defaultValue": 0
}
]
},
{
"type": "checkbox",
"name": "shouldShortenLongProductName",
"label": "Shorten long product names",
"defaultValue": 1
}
]
}
]