Use this Refokus Tool to create one or more filter sets (also possible as individual CMS Collections) to filter results on a CMS collection list.
The filters are based on the core form elements (Input, Dropdown, Checkbox, and Radio Buttons) with which you can create any type of filtering UI, such as toggles, tags, tabs, switches, and anything else you can visually imagine!
Additionally, the input element can be used to create live search filtering results on the collection item.
[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]
Everything is made using custom attributes, so when we say “add” means “Add a custom attribute”.
Note: The “Identifier” can be any term you wish, the tool will ignore the text elements that don’t have at least one of those custom attributes. For example, in our demo we use [.c-tool_tag]r-indexed="Languages"[.c-tool_tag] to index the movie Language.
Now that you’ve connected your collection, and pointed out the searchable terms, you need to connect your filters with those identifiers.
In the case you want to specify a different term/value from the one in the Filter UI, you can do this by adding [.c-tool_tag]data-filter="value"[.c-tool_tag] on that element. For example, if you want to filter by “Spanish” but your checkbox says “Español”, you need to add [.c-tool_tag]data-filter="Spanish"[.c-tool_tag] to your filter checkbox (note that in the case of checkboxes, this needs to be added to the checkbox element, and not the checkbox field)
To avoid Webflow sending the form when you push “Enter” on an input, you can simply set the form action to [.c-tool_tag]/[.c-tool_tag].
By default, this tool displays all items that meet any of the selected filters (aka or Filter). If you need the filters to display items that match all of the selected filters, just add r-filter-additive="1" to the Filter UI wrapper (the same element where you added the r-filter-wrapper="1" attribute.)
This is to create a slider that shows a range from a value to another value.
To add pagination to your collection, just follow these 2 steps:
Configuring a custom empty state is easy. Just create a div and add [.c-tool_tag]r-filter-empty="1"[.c-tool_tag] after the collection. This div should be visible by default. The tool will hide it automatically.