Be aware of slower load times
Using this feature forces the loading of multiple Clerk.io recommendations one after another, instead of at the same time, thus adding a extra weight to the page load time.
Make sure the tradeoff in load time is worth avoiding the duplicates.
Clerk.js provides a simple way to prevent duplicates across multiple recommendations sliders on the same page.
This is done by adding the data-exclude-from attribute on the Clerk block that you want to remove the duplicates from. The value of the attribute should be a CSS selector for the other block to prevent duplicates from.
In the example below, the #clerk2 slider excludes any product that is in the #clerk1 slider, and the #clerk3 slider excludes any products that are in either #clerk1 or #clerk2 sliders.
HTML
<span class="clerk"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk"
id="clerk2"
data-exclude-from="#clerk1"
data-template="@clerk-banner-2">
</span>
<span class="clerk"
id="clerk3"
data-exclude-from="#clerk1,#clerk2"
data-template="@clerk-banner-3">
</span>You can also limit the exclusion to only show the first n products (a smart move if you have a slider with 20 products but only four are visible at any one time).
This is done via the :limit(n) option (where n is the first number of products you want to exclude from).
Here is the same example from above, but where the exclusion ID only regards the first five products.
HTML
<span class="clerk"
id="clerk1"
data-template="@clerk-banner-1">
</span>
<span class="clerk"
id="clerk2"
data-exclude-from="#clerk1:limit(5)"
data-template="@clerk-banner-2">
</span>
<span class="clerk"
id="clerk3"
data-exclude-from="#clerk1:limit(5),#clerk2:limit(5)"
data-template="@clerk-banner-3">
</span>