Recommendation Area Integration¶

The Recommendation product list component is a generic recommendation component used to display the top products within a given selection on any page type. The selection is determined by the provided facet attributes and can typically be used to create a highlight for particular product segments such as a new collection, a sale, or a specific subcategory.

Multiple recommendation listings can be used on a page as long as each component have a unique zone-id for that page. If a product is included in more than one recommendation listing on a page, it will automatically be deduplicated to maximise the number of unique products on a page.

<esales-recommendation-product-list
    zone-id="sp1"
    size="4"
    data-custom.category="Shoes"
    label="Even more shoes!">
</esales-recommendation-product-list>

Recommendation visualisation¶

The Recommendation product list component supports product visualisation as carousels or grids for both desktop and mobile devices. The component defaults to carousel view if the attribute visualization is omitted. An additional attribute, breakpoint, can be added with a pixel value that determines when the carousel scroll arrows are to be either outside or inside of the carousel. The default value is 1050.

The following example illustrates a Recommendation product list carousel with 8 products and a window breakpoint of 1200 pixels. The products are selected from a custom attribute collection with the value SUMMER_COLLECTION.

<esales-recommendation-product-list
    zone-id="sp2"
    size="8"
    breakpoint="1200"
    data-custom.collection="SUMMER_COLLECTION"
    label="Summer is here!"
    showMoreLink="https://www.esalesdrivensite.com/summer-is-here">
</esales-recommendation-product-list>