Using Clerk.io to Show an Entire Category Page
IMPORTANT: It is crucial to note that replacing your category products on your webshop requires technical expertise, and we suggest seeking assistance from your own developer. Please be aware that our internal developers at Clerk.io are not able to perform this task for you.
Clerk.io’s Bestsellers in Categories logic supports showing both Facets ( filters ) and sorting products .
This means that it can be used to render an entire category page.
Replacing your category products with Clerk results:
In order to do this, you must do the following:
Create a Grid Design in your my.clerk.io backend for showing products
Hide / deactivate your existing products in categories
Insert a Clerk.io embedcode to show products on the category pages, by dynamically inserting the ID of the category, just like you would with a recommendations banner.
A simple example of an embedcode generating a category page with Facets, and ordered by lowest prices first can be seen here:
<div id="clerk-category-filters"></div>
<ul id="clerk-category-results"></ul>
<span
id="clerk-category"
class="clerk"
data-template="@category-page-results"
data-target="#clerk-category-results"
data-category="{{ collection.id }}"
data-facets-target="#clerk-category-filters"
data-facets-attributes='["price","brand"]'
data-facets-titles='{"price":"Price","brand":"Manufacturer"}'
data-orderby="price"
data-order="asc">
</span>
If not using Shopify, make sure to replace {{ collection.id }} with a shortcode that inserts your category ID.
Setting a Fallback
Since after this, Clerk.io will effectively show most products on the webshop, its important to have a Fallback option in case Clerk.io does not respond.
While this happens very rarely, as attested by our Status Page , you can never be too sure.
An easy way of doing this is in the frontend is:
Using display:none; on your existing category-products
Using a script that uses an Event to confirm that Clerk returned products.
Using jQuery’s .show() method to show existing products if Clerk does not respond.
This script checks whether Clerk has responded within 750ms and if not, shows the existing products:
<script type="text/javascript">
var clerk_response = false;
var category_page_selector = ".category-container"
Clerk('on','response', function(data,content){
if (content.result.length > 0) {
clerk_response = true;
}
});
setTimeout(
function(){
if (clerk_response == false) {
document.querySelector(category_page_selector).style.display = '';
}
}
,750)
</script>
Simply replace your .category-container with the class or ID of your product-container HTML.
Full Shopify Example
Here is an example of how to achieve this in Shopify.
1. In my.clerk.io, go to [Search > Designs] -> [New Design] (You need to create a grid-design similar to a Search page for your categories)
2. From the options, choose Search Page , give the Design a good name, like “Category Page Results” and click [Create Design]
3. On the next screen you can style the results page to your liking using the Design Editor. When you are done, click [i18n] button-save .
4. Go to Recommendations -> Content -> New Content
5. Name your Content “Category Page Results” and click Create Content
6. Under Choose Product Logic , select Bestsellers in Category
7. Under Select Design , choose a good number of products to show per page and select the Design you created.
8. Click Update Content
9. Now go to your webshops backend, and locate the file that generates your category-pages. In Shopify, this is often:
Online Store -> Themes -> Actions -> Edit Code -> Sections -> collection-template.liquid
10. Locate the code that contains all of the products in your category page. You can use your browsers Inspect Tool to easily find this on any of your category pages:
11. There are multiple ways of hiding the existing products, but an easy way is to simply add style=“display:none;” to the container-class:
12. Now you need to embed the Clerk.io results. To make it easy, we have prepared the following embedcode that already has pre-styled facets. It will show facets based on price and vendor but this can be extended:
<div class="page-width" id="Collection">
<div id="clerk-show-facets">Show/Hide filters</div>
<div id="clerk-facets-container">
<div id="clerk-category-filters"></div>
</div>
<span
id="clerk-category"
class="clerk"
data-template="@category-page-results"
data-target="#clerk-category-results"
data-category="{{ collection.id }}"
data-facets-target="#clerk-category-filters"
data-facets-attributes='["price","vendor"]'
data-facets-titles='{"price":"Price","vendor":"Manufacturer"}'>
</span>
<ul id="clerk-category-results"></ul>
<script>
document.querySelector("#clerk-show-facets").addEventListener('click', function(event) {
el = document.querySelector("#clerk-facets-container");
if(el.style.display == '' || el.style.display == 'block'){
el.style.display = 'none';
} else {
el.style.display = '';
}
});
</script>
<style>
#clerk-show-facets {
width: 50%;
height: 40px;
margin: 0px auto 20px auto;
background-color: #2cae39;
color: white;
text-align: center;
border-radius: 3px;
line-height: 40px;
}
#clerk-category-results {
display: inline-block;
width: 100%;
}
#load-more-results {
margin: 10px 10px 5px 10px;
padding: 10px 20px;
border-radius: 3px;
background-color: #E8B22F !important;
color: white;
line-height: 1em;
cursor: pointer;
}
#clerk-category-load-more-button {
display: none;
}
.clerk-button-container {
text-align: center;
}
.clerk-product {
box-sizing: border-box;
float: left;
width: calc(25% - 10px);
margin: 5px;
padding: 5px;
text-align: center;
line-height: 1.2em;
border: 1px solid #eee;
border-radius: 3px;
}
.clerk-product img {
max-width: 100%;
max-height: 180px;
margin: 5px 10px;
}
.clerk-product-name {
overflow: hidden;
color: black;
height: 2.3em;
margin: 5px 10px;
}
.clerk-price-wrapper {
height: 20px !important;
margin-bottom: 10px;
}
.clerk-new-price{
color: black;
}
.clerk-product-price {
margin: 5px;
color: black;
font-weight: bold;
}
.clerk-old-price {
font-size: 0.8em;
color: black;
}
.clerk-cta-button, .button {
margin: 10px 10px 5px 10px;
padding: 10px 20px;
border-radius: 3px;
background-color: #E8B22F !important;
color: white !important;
line-height: 1em;
}
.clerk-slider {
list-style: none;
width: 100%;
margin: 10px 0;
padding: 0;
}
.clerk-product > a, .clerk-product > a:hover, .clerk-product > a:visited {
display: block;
color: inherit;
text-decoration: inherit;
}
@media only screen and (max-width : 800px) {
.clerk-product {
width: calc(50% - 10px);
}
#clerk-category-filters {
width: 100%;
float: left;
}
#clerk-facets-container {
display: none;
}
}
@media only screen and (min-width : 800px) {
#clerk-category-results {
width: 78%;
float: right;
}
#clerk-category-filters {
width: 20%;
float: left;
}
#clerk-show-facets {
display: none;
}
}
</style>
</div>
<script type="text/javascript">
var clerk_response = false;
var category_page_selector = ".category-container"
Clerk('on','response', function(data,content){
if (content.result.length > 0) {
clerk_response = true;
}
});
setTimeout(
function(){
if (clerk_response == false) {
document.querySelector(category_page_selector).style.display = '';
}
}
,750)
</script>
13. Insert the embedcode above of the container you have just hidden:
14. Click Save
15. Your category results are now shown by Clerk.io:
After this step you can of course style the pages in any way you want with Designs