This section will show you how to install Clerk.io's entire search engine with everything driven by Content and Designs.

Live Search / Search As You Type

   1. Create a Search Design called "Live Search". Start by using a default
       Live Search Drop Down
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 into the bottom of the file that generates all pages of your
       webshop.

   5. Replace INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE in
       
data-bind-livesearch with the class or ID of your search-field.
   6. Profit. Now live search is bound to the search field when customers type

Example Live-Search Code

<span class="clerk" 
  data-template="@live-search"
  data-bind-live-search="#search"
  data-live-search-categories="true">
</span>

Search Page

   1. Create a Search Design called "Search Page" and choose the default
       Responsive 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 PRINT_QUERY_HERE text in data-query  with a logic for getting
        the query that customers enter, from the search-field.
   7. Profit. Now you have Clerk as your search function.

Dynamic Search Page Template

<span
    id="clerk-search"
    class="clerk"
 
    data-template="@search"
    data-limit="40"
    data-offset="0"
    data-target="#clerk-search-results"
    data-after-render="_clerk_after_load_event"
    data-query="PRINT_QUERY_HERE">
</span>
 
<ul id="clerk-search-results"></ul>
<div id="clerk-search-no-results" style="display: none;"></div>
 
<div style="text-align: center;">
   <button id="clerk-search-load-more-button"></button>
</div>
 
<script type="text/javascript">
    var total_loaded = 0;
    function _clerk_after_load_event(data) {
        total_loaded += data.response.result.length;
        var e = jQuery('#clerk-search');
        if (typeof e.data('limit') === "undefined"){
        e.data('limit', data.response.result.length)
        }
        jQuery('#clerk-search-load-more-button').on('click', function() {
            e.data('offset', e.data('offset') + e.data('limit'));
            Clerk.renderBlocks('#clerk-search');
            jQuery('#clerk-search-load-more-button').off();
        });
        if (total_loaded == 0) {
            jQuery('#clerk-search-no-results').show();
        } else {
            jQuery('#clerk-search-no-results').hide();
        }
        if (total_loaded == data.response.hits) {
            jQuery('#clerk-search-load-more-button').hide();
        } else{
            jQuery('#clerk-search-load-more-button').show();
        }
    }
</script>

Did this answer your question?