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>

Did this answer your question?