Multiple Recommendations on a Page
ATG Recommendations can be shown in more than one location on a page. This is accomplished with an initialization block that defines parameters for the page, and then separate recommendation code blocks for each recommendation set on the page.
Javascript Include
Add this <SCRIPT> to the <HEAD> element on any page . (Please do not use the defer attribute as it causes failure in certain browsers.)
<script type="text/javascript" charset="utf-8" src="//static.cleverset.com/js/cleverset-2.js"></script>
Initialization & Clickstream Tracking Code
This code div element sets parameters that are shared by all of the recommendation sets that appear on the page. Additionally, it serves as the click stream tracking code for this page. Add this <DIV> element somewhere in the body of the page. Replace the placeholder
<div id="cs-init" >
<dl class="cs-cfg">
<dt>retailerId</dt><dd>Your Retailer Id</dd>
<dt>productId</dt><dd>Product Id (optional)</dd>
<dt>brand</dt><dd>Brand (optional)</dd>
<dt>category</dt><dd>Category (optional)</dd>
</dl>
</div>
Container <DIV> Elements for Recommendations
For each container <DIV> element on a page, ATG Recommendations generates a unique set of products. In order to do so, we need to distinguish between the locations. This is done with the <DIV>’s ID attribute. Additionally, each location can display a different style, for this example we’re using the basic tile layout.
Add this <DIV> element to the page each place where you want recommendations displayed. Replace the placeholder
<div id="Unique name for this slot" class="cs-slot"> <dl class="cs-cfg" style="display: none"> <dt>numRecs</dt><dd>Number of Recommendations to Display</dd> <dt>headerText</dt><dd>Text to Display Above Recommendations (optional)</dd> <dt>renderer</dt><dd>tiles</dd> </dl> </div>
