Excluding Products
Exclude Specific Products
To avoid recommending products already in the shopping cart, simply add the attribute data-exclude
to the recommendation embed codes.
The content of data-exclude
should be a list of the product IDs you don't want to be shown in the recommendations - ie. the products in the customer's shopping cart.
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[45654]">
</span>
<span class="clerk"
data-template="@clerk-complementary"
data-exclude="[123, 456]">
</span>
Exclude Duplicates
Be aware of slower load times
Using this feature forces the loading of multiple Clerk.io recommendations one after each other, 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 wherever you want to remove the duplicate from. The value of the attribute should be a CSS selector to the other block to prevent duplicates from.
In the example below, the .clerk-2
slider excludes any product that is in the .clerk-1
slider, and the .clerk-3
slider excludes any products that are in either .clerk-1
or .clerk-2
.
<span class="clerk clerk-1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk-2"
data-exclude-from=".clerk-1"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk-3"
data-exclude-from=".clerk-1,.clerk-2"
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 where only 4 are visible at a 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 as above, but where the exclusion id only regards the first 5 products.
<span class="clerk clerk-1"
data-template="@clerk-banner-1">
</span>
<span class="clerk clerk-2"
data-exclude-from=".clerk1:limit(5)"
data-template="@clerk-banner-2">
</span>
<span class="clerk clerk-3"
data-exclude-from=".clerk-1:limit(5),.clerk-2:limit(5)"
data-template="@clerk-banner-3">
</span>
Updated 8 months ago