Finsweet's CMS Filter tool is probably one of their most popular toolsets.
It allows you to dynamically filter CMS data using a Webflow-designed form as your filtering controls.
You can filter on;
- Specific categories, such as #tags or product categories
- Dates, including single dates and date ranges
- Text matches, such as a partial product name
Learn more:
https://finsweet.com/attributes/cms-filter
Filter UX
Radio Buttons
The label text itself is the filtered-matching content.
Button styling and a11y considerations can be handled well using Finsweet's cloneable or library, which has a11y filter elements.
Creating an "All" button;
https://forum.finsweet.com/t/how-can-i-add-and-style-an-all-button-for-cms-filter/123
Selects
Selects as range filters
https://forum.finsweet.com/t/cms-filter-number-ranges-with-select-field/2537
Special Notes
Using Dates
Your data can contain multiple individual dates and date ranges, and Finsweet seems to handle this collection of dates well.
Finsweet supports date-range filtering in the filter, so you can filter elements that are between a from and to date.
It also allows your filtered data to specify from and to dates, so that if the ranges overlap, it's considered a matched item.
Note however, that a date range in which the start and end date are the same will not work properly.
Progressive Filtering
In complex filter setups, it may be desirable to progressively filter your UX so that your filtering options are themselves filtered.
For example, a single list of all of the cities of the world isn't very user friendly. Ideally, you'd progressively filter by continent, then country, and then see the cities just in that country.
To some extent, simple arrangements like this are possible with multiple filters.
Demo & cloneable;
https://webflow.com/made-in-webflow/website/progressive-finsweet-cms-filter
Range Filtering
Range filtering has 3 possible scenarios;
- 1-N where a single value is specified in the filter, but the filtered results specify a range which that filtered value should match
- N-1 where the filter specifies a range, but the results have single values to match
- N-N where both the filter and the data identify ranges, and matches should intersect
Three possible types of ranges
- numeric range
- date range
- alphabetic match range ( e.g. aardvark to azimuth )
Date Range Filtering Problems
Finsweet Filter currently [ 2023-07-14 ] appears to have a bug which prevents date range filtering in the N-1 scenario and likely N-N as well.
However 1-N seems fairly reliable?
Notes;
https://forum.finsweet.com/t/datepicker-cms-filter-date-format-in-french/1054
https://forum.finsweet.com/t/load-filter-with-scripts/771
https://forum.finsweet.com/t/using-load-more-with-filter/1591
https://forum.finsweet.com/t/cms-filter-api-restart-collection-of-filterable-props/689
https://forum.finsweet.com/t/using-load-more-with-filter/1591
https://forum.finsweet.com/t/trigger-script-when-using-cms-load/1601
Advanced Use
Attributes API
Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.
https://finsweet.com/attributes/api
https://finsweet.com/attributes/api/cms-filter
https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data
https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data
https://finsweet.com/attributes/api/cms-filter
https://www.npmjs.com/package/@finsweet/attributes-cmscore
https://finsweet.com/attributes/api/cms-load
Styling
https://www.youtube.com/watch?v=mzHG5JwqB2M&ab_channel=thelazygod
https://www.youtube.com/watch?v=qq4uM0-R5BA&ab_channel=RuairiMcNicholas
