Filter interface #
Clerk.io’s Filter Interface can be used for each Content to narrow down results based on your product-attributes.
You will locate this option on Recommendations/Search/Email -> Content -> Edit Content -> Choose Product Logic. At the bottom you will find Filter Products.
When creating filters, the Interface will show you how many products match the filter and the generated filter string.
Each part of the filter consists of the following:
An Attribute to filter by
A Comparison deciding how the attribute should be compared to the value
A Value deciding what the attribute should be compared to
Simple Filters #
A simple filter showing only products below 400€ can be seen here:
Stacking Filters #
Filters can be stacked by clicking the " +" icon inside an existing filter-box and choosing a new filter with the And / Or button.
A simple filter showing only products below 400€ and only ones that are on sale.
Grouping Filters #
Grouping allows you to create more specific filters where multiple stacked filters can be added and shown together or apart.
Clicking the "+ Add filter" button causes the next filters you add to be handled as a separate stack from the rest.
After choosing a new filter, you will get an option so handle the new stack as an “and” or an “or” stack. Simply click the text to switch it.
And will show products that must match both the filter before it, and the current one.
Or will show products that match any of the filters/stacks.
This can be used to show products that always match the first part of the filter, but only match one of multiple filters in the group.
An example, showing products that cost no more than €400, on sale and are either from a precise vendor (above) or have another filter applied.
Dynamic filtering in snippets #
Clerk.io filters can be used directly in the embed codes using the data-filter attribute. This allows you to make dynamic filters in the logic based on variables in the webshop.
Below you’ll find a few examples, but you can use this in many other ways.
Display products that allow a free shipping limit to be reached: #
Assuming you shop has a variable called $free_shipping_limit that contains the remaining amount needed for the customer to reach the free shipping limit, you can use a dynamic filter that looks like this, to only display products above this price point:
<span class="clerk"
data-template="@complementary-to-basket"
data-filter="price > $free_shipping_limit">
</span>
Display products matching a specific gender: #
This example assumes your products has an attribute called gender that returns either female or male.
You then need a variable in your store containing the gender for the current product, which in this example is called $product_gender.
The embed code with the filter can then be setup like this:
<span class="clerk"
data-template="@Bestsellers"
data-filter="gender = $product_gender">
</span>
Display products of a specific type or brand: #
You can filter sliders to only show products from within the same category as the product that the customer is looking at.
In this case you need a list in your store containing the product categories, which we will call $categories here. The list should look like this : $categories =[1,2,3,4,5] The filter could then be setup like this:
<span class="clerk"
data-template="@type-slider"
data-filter="categories in $categories">
</span>