CMS Filter
Advanced filtering for your CMS content with sorting and pagination. Dynamically adjust filters based on search results for a better user experience.
Required attributes
This is the form that will host all of the filters, this can contain checkboxes, radio buttons, text inputs, and selects.
This will be the CMS collection list that we will be filtering
The Category value relates the filter element to the correct data attribute or element within the Webflow CMS list.
The Category will define a filtering group, the value can be whatever you want, but they should be descriptive, like "Category", "Price", "Name", "Author", etc.
This is how the Filter elements match the items within the CMS List.
To improve on performance we are utilizing data attributes in order to filter the elements within the CMS collection.
To do this in the Collection List Idem we can add data attributes in the following way:
If we have the category "wt-cmsfilter-category" with a value of "Author" then we need to add a data attribute like data-author with the Author Name as the value; This will let CMSFilter know which is the correct filter to apply.
we can filter by as many values as we want and it prevents us from the need to add additional hidden elements within the collection items.
Optional Attributes
This is a REQUIRED attribute to get the pagination options to work.
The element does not have to be visible for the pagination to work but it do need to be enabled.
If no options are added to the pagination-wrapper by default the functionality will run as load-all and will gather all elements in the collection.
Tat being said, if this element is not set the filter WILL work but will only filter the available elements rather than all elements in the list.
Currently 2 options are available:
paginate: Will handle pagination same way as webflow's pagination works. It is recommended to add a next/previous buttons if this option is selected.
load-all: if this value is set then all elements within the collection list will be loaded.
Though this elements come by default on Webflow we are not using their default functionality in order to go to the next/prev page.
This can be any element on the page.
This class will be added to any element that is currently an active filter (checkbox or radio only)
This sort element doesn't need to be within the same form block that contains the filters, it can be anywhere in the page.
The category names used to sort here MUST NOT contain any sort of dashes (-) When adding the sort there are some options that can be added:
- CATEGORY-asc
- CATEGORY-desc
This element connects 2 fields to set both a starting and ending values for filtering.
This element has 2 possible values:
- from
- to
When added the tag template will be hidden until a filter is selected, once a filter is selected the selected filters will show up as tags inside of the parent of the tag template.
This is the text within the tag template that will show the filter categories
This is used in order to set the close / exit / remove button on a filter tag
Use this attribute to set a trigger that will clear all filters on click.
This element will show the number of filtered results
Specifies an element to display when no results are found.
This element will display the current page out of x in the pagination which is taken straight from the pagination element on Webflow.
In order for this to work the default pagination MUST be in site, no matter if it is hidden.
If this attribute is used, Webflow's default pagination will be removed.
Adding this attribute will allow for the elements within the CMS list to get their Webflow animations reset while updating the list.
Working examples