Pagination and Tabs Switching Issue

Here’s a video of my issue: Loom | Free Screen & Video Recording Software | Loom

Page: https://www.woodnotedesigns.com/wedding-themes

  1. On the mobile version, when I click next on one paginated collection, the other paginated collection also switches pages.

  2. On both desktop and mobile version, once I’ve pressed next on any of my other paginated collections, I couldn’t switch through my tabs anymore. I have to skip pressing next on the paginated collections so I can switch through my tabbed section at the bottom.

  3. Random blanks in grid collections. (sitewide where grid collections appear: https://www.woodnotedesigns.com/wedding-themes and https://www.woodnotedesigns.com/sets/our-perfect-day

Read Only Link: https://preview.webflow.com/preview/woodnote-designs?utm_source=woodnote-designs&preview=87d952952fc641ad2f6397027e07493c&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

We need some CMS experts here: @webdev @mattvaru @vincent

1 Like

Hey Carlotta! Thanks so much for recording the in-depth video on this issue. The details are super appreciated.

In regards to the tab issue and the buttons not working, I’m going to have to play around when I get some more free time soon and see what’s going on, but I’m going to tab some Webflow staff members to see why this is happening - that’s odd behavior. @Waldo @rileyrichter @cyberdave

In regards to your random blanks in your grid, might I suggest setting a width on the Collection Item 4 class within the Design Sets Template? Try setting a width of 48% percent on that collection item and see if that resolves the issue. After that, apply flex to your Tag Collection List class and set your settings as follows:

Tag%20Collection

I tried it in the Designer and it looked like it worked.

Let me know if this resolves your issue on this page and I’ll take a look at the other pages when I get a little more time! :slight_smile:

I’m not sure why the 48% width?

Hi there — 48% was arbitrary, but I wanted to set it to something close to 50%. 50% works great if you have no margin on your element that has the 50% width, but if you have margin (say, like 10px or so on each side), 50% would be too wide and force the element to wrap.

Does that make sense? I’m away from my computer right now but I’m happy to explain it in better detail later on.

Oh. I had margins on the section level so I thought it was redundant. I put it on there anyway just because you said so. hahaha

Hey Matt,

I checked and making it flex didn’t seem to work. so I just did 6 items with 33% width, that seems to work for some reason. Also any help with my previous/next issue??? It’s been awhile.

so I spoke to one of the mentors from the fb group and we found that the code to make it switch seamless was missing some elements and we associated the ID to my container. So now when I switch through pagination, it doesn’t switch the other CMS lists anymore. I’ll reference the correct code below.

there is still one issue though:
Now when I switch through my tabs’ pagination, it would:

  1. switch to the next page
  2. but would go back to my main tab

Like for example, if Full Suite is my main tab, I go to Save the Dates and switch the pagination in the container there, it would switch the page but as it reloads to switch, I find myself back viewing the Full Suite tab as the active tab – not Save the Dates.

How do you make it so that it stays in the correct tab?

go to the last section of this page to see what I mean: https://www.woodnotedesigns.com/wedding-ideas

@Waldo @rileyrichter @cyberdave @mattvaru @webdev


Code for seamless switching:

<script src="[https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js](https://l.messenger.com/l.php?u=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery.pjax%2F2.0.1%2Fjquery.pjax.min.js&h=AT0UjShTLLkXKr34RCo18cMFmSNmUo4FKwsaxFTis0NvNsFbim3ql0Ir6YRNnRJrPNjsVqPvZJla59ucUhTClijZWrPCSbsupJgGZb0x6GHwb8L6BQlHGmrxLNjK3uuXnCor6TLP)"></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();

window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require( 'ix2' ).init();
});
</script>

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

ID: seamless-replace

1 Like

Would love a resolve for this issue as well!

OK I thought the issue with seamless replace and tabs was resolved but not really. You’ll pop back to the original tab but once you’re back in the correct active tab, it’ll scroll through the pagination sequence as intended.

Not sure if that helps pinpoint the issue or not…

Yes, as I previously noted, there’s still 1 issue left to fix… but my mentor provided a resolution:

In this code below, you would apply an ID on each collection wrapper and then add it on here with # in the front:

var containerSelectors = ['#stuffed', '#wooden', '#soft', '#hard'];

This allows the refresh to happen on just that container.

All thanks to my mentor!

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

<script src="[https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js?fbclid=IwAR0s9feyYLuV5fmdOWGyMgel-NTq4g_r1FyPU8WI5P1FvyU6CsIcbUkRj1U)"></script>
<script>
var containerSelectors = ['#stuffed', '#wooden', '#soft', '#hard'];

containerSelectors.forEach(function(id) {
$(document).pjax(
id + ' ' + '.w-pagination-wrapper a',
id,
{
container: id,
fragment: id,
scrollTo: false,
timeout: 2500,
push: false
}
)
});

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

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

You’re welcome @cpura ! :blush:

I hit a snag somewhere. The page still reloads and goes back to the main tab, although it does separate the pagination page scroll-through number (page count).

Here’s my code:

<script src="[https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js?fbclid=IwAR0s9feyYLuV5fmdOWGyMgel-NTq4g_r1FyPU8WI5P1FvyU6CsIcbUkRj1U)"></script>
<script>
var containerSelectors = ['#websitec', '#logoc', '#productc', '#servicesc', '#checklistc', '#projectss'];

containerSelectors.forEach(function(id) {
$(document).pjax(
id + ' ' + '.w-pagination-wrapper a',
id,
{
container: id,
fragment: id,
scrollTo: false,
timeout: 1000,
push: false
}
)
});

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

});
</script>

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

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.