Developer Considerations for Product Recommendations

Developer work to define product recommendations includes modifying ISML templates, defining content slots, providing a unique ID, along with other customizations.

When implementing product recommendations, keep the following in mind:

• Modify ISML templates to define content slots and display product recommendations.
• When defining content slots for product recommendations, make sure you give the slot a unique ID and set the context to global.
• If the content slot renders recommendations on product detail or category-landing pages, include the referring product ID or category ID as part of the context-object attribute.
• You can pass the context-object attribute a basket or dw.util.Collection of products. This option enables you to create and use recommendations based on selected products (up to 5), or all products in the basket.

This example <islot> tag shows how to define a slot for use on a product detail page:

<isslot id="myslotid" context="global" context-object="${pdict.Product}"/>

This example shows how to define a slot for use on a category landing page:

<isslot id="cat-banner" context="category" context-object="${pdict.ProductSearchResult.category}" />

For defined content slots on your storefront, make sure to create a page template to render the recommended products. If you already have a template that renders other types of product content slots, you can reuse these templates with some modification. When reusing a template, copy it to the /templates/default/slots/recommendation/ folder.

The following example provides a product template for showing product recommendations:

<iscontent type="text/html" charset="UTF-8" compact="true"/>
<iscomment> should not be cached, the tiles are cached individually.</iscomment>

<isif condition="${slotcontent}">
<div class="product-listing product-listing-1x4">
        <h2>${slotcontent.calloutMsg}</h2>

        <ul class="search-result-items tiles-container">
                <isloop items="${slotcontent.content}" var="product" begin="0" end="3">
                        <isobject object="${product}" view="recommendation">
                                <li class="grid-tile">
                                        <isinclude url="${URLUtils.url('Product-HitTile',
                                                'pid', product.ID,
                                                'showswatches', 'true',
                                                'showpricing', 'true',
                                                'showpromotion', 'true',
                                                'showrating', 'true')}"/>
                                </li>
                        </isobject>
                </isloop>
        </ul>

</div>
</isif>