Why does pagination refresh page every time?

Hi,

Every time you click next / previous, the page is refreshed on the the live site.
But in preview mode, it works as expected.

Check it out: https://www.online-lubricants.co.uk/products-collection/linelube-atf-dexron-ii?42c0a5d7_page=1

Also, is it possible to style the pagination number field?

Thank you. :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/online-lubricants?utm_medium=preview_link&utm_source=designer&utm_content=online-lubricants&preview=606df8459450b2cb45518e1c7cc1aea2&pageId=5cee803d3c0d6c2e4989a6e1&itemId=5cee803d3c0d6c2b8789a866&mode=preview
(how to share your site Read-Only link)

2 Likes

In preview mode, it also reloads the page but as it’s a page inside of the page (like an iFrame inside of the Designer tool), you notice it less.

@vincent But on a published site, the page refreshes back to the top. How to prevent this?

In preview, the pagination section stays in the same view-port.

1 Like

This is a bug, it shouldn’t.

I ping @zbrah who’s using a workaround.

2 Likes

@RohanGanachari, yes you put this code in the body of your page :

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
    // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });
</script>

<!-- End seamless-pagination custom code -->

Like so

And you put this id seamless-replace in a parent

Like this

Note that if you have more than 1 collection you want to paginate in your page, you need to put all of the dynamic list in the parent with this id.
Hope this helps,

13 Likes

Thank you, @vincent for tagging @zbrah.

You mentioned this, but in the image, the code is placed in the body. So is it head tag or body tag? :upside_down_face:

1 Like

@RohanGanachari Yes Body sorry

1 Like

@zbrah Just to be clear, can I assign the seamless-replacetag to multiple elements (2 divs, in this case) ?
Or, must I assign the tag to 1 element only (grid, in this case) ?

@RohanGanachari nope, one id per page.
So here only 1 element (your grid) :slight_smile:

1 Like

Hey @zbrah, this is a pretty good work around, but I have an issue.

A client has asked me to build a page with multiple CMS filled carousels, which use pagination. Your workaround is great for just one, but how can I get the solution to work for multiple pagination elements? Cheers!

3 Likes

Hello @Ashley_Hewins,

The solution is to place the ID in a parent element that contains all of the CMS lists that you want to have seamless pagination. The easiest solution is to just make a div block, put all of your sections with CMS lists into it, and then add the “seamless-replace” ID on that parent div block.

Thank you very much! this worked!!!

Hey, I applied this custom code to my project, but it doesn’t quite restart the animations.
Also, I’m using Finsweet custom Pagination attributes and it removes them when I click on next/previos. Any idea why this happens?

Read Only: Webflow - Wavescape

Great Solution! So helpful! Thanks!

Baffling that this isn’t just natively how Webflow functions, or even just with the option, because paginating is made to be quite useless without this functionality in most areas.

That said, anyone have any idea why this isn’t working for me? I followed it step by step:

CleanShot 2023-03-06 at 22.21.16@2x

wondering if the document pagination area also needs to have the class “w-pagination-wrapper”?

EDIT:
Yeah, I had to update the class name to “pagination a” for me.

That said, just learned you can’t have any “on scroll” animations on or it breaks, because it doesn’t realize the page has already scrolled to that view. Bummer of a tradeoff :frowning_face:

Yeah, found this video and it’s the same issue:

The loading more is also super slow, is there a way to add in a loading indicator or something upon button press?

Appreciate the help!
Alex

1 Like

this works for me, thanks

This is beautiful. Just like one would expect the functionality to work in the first place :slight_smile: Thank you! @zbrah

I’m having an issue with this hack where on mobile the pagination jumps where the buttons are and not to the top of the CMS section.

Works fine on desktop but not mobile