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 embedcodedata-offset
which will later be used to fetch the next list of resultsdata-limit
which will be used to update the offsetdata-target
which will be used to point the results to the container you inserteddata-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.