The Recommendation component,
<esales-recommendation>, is used to enable product recommendations on pages. Recommendations are currently only supported when used together with the Product page component,
The Product page component keeps track of notifications and visitor interactions and requires a product key supplied to its
product-key-attribute. It is recommended to supply the key either dynamically or statically.
<esales-product-page [product-key]="product.key"></esales-product-page> <esales-recommendation zone-id="sp2" size="8" type="ALTERNATIVE" label="Similar items"></esales-recommendation> <esales-recommendation zone-id="sp1" size="4" type="COMPLEMENTARY" label="You might also like"></esales-recommendation>
Risk of incorrect usage
Using an incorrect key, e.g. a product group key or a variant key, will result in incorrect notifications and in turn incorrect statistics. No product recommendations will be displayed if an incorrect key is used.
Ensure that a product key is used.
A product key must be an exact match of a product's key in the data feed. I.e. discontinued products that purposely have not been added to the data feed, but still exists on the site, will not be able to display recommendations for that product.
Dynamic product key¶
If a product key is set dynamically in the Product page component it must be in the form of
Static product key¶
product-key can be set with a static value to the attribute. The following example has the key
P1 set as the value for
Key retrieval via URL
If a product key is not available, the Product page component will try to find the product based on the URL provided for each product in the product feed. This requires a set-up of the
productPageUrlPrefix as defined in the Script initialisation.
It is however recommended to always supply a product key and not rely on retrieval though the URL.
If there are multiple URL paths leading to the same product, the Product page component will not be able to resolve a product key on all paths.
If multiple products share the same product page URL, recommendations based on product page URL will choose a product to make recommendations for at random.
The Recommendation component supports product carousels for both desktop and mobile devices. This is done with the addition of the attribute
carousel to the component. An additional attribute,
breakpoint, can be added with a pixel value that determines when the carousel scroll arrows are to be either outsider or inside of the carousel. The default value is
The following example illustrates an alternative recommendation carousel with 8 products and a window breakpoint of 1200 pixels.
<esales-recommendation zone-id="sp2" size="8" carousel breakpoint="1200" type="ALTERNATIVE" label="Similar items"></esales-recommendation>
This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.
All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.
Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.CLOSE