Finsweets CSM filtering not working along side - List Load Pagination

Attributes
, ,
1

I have a blog page on my website that uses Finsweet’s CMS filtering, which works perfectly on its own. However, when I added Finsweet’s CMS Load pagination, the filtering stops working correctly.

When I click the “next” or “previous” buttons, the selected filter is cleared and resets to the “All” option, which I think might be because the page refreshes. Interestingly, the pagination number buttons seem to work as expected; this issue only occurs with the next/previous navigation.

Here is a link to the page on the site click a filter and then next to see issue

2

Hey @emilia, there are two separate things going on here — fixing both is what’ll get everything working together.

The first thing to tackle: you have v1 and v2 attributes mixed on the same elements, plus three scripts loaded at once (attributes@2, attributes-cmsfilter@1, and attributes-cmsload@1). v1 and v2 are not compatible on the same page, and those conflicting scripts will cause unpredictable behaviour even when everything else looks right.

Here’s what to remove:

From your Collection List element:

  • fs-cmsload-element="list"
  • fs-cmsload-pageboundary="1,1,1,1"
  • fs-cmsload-pagesiblings="1,1,0,0"

From your filter Form element:

  • fs-cmsfilter-element="filters"

From your script tags, remove both v1 scripts entirely. Keep only:

https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js

That single v2 script handles everything.

The second issue is your Next/Previous buttons. Your current “next” button is a manually built anchor tag with a hardcoded URL parameter (?c53894f7_page=2). That’s not how v2 pagination works — List Load needs the native Webflow Next and Previous pagination buttons to handle that navigation. It’s exactly why your numbered page buttons (which use fs-list-element="page-button" correctly) work fine, while next/prev don’t.

To fix it:

  1. In Webflow Designer, select your Collection List and enable Paginate Items in the Settings panel
  2. Use the native Next and Previous buttons Webflow generates — you can style them however you like
  3. Don’t wrap those buttons in extra divs, as that can cause the Previous button to disappear

What you already have correct and should keep:

  • fs-list-element="list" and fs-list-load="pagination" on the Collection List :white_check_mark:
  • fs-list-element="page-button" on the numbered page button :white_check_mark:
  • fs-list-element="filters" on the filter Form :white_check_mark:

Let us know how it goes after those changes :flexed_biceps:

3

Hi, thanks for getting back to me.

I’ve removed all conflicting attributes and added the correct script. After that, I reapplied Webflow’s native pagination, but the issue persists. When I click the “Next” or “Previous” buttons, it jumps back to the “All” button and deselects the active filter.

I have included the Webflow read-only link below, but if you need full acess let me know

Any help is much appreciated !

https://comments.webflow.com/comment/illuminate1?utm_medium=project_link&utm_source=designer&utm_content=illuminate1&project=79cc3109fec35ef56aa964895b132476

4

Hi @emilia

You correctly added the https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js

Only issue is there’s another instance of it just after this code block, the line after the last </script>

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'counter',
    (instances) => {
      instances.forEach((instance) => {
        instance.options.formatNumber = (value) => {
          return Math.floor(value).toString(); // no commas
        };
      });
    },
  ]);
</script>https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js

Get rid of it since it’s just plain text that now renders on the frontend

image
image1340×882 99.7 KB

You now need to make sure you are using the native Webflow previous & next buttons
To do this, select your Collection List in the Webflow Designer, go to Settings panel, enable Paginate Items
Make sure you use the Previous & Next buttons that Webflow generates