Streaming live at 10am (PST)

Seamless pagination with "pjax"


#1

Using the jquery-pjax library, it is possible set up paginated collections in a way that browsing feels snappier. Demo: https://seamless-pagination.webflow.io/#demo

Quick version of how jquery-pjax works:

  1. Listen for clicks on links with a certain selector
  2. Instead of going to the link, load the html data in the background
  3. Replace the specified chunk of html
  4. Use history.pushState to update the URL, so that refreshing the page / sharing a url works as expected

In this demo, everything inside the #seamless-replace div will be replaced with every previous/next navigation. It is possible to replace a smaller portion of the page, but with multiple paginated collections on the page we also needed to replace the other previous/next links.

Props to @mistercreate’s similar demo for the idea: What In Webflow 017 - 🤯 Barba JS … I’ve been excited for pagination to drop ever since seeing that!


Edit 2019-02-06T05:00:00Z@PixelGeek’s workshop yesterday covered this technique:


CMS Slider : A solution using pagination
Using Pagination for product carousel resets page to top
Pagination link click forces a scroll to top of page
#2

WHAT??!?!!? This is amazing! Thank you for sharing.


#3

The simplicity is the best part. :blue_heart:


#4

Great! Thanks a LOT :blue_heart:


#5

Hey @forresto

Thanks for this great snippet! It’s working like a charm here. One issue that I can’t seem to solve is that the hover trigger interaction becomes disabled after moving away the first pagination page.

This used to ONLY happen in the designer when using pagination, but the published page would keep the hover triggers just fine. Something about this code and what’s used in the designer appears to be in conflict with the interaction.

Any ideas if it’s possible to fix this in the injected code?

Read Only Link


#6

Thank you for sharing @forresto just want a needed/wanted. It breaks any interactions whenever you use the pagination, any ideas about that?


#7

I’ll look into that. That’s one of the main issues to consider before making this an official solution.


#8

Our Interactions expert hooked me up with the magic words to reinitialize interactions after the pjax transition happens. I added some bounce effects to the previous/next links in the demo and it seems to work. :cool:

  // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });

Pagination Issue
#9

Thank you @forresto and the Interactions Expert!!!
This code is so delicious, I have to dance.


#10

It worked like a charm! Thanks to both of you.


#12

Tips for code dummies like me:

Assign a div id of seamless-replace to the Collection div enclosing the pagination content.

Insert code into the before the /body tag section of the page settings - do not use an Embed element, it doesn’t seem to work.

Took me ages to figure the last tip out but got there in the end :grin:


#13

If you want to know why, it’s because that code expects to run after the jquery library has loaded. The code could live in an embed block, but you’d need to wrap it with some magic to make it run after jquery loads.


#14

I hadn’t seen this post, that’s great @forresto ! Thanks!


#15

So thankful I found this thread, but I don’t think I’m setting it up right. I need to change the ID of this element, correct?

36%20PM


#16

Hey @hirastudio

Place the #seamless-replace ID on the Collection List Wrapper. Hope that helps.


#17

Is it possible to do page transitions with this method?


#18

Hey @forresto I’ve noticed that another elements interaction stopped working after pressing the pagination buttons. The interactions inside the list is working fine but not my Navbar in this case. Any ideas?

Here’s my site centred.webflow.io The nav bar appears after a few seconds and after that I have a scroll interaction that makes it disappear when scrolling down and appear when scrolling up. But that isn’t working after you pressed the pagination. The hover interaction inside inside the list still works though.

Edit: on refresh, with the custom pagination url, the interaction works again. Strange…


#19

@matthewpmunger thanks, that worked! what’s the solution if you have multiple per page though?

@jorn that’s interesting. I have a scroll interaction on my page as well and it seems it’s not bothered by it.


#20

Hey @jorn there’s another step to keep the interactions working.


#21

@hirastudio Add the #seamless-replace ID to each Collection List Wrapper that is paginated. That should work.