Separate Pagination on every section

Hi,

I have created multiple sections which I solved by this Create sections on searchpage.

Now I would like to add unique pagination which is connected to each separate section. A demo of what it looks like now can be found on http://verket2017.staging.wpengine.com/?s= where you can see the sections Products (Produkter) and Posts (Inlegg) .

Below each section there is a pagination attempt that needs twerking.

The code for the JS can be seen here https://gist.github.com/damircalusic/2285ffef35a406211bb98e411a0cc2c7

How can I create a seperate pagination for each section?

Best regards.

Hi @damir,

I took a look at your issue, first of all you need to attach the second pagination on the correct instance. The second pagination widget is linked to products instead of posts.

25

Now you should have something working but not correctly because the second pagination is reset when the first one it updated. It’s related to the searchFunction on the primary instance. Every time you call setQuery on the helper the page number will be reset. At the end we need to reapply the page number on the posts helper when the query didn’t change.

searchFunction: function (helper) {
  var query = products.helper.state.query;

  // Save both the query & the page number
  var oldPostsPage = posts.helper.state.page;
  var oldPostsQuery = posts.helper.state.query;
  
  // Will reset the page number
  posts.helper.setQuery(query);

  if (query === oldPostsQuery) {
    // the query didn't change so we need
    // to reapply the current page
    posts.helper.setPage(oldPostsPage);
  }

  posts.helper.search();
  helper.search();
}

You can also find an example in CodeSandbox.

Hope that helps, let me know if you have questions! :wink:

Awesome @samuel.vaillant! This worked like a charm! I cant belive I missed that I linked the second navigation to products instead of to the posts :slight_smile: