CMS Filters

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]

<script src="https://tools.refokus.com/cms-filter/bundle.v1.4.1.js"></script>

Everything is made using custom attributes, so when we say “add” means “Add a custom attribute”.

Connect the Collection

1. Identify the filters wrapper: Add [.c-tool_tag]r-filter-wrapper="1"[.c-tool_tag] to your Collection List element, the one that contains all the items to be filtered.
   

2. Identify the elements: Add [.c-tool_tag]r-indexed="identifier"[.c-tool_tag] to each element inside your Collection Item that you want to be indexed (searchable).
   

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. 

Connect Filters

Now that you’ve connected your collection, and pointed out the searchable terms, you need to connect your filters with those identifiers. 

1. Identify Filter Wrapper. Add [.c-tool_tag]r-filter="identifier"[.c-tool_tag] to the parent element (wrapper) of the Filter UI (where your input, checkbox, select, etc. are)  using the same identifier term as you did in your collection.
   

Extras

Custom Value Filters

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)

Prevent Default functionality

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].

Additive Filters

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.)

‍

Range Slider

This is to create a slider that shows a range from a value to another value.

• Create one div with the attribute [.c-tool_tag]r-filter="range"[.c-tool_tag], the tool will render the range inside. 
• To indicate the min and max values add [.c-tool_tag]min-value="1888"[.c-tool_tag] and [.c-tool_tag]max-value="2021"[.c-tool_tag] 
• To indicate if it has two handlers add the attribute [.c-tool_tag]double="1".[.c-tool_tag] 

• To show the value of the ranges when moving the elements, Add [.c-tool_tag]r-filter-range-min="1"[.c-tool_tag] and [.c-tool_tag]r-filter-range-max="1"[.c-tool_tag] to indicate the elements where the number should be shown.

‍

Pagination‍

To add pagination to your collection,  just follow these 2 steps:

• Add [.c-tool_tag]r-filter-pagination="itemsPerPage"[.c-tool_tag] to the Filter UI wrapper (the same element where you added the [.c-tool_tag]r-filter-wrapper="1"[.c-tool_tag] attribute.), replacing [.c-tool_tag]itemsPerPage[.c-tool_tag] with the number of elements that you want to display per page.
  

• Create a div and add [.c-tool_tag]r-pagination="1"[.c-tool_tag]

• You can create custom arrows for pagination by adding [.c-tool_tag]r-pagination-arrow-prev[.c-tool_tag] and [.c-tool_tag]r-pagination-arrow-next[.c-tool_tag] to the respective elements.

Empty State

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.

‍