Adding a Load More Results Button to the Search Page on Clerk.js 1

If you are using an older setup of Clerk.io, or did not get a Load More Results button on your Search Page when installing it, this guide will show how to extend your search page to make it work.

First, make sure that Clerk.io's Search embedcode is already loading results on your Search Page. It should look similar to this:

<span class="clerk"
      data-template="@search-page"
      data-query="INSERT_QUERY_HERE">
</span>

1. Insert container HTML

Now you need to add a container where the Search Results should be injected into, so the button can later use this.

Since the buttons code can also generate a No Results Page, you need to insert these two HTML blocks above the embedcode:

<ul id="clerk-search-results"></ul>
<div id="clerk-search-no-results" style="display: none;"></div>

2. Extend the embedcode

The search embedcode needs these extra parameters:

• id which will be used to find the embedcode
• data-offset which will later be used to fetch the next list of results
• data-limit  which will be used to update the offset
• data-target  which will be used to point the results to the container you inserted
• data-after-render which will run the function that loads the button

In the end, your embedcode should look like this:

<span id="clerk-search"
      class="clerk"
      data-template="@search-page"
      data-query="INSERT_QUERY_HERE"
      data-limit="40"
      data-offset="0"
      data-target="#clerk-search-results"
      data-after-render="_clerk_after_load_event">
</span>

3. Add the button

Now you can add the actual button, and the script that loads it:

<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>

When you are done, you will have a fully functioning Load More Results button, that also displays a configurable No Results block if no results are found.