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>
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
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
<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>