Removing Duplicate Products on Pages With More Than One Banner

Using this feature forces the loading of multiple Clerk.io recommendations one after another, instead of at the same time, thus adding an 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 clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  id="clerk2"
  data-exclude-from=".clerk1"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  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 clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  id="clerk2"
  data-exclude-from=".clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  id="clerk3"
  data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
  data-template="@clerk-banner-3">
</span>