▼
Streaming live at 10am (PST)

Why does pagination refresh page every time?

Design help General
#1

Hi,

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

image
image.png1563×839 98.4 KB

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
#2

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.

#3

@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
#4

This is a bug, it shouldn’t.

I ping @zbrah who’s using a workaround.

1 Like
#5

@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

26
Capture d’écran 2019-06-17 à 14.58.26.png719×1136 66.6 KB

And you put this id seamless-replace in a parent

Like this

1
1.gif248×912 223 KB

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,

3 Likes
#6

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:

#7

@RohanGanachari Yes Body sorry

1 Like
#8

@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) ?

image
image.png1915×943 122 KB

#9

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

1 Like
#10

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!

2 Likes
#11

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.