Coveo Load More button implementation

Hi Folks,

Today I will try to cover how can we build load more button  functionality in Coveo for Sitecore.

As Coveo provide OOTB auto load result on scroll functionality but in some scenario we need ‘load more’ button.

For that we need to call below function:

Coveo.$('.CoveoResultList').coveo('displayMoreResults', size);

So Assume we have load-more button so on click of that button we have to call below function:

Coveo.$('.loadmore').click(function(e, args) {

               Coveo.$('.CoveoResultList').coveo('displayMoreResults', size);

           });

Above function call displayMoreResult method of Coveo with size parameter here size the number of result which you want to display when someone click on ‘load more’ button.

Here above I am using ‘Coveo.$’ as that is recommended to be execute flawless our Coveo javascript code without any conflicts due to jquery library while we are calling or write any Coveo related javascript.

That above code work perfectly for load more functionality.

But we have to look into the result if there is no more sufficient result then we have to hide ‘load more’ button else we need to show the ‘load more’ button.

For that we check the result number that we can check by below variable:

args.results.totalCount :It gives the total count of result.

args.query.firstResult : The 0-based index position of the first result to return.

args.query.numberOfResults: The number of results to retrieve starting from firstResult.

If resultPerPage variable hold greater value from args.results.totalCount then no need to show button.

In another case you can do use similar below code for this situation before process the result by 'preprocessResults' method:

Coveo.$('#IdOfCoveoSearchInterface').on('preprocessResults', function(e, args){

               if (args.results.totalCount > (args.query.firstResult + args.query.numberOfResults)) {

                   Coveo.$(".loadmore").show();

               } else {

                   Coveo.$(".loadmore").hide();

               }

           });

I hope you enjoy this Sitecore blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)


Please leave your comments or share this article if it’s useful for you.