Implement Load More Feature for Coveo Search Page

Coveo for Sitecore connector provides the Pagination component OOTB. Sometimes, we get the requirement to implement the Load More feature instead of pagination. It is not available in the Coveo Hive components library. However, it is easy to implement using the Coveo JavaScript framework. Here are the steps to build the component and use it on a Coveo search page:

Step 1:

Create a LoadMore.cshtml file that contains the Load More button:

<div class="load-more-container">
    <div class="load-more">
        <a href="#" class="btn btn--small">
            Load More
        </a>
    </div>
</div>

Step 2:

Create a view rendering item in your Sitecore instance and provide a path of the LoadMore.cshtml file created in the above step.

Step 3:

Add the following script that will load the next set of results on click of load more button:

document.addEventListener("DOMContentLoaded", function () {

    var root = document.querySelector("#SearchInterface");

    //Load more results    
    var $search = $("#SearchInterface");
    var $resultList = $('.CoveoResultList');

    Coveo.$$(root).on("preprocessResults", function (e, args) {
        if (args.results.totalCount > (args.query.firstResult + args.query.numberOfResults)) {
            Coveo.$(".load-more").show();
        } else {
            Coveo.$(".load-more").hide();
        }
    });
    $('.load-more').on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $resultList.coveo('displayMoreResults', parseInt($search.data('results-per-page')));
    });
});

Step 4:

Create a Coveo Placeholder Extender this template – /sitecore/templates/Coveo Hive/Structure/Placeholder Extender

Select UI Results Footer placeholder in Placeholder Settings field.

Select Load More rendering in Allowed Controls field.

Step 5:

Open the search page in Experience Editor, add a Load More component in the UI Results Footer placeholder and publish your changes.