Recently Viewed

The <recently-viewed> webcomponent is used to render recently viewed products. Usage requires having a recently-viewed integration module enabled.

Attributes

Attribute name	Type	Default	Description
current-product-id	number	-	The id of the product that we are currently browsing. This is used to check if the fetched product id from the integration module is the same.
container-id	string	-	The id of the container. If there are no recently viewed products, the container will not be displayed.
products-to-show	number	-	The number of products to display.
products-per-page-desktop	number	-	The number of products to display per page on desktop.
products-per-page-laptop	number	-	The number of products to display per page on laptop.
products-per-page-tablet	number	-	The number of products to display per page on tablet.
products-per-page-mobile	number	-	The number of products to display per page on mobile.

Example

{% from "@macros/slider.twig" import slider %}

{% set productsToShow = 16 %}
{% set productId = ObjectApi.getProduct(product_id) %}
{% set containerId = "recently-viewed-container-#{moduleInstance}" %}
{% set productsPerPageDesktop = 4 %}
{% set productsPerPageLaptop = 3 %}
{% set productsPerPageTablet = 2 %}
{% set productsPerPageMobile = 1 %}

{% 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 %}

<div id="{{ containerId }}">
    {{
        slider({
            sliderItemsTemplate: sliderItemsTemplate,
            options: {
                id: 'slider-1'
            }
        })
    }}
</div>

Modules reference

• recently_viewed
• roster_recently_viewed