Coveo load more functionality

Question

I am trying to implement "Load more" functionality instead the basic pagination in Coveo. My button code is below. Only the console logs work, the code don't send ajax to the service.

I have searched the Coveo documentation for load more button/functions but didn't find any.

//html code of button    
<div data-firstres="0" class="load_more_btn">Load More</div>     

//js
$('.load_more_btn').on('click', function() {
    var this_btn = $(this);
    var firstResult = this_btn.attr('data-firstres');
    var q = $('.magic-box-input input').val();
    console.log(q);
    var new_res = parseInt(firstResult) + 10;
    this_btn.attr('data-firstres', new_res);
    console.log(new_res);
    var root = document.body;
    Coveo.SearchEndpoint.endpoints['default'] = new Coveo.SearchEndpoint({
      restUri: 'https://platform.cloud.coveo.com/rest/search',
      queryStringArguments: {
          organizationId: 'replaced_val',
          numberOfResults: '10',
          firstResult:firstResult,
          q:q
        },
      accessToken: acc_token,
    });
    Coveo.init(root);
});

Answer 1

displayMoreResults worked for me

$('.load_more_btn').on('click', function() {
  Coveo.$('.CoveoResultList').coveo('displayMoreResults', 5);
});

Answer 2

First, your code will not fill your required behavior.

Coveo.init should only be called once, it is used to initialize the search interface. The SearchEndpoint should only be set once, before the initialization, and not after each "LoadMore" click.

You should then alter the query using JavaScript Search Events and JavaScript API calls.

So for your use case, you can leverage the displayMoreResults method of the CoveoResultList component.

You can also follow the exampel of the ShowMore custom component created by Coveo people in the JavaScript Search Framework Custom Components repository. Here is the relevant part of the displayMoreResults() method being called by the custom component:

public loadMore() {
  this.resultList ? this.resultList.displayMoreResults(this.options.count || 10) : null;
}

public get resultList(): ResultList | null {
  const resultListElement = $$(this.root).find('.CoveoResultList');
  if (resultListElement) {
    return get(resultListElement) as ResultList;
  }
  return null;
}