CODEWITHSUNDEEP
paginationalgoliainstantsearch.js
user1637231
user1637231

Reputation: 151

Algolia Instantsearch with Multiple Indices and Multiple Pagination Widgets

I have implemented instantsearch.js with 1 search input and multiple indices, and multiple stats/pagination widgets. Everything seems to be working correctly except for the pagination widgets.

Here is a codepen https://codepen.io/flrrrhoffpauir/pen/EEpWre

collections.addWidget(
    instantsearch.widgets.pagination({
        container: '#collections-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#stories-search-pagination',
        showFirstLast: false,
        labels: {
            next: '>',
            previous: '<',
        },
        cssClasses: {
            root: 'search-pagination'
        }
    })
}

If you search for ‘martin’ and then click the Stories tab, you can see the results and that the pagination is working. If you now click the Collections tab, you can see that the pagination widget has the correct number of pages based on how many results were returned according to the stats widget, but then you click to go to page 2, you are just scrolled to the top of the page and it doesn’t load the page 2 data.

How can I get two or more pagination widgets on the page at once that both work correctly?

This is what I went off of to create the multiple index search, but they don't cover multiple pagination widgets: https://jsfiddle.net/j9nwpz34/49/

Upvotes: 1

Views: 1690

Answers (2)

Dan Carter
Dan Carter

Reputation: 1

For anyone encountering this exact problem where a second/subsequent instantSearch's pagination is just taking you to the top of the page - the solution is simply to add a "scrollTo: false" property in the pagination object.

From the documentation here:https://www.algolia.com/doc/api-reference/widgets/pagination/js/

Using OPs code to illustrate:

collections.addWidget(
instantsearch.widgets.pagination({
    container: '#collections-search-pagination',
    showFirstLast: false,
    scrollTo: false,
    labels: {
        next: '>',
        previous: '<',
    },
    cssClasses: {
        root: 'search-pagination'
    }
})

Upvotes: 0

bobylito
bobylito

Reputation: 3392

The searchFunction implementation should transfer all the information that needs to be synchronized. For example, in your case you have a pagination widget that you want to sync across instances of InstantSearch, so you want to transfer the pagination property on top of the query parameter.

var search = instantsearch(
{
  /* appId: '',
  apiKey: '', 
  indexName: 'movies',*/
  searchFunction: function(helper) {
    var query = movies.helper.state.query;
    var page = movies.helper.state.page;
    products.helper.setQuery(query);
    products.helper.setPage(page)
    products.helper.search();
    helper.search();
  },
  searchParameters: {
    hitsPerPage: 3
  }
});

I've modified the JSFiddle to match your need. You can learn more about this state by going to the JS Helper documentation (internal state management of InstantSearch.js).

Update based on the jsFiddle provided:

The rest of the example still holds. However, one thing to note is that if you make a modification in the helper, it will reset the page. In the provided fiddle, you do such a change in the collections searchFunction. You will always set the query, which will always reset the page to 0. Hence the bug.

Here is a fixed fiddle

Upvotes: 3

Related Questions