Search Function from helper library breaks infiniteHits

Im using instantsearch.js connectors to build a filterable Collection page on a Shopify store. In order to enable merchandising (promoting products), I am using the searchFunction parameter and setQuery from the helper library to add queries based on the handle of the collection, which then triggers Algolia’s query rules.

The problem is that this is breaking the Show More button needed by the infiniteHits connector (button simply does not Show More even though there are more pages of results).

For testing purposes, I tried simply adding the following as the searchFunction and confirmed the Show More button works:

search_options.searchFunction = (helper) => {
    helper.search();
}

Here is the code I need to cooperate with Show More. This should check if someone has applied any facets - if so, remove the query to stop promoting products with the query rule.

search_options.searchFunction = (helper) => {
    
    let facets = helper.state.disjunctiveFacetsRefinements,
        query = Object.keys(facets).length == 0 ? handle : "";

    helper.setQuery(query);

    helper.search();
}

Hi @darren-segal,

Thanks for contacting Algolia!

We also received your inquiry by email so will also respond through that, but just wanted to make sure we also connected on your Discourse post.

To best help you with a front-end issue, could you please create a sandbox with minimum code needed to reproduce your issue. Here is a starter sandbox that you can edit for your InstantSearch.js use case: https://codesandbox.io/s/znl9vz28rl

Best regards,

Thank you @ajay.david,

Here’s an updated sandbox. I’ve set it up with infiniteHits and wrote the search function to set the query to “amazon” unless there are filters applied, in which case remove the query.

As you can see, this breaks the Show More button. Please advise.

Hi @darren-segal,

I am Charly, Software Engineer at Algolia.

Thanks for providing a sandbox.

Replacing the searchFunction code by the following solved the pagination issue:

searchFunction(helper) {
    let facets = helper.state.disjunctiveFacetsRefinements,
      query = Object.keys(facets).length === 0 ? 'amazon' : '';

    var page = helper.getPage();

    helper.setQuery(query);

    helper.setPage(page);

    helper.search();
  },

(The setPage() was missing).

Please let me know if it solved all your issues.

Thanks for the reply and I got your email as well. This does seem to work at first glance, so Ill be testing this today.

My assumption was that the custom search function would only have to do manual things if they have not changed from default behavior of instantsearch.js widgets. So Im surprised you have to manually set the page using the helper, especially when using infiniteHits.

I had asked another question in my email that a couple of support team reps have not responded to. If you could please reply here or by email to the “Side note” in my email to you regarding sort orders it would be appreciated.

Thank you