Roster Recently Viewed¶
roster_recently_viewed module is used to display tile slider with the recently viewed products. If there are no recently viewed products, the module will not be displayed.
Configuration parameters¶
textHeader¶
string Text content of a header
levelHeader¶
string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header module:
h2h3h4h5h6
shouldDisplayHeading¶
int if set to 1 the header will be displayed
shouldDisplayUnderline¶
int if set to 1 the header underline will be displayed
displayDescription¶
int if set to 1 module description will be displayed.
description¶
string Description of the module. If not specified description won't 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.
Module source code¶
{% from "@macros/slider.twig" import slider %}
{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{% from "@macros/product_tile.twig" import product_tile %}
{% 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 hasUnderline = moduleConfig.shouldDisplayUnderline == 1 %}
{% set productsToShow = moduleConfig.numberOfProductsToShow > maxProductsToShow ? maxProductsToShow : moduleConfig.numberOfProductsToShow %}
{% set containerId = "recently-viewed-container-#{moduleInstance}" %}
{% if product_id %}
{% set product = ObjectApi.getProduct(product_id) %}
{% set productId = product.id %}
{% endif %}
{% set sliderItemsTemplate %}
<recently-viewed
current-product-id='{{productId }}'
container-id="{{ containerId }}"
products-to-show='{{ productsToShow }}'
products-per-page-desktop='{{ productsPerPageDesktop }}'
products-per-page-laptop='{{ productsPerPageLaptop }}'
products-per-page-tablet='{{ productsPerPageTablet }}'
products-per-page-mobile='{{ productsPerPageMobile }}'
></recently-viewed>
{% endset %}
{%
set recentlyViewedSliderSettings = {
"perPage": productsPerPageDesktop,
"pagination": true,
"hasArrowsOnMobile": moduleConfig.hasArrowsOnMobile == '1',
"breakpoints": {
1440: {
"perPage": productsPerPageLaptop,
},
1000: {
"perPage": productsPerPageTablet,
},
576: {
"perPage": productsPerPageMobile
}
}
}
%}
<consents-controller type="functional">
<div class="recently_viewed" slot="granted" id="{{ containerId }}" hidden>
{% if moduleConfig.shouldDisplayHeading == 1 %}
<{{ moduleConfig.levelHeader }} class="contact-info__header header header_{{ moduleConfig.levelHeader }} {% if hasUnderline %} header_underline {% endif %}">
<span {% if hasUnderline %} class="header_highlight" {% endif %}>
{{ moduleConfig.textHeader }}
</span>
</{{ moduleConfig.levelHeader }}>
{% 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: "recently-#{moduleInstance}",
sliderConfig: recentlyViewedSliderSettings
})
}}
</div>
</consents-controller>
Macros reference¶
Used Object Api methods¶
Used styles¶
Used webcomponents¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "warning",
"message": "The module uses cookies. It will not be displayed to customers who change the default cookie settings and disable 'functional' cookies."
}
},
{
"type": "infobox",
"name": "infoboxProductTile",
"options": {
"type": "blank",
"message": "%s Related settings in the Shoper Visual Editor%s- thumbnail size (L) in the [\"Theme settings\"](%s) tab%s- height of the space for a photo in the [\"Colors and styles\"](%s) tab",
"placeholderValues": [
"####",
"\n",
"#theme-settings",
"\n",
"#theme-and-colors"
]
}
},
{
"name": "shouldDisplayHeading",
"type": "checkbox",
"label": "Display heading",
"supportsTranslations": true,
"defaultValue": 1,
"children": [
{
"name": "textHeader",
"type": "text",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHiddenAndOptional",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisibleAndRequired",
"setAvailable"
]
}
]
}
],
"label": "Module heading content",
"supportsTranslations": true,
"defaultValue": "Recently viewed"
},
{
"name": "levelHeader",
"type": "select",
"hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"options": {
"isWithSearch": 0,
"selectOptions": [
{
"key": "h2",
"label": "H2"
},
{
"key": "h3",
"label": "H3"
},
{
"key": "h4",
"label": "H4"
},
{
"key": "h5",
"label": "H5"
},
{
"key": "h6",
"label": "H6"
}
]
},
"label": "Heading level",
"defaultValue": "h2"
},
{
"name": "shouldDisplayUnderline",
"type": "checkbox",
"relations": [
{
"parentName": "shouldDisplayHeading",
"parentValueToActionsMap": [
{
"value": 0,
"actions": [
"setHidden",
"setDisabled"
]
},
{
"value": 1,
"actions": [
"setVisible",
"setAvailable"
]
}
]
}
],
"label": "Add underline below the heading",
"defaultValue": 1
}
]
},
{
"type": "checkbox",
"name": "displayDescription",
"label": "Display additional description below the heading",
"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": "number",
"name": "numberOfProductsToShow",
"label": "Number of products in the module",
"labelDescription": "Max. 16.",
"isRequired": 1,
"defaultValue": 16,
"hint": "By default, the last 16 products viewed by the customer will be displayed.",
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 16} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
},
{
"type": "header",
"name": "headerMobileDevices",
"label": "Mobile",
"options": {
"icon": "phone"
},
"children": [
{
"type": "number",
"name": "phoneProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 2.",
"defaultValue": 1,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 2} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"type": "header",
"name": "headerTablet",
"label": "Tablet",
"options": {
"icon": "tablet"
},
"children": [
{
"type": "number",
"name": "tabletProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 4.",
"defaultValue": 3,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 4} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"type": "header",
"name": "headerLaptop",
"label": "Laptop",
"options": {
"icon": "laptop"
},
"children": [
{
"type": "number",
"name": "laptopProductsCountPerRow",
"label": "Number of products in the row",
"labelDescription": "Max. 5.",
"defaultValue": 3,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 5} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"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,
"validators": [
{ "type": "int" },
{ "type": "lessEqThan", "options": { "max": 6} },
{ "type": "greaterEqThan", "options": { "min": 1} }
]
}
]
},
{
"type": "header",
"name": "header_mobile_devices",
"label": "Mobile devices",
"options": {
"icon": "mobile_devices"
},
"children": [
{
"type": "checkbox",
"name": "hasArrowsOnMobile",
"label": "Enable navigation arrows",
"defaultValue": 1
}
]
}
]
}
]