Instant Search #
This section will show you how to install Clerk.io’s Live Search with everything driven by Content and Designs.
1. Create a Search Design called “Instant Search”. Start by using a default
Instant Search Dropdown Right design.
2. Create a Search Content block called “Live Search”.
3. Choose Live Search as the Product Logic, and select your Live-Search design
4. Copy the embedcode from the section “Insert into website” into the bottom of the file that generates all pages of your webshop.
5. Replace INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE in data-instant-search with the class or ID of your search-field.
6. Now live search is correctly bound to the search field when customers type.
Example Live-Search Code
<span class="clerk"
data-template="@live-search"
data-instant-search="#search"
data-live-search-categories="true">
</span>
Search Page #
This section will show you how to install Clerk.io’s Search Page with everything driven by Content and Designs.
1. Create a Search Design called " Search Page" and choose the default
Search Page design.
2. Create a Content block called " Search Page".
3. Choose Search as the Product Logic, and select your Search Page design.
4. Set Number of products to 40, and write " Search Results" as the Headline.
5. Copy the code below into your search page.
6. Replace the INSERT_QUERY_HERE text in data-query with a logic for getting
the query that customers enter, from the search-field.
7. Now you have Clerk as your search function!
Dynamic Search Page Template With Facets
<div class="clerk-page-width">
<span
id="clerk-search"
class="clerk"
data-template="@search-page"
data-target="#clerk-search-results"
data-query="INSERT_QUERY_HERE"
data-facets-attributes='["price","categories","vendor"]'
data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
data-facets-target="#clerk-search-filters"
data-facets-price-prepend="€"
data-facets-in-url="false"
data-facets-view-more-text="View More"
data-facets-searchbox-text="Search for ">
</span>
<div id="clerk-show-facets" onclick="toggleFacets()">Filters</div>
<div class="clerk_flex_wrap">
<div id="clerk-facets-container">
<div id="clerk-search-filters"></div>
</div>
<div id="clerk-search-results"></div>
</div>
<script>
function toggleFacets(){
el = document.getElementById('clerk-facets-container');
el.classList.toggle('active');
}
</script>
<style>
#clerk-show-facets {
width: 70%;
height: 40px;
margin: 20px auto;
background-color: #333;
color: white;
text-align: center;
border-radius: 2px;
line-height: 40px;
cursor: pointer;
}
.clerk-page-width {
display: flow-root;
}
#clerk-search-results {
width: 80%;
}
#clerk-show-facets {
display: none;
}
.clerk_flex_wrap {
display: flex;
flex-direction: row;
}
.active {
display: block !important;
}
@media only screen and (max-width : 800px) {
#clerk-search-filters {
width: 100% !important;
}
#clerk-facets-container {
display: none;
}
#clerk-show-facets {
display: block;
}
.clerk_flex_wrap {
flex-direction: column;
}
#clerk-search-results {
display: block;
width: 100%;
}
}
</style>
</div>
Facets #
Clerk.js comes with built in support for Faceted Search.
Any product attributes you send to us can be used as part of the Faceted Search.
Let’s start with a quick example:
<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>
<span
class="clerk"
data-template="@search-page"
data-query="shoes"
data-offset="0"
data-target="#clerk-search-results"
data-facets-target="#clerk-search-filters"
data-facets-attributes='["categories","manufacturer","gender"]'
data-facets-multiselect-attributes='["categories","manufacturer"]'
data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'>
</span>
The data-facets- parts allow you to enable and customise the Faceted Search.
By adding these to your Search embedcode, facets will be displayed as soon as results are shown.
Below, you can see what each a part does:
Styling Facets #
Facets comes with a simple styling out of the box. To alter this, simply use these CSS selectors, to add any custom styling:
