Smart filtering | list-filter

Attributes
1

I’m in need of some help as i want to smart-filter the current product-overview on: Shortlease zakelijk | Binnen 24 uur rijden | Bekijk ons aanbod

Here i want it as follows:
When a brand is selected, all the available brands need to be showed as well. But only the connected models, transmission-types, fuel-types and addition-types need to be shown for the cars available with the selected brand-filter.

This also needs to work the other way around:
When a model is selected, all the available models need to be showed as well. But only the connected brands, transmission-types, fuel-types and addition-types need to be shown for the cars available with the selected brand-filter.

2 problems i’m having is the pagination and the 100+ model-items inside of the CMS. This prevents

I hope you can help me! As i got it working with attributes version 1, but that code is not working anymore.

The current code i’m using:

2

Hey @Dennis_Unison! :waving_hand:

Smart cross-filtering for your car shortlease site is definitely achievable with Attributes v2 without custom JavaScript!

Attributes v2 has built-in support for this type of filtering logic. Here’s how to implement it:

  1. Remove your custom JavaScript entirely
  2. Use fs-list-element="facet-count" to show/hide filter options based on availability
  3. Add fs-list-load="pagination" on your Collection List for proper pagination

For your cross-filtering needs (showing only related models based on brand selection), use:

  • fs-list-field attributes on both filters and CMS items
  • fs-list-emptyfacet="hide" to automatically hide unavailable options
  • fs-list-filtermatch="and" for proper filter combination logic

For your 100+ model items, the pagination attribute will load all items before filtering runs.

Could you share your Webflow read-only link so we can see your current setup? That way we can provide more specific implementation steps for your case. :flexed_biceps:

@Support-Luis, @Support-Pedro or @jesse.muiruri can help if you need more advanced customization.

4

Hi Finn!

Thank you for your reaction. I will definitely try it out. But i think that’s not the way i want the filtering to look. I want it to be ‘standard’ looking as i have designed it as is. I’d love to hear if it is still possible with the current design :slight_smile:

Here’s my read-only:

5

Hi @Dennis_Unison

I’m looking into this, could you please share the previous code that was working with v1

Just need to see how to adapt it to accommodate v2

Thanks

6

Hey Guys,

Since my ticket is not yet resolved i was wondering if somebody can help me? :slight_smile:

7

Hey @Dennis_Unison

Here’s what I have at the moment
We’re working with 3 main elements

The List (The Cars)
The Filters (Brand/Model et al.)
The Filter Options (The dynamic options within the filters)

First install the finsweet filter script

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

Then load all cms items to the page, please confirm if this will work for you
Add fs-list-element="list" & fs-list-load="all" to .cms_list-wrapper

With your Collection List selected, open the Settings panel and check the ‘Paginate Items’ option. As shown below

Pagination
Pagination1600×900 123 KB

Select the Pagination, open the Settings panel and check the ‘Show Page Count’ option. Also as shown below

Page Count
Page Count1600×900 112 KB

Then for each individual car

fs-list-field="brand"
fs-list-value="brand-name"

As seen on this demo page List Filter for Webflow - Required Minimum Setup

Then for each filter options wrapper e.g. brand filters wrapper, model filters wrapper et al. which have the class .filter_wrapper

Select each item and add a text block element with the attribute fs-list-element="facet-count"

Set the text block as display:none

This will hide filter options with no results, when the script runs, it sees the facet-count element and calculates how many items match that filter option.

If the resulting count is 0, it hides the parent filter option entirely, effectively only showing the brand, model, fuel types available

Please confirm if this works

Thanks