CmsFilter with Select field

Hi There,

I’m struggling to the get the CMSFilter using a Select field to work on a project (for info the site uses Attributes v1 on other pages but I read this is fine to use v2 if v1 is not used on the same page).

Read only here
And staging link here

Any help much appreicated!

Cheers!

Quick update. I just duplicated the page that was using Attributes v2 and updated to use v1 and that works? Any idea why v2 is not working?

Hey @me13!

We see you’re having trouble with CMSFilter working with a Select field. You’re right that it’s perfectly fine to use Attributes v2 on a page where v1 isn’t being used.

The reason your List Filter isn’t working is that the Attributes script is loaded without the fs-list tag. In Attributes v2 the fs-list attribute on the script tag signals the library to automatically initialize the List feature on the page.

If the script is present but doesn’t include fs-list, Attributes will load but it won’t activate list behaviors (so fs-list-element attributes, filtering, results-count, etc. won’t be initialized).

Quick fix: replace your current script tag with the snippet above. List Filter should start working.

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

@Support-Luis or @Support-Pedro can assist further if you need more hands-on help with this issue.

Thank you @Support-Finn that is now working :slight_smile:

Although I now have an issue with the Empty State. I have added the fs-list-element="empty" to the Empty State Element but not seeing this display when no results after filtering? @Support-Pedro @Support-Luis

Hi @Support-Finn just wondered if you had seen this?

Hey @me13!

I really apologize, I missed your message

The native Webflow empty element only works if pagination is enabled AND there are at least 2 pages. That’s because we need the Next button in the pagination controls to be enabled by Webflow.

Try enabling Webflow pagination and make sure that there is more than one page. You can display the full rendered list with fs-list-load="all" or any List Load Method that you prefer.

Try this and let me know how it goes!