Filter by

Filter

Filter Items in a Collection List based on text content inside the Item
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Set up simple filtering systems with one filter group
Allow users to filter by Category, Service, Color, or any filter group you want.
Set up super complex filtering systems with many filter groups
Allow users to find exactly what they want in a long list of Collection Items.

Setting up a filter

First, define your filter groups in an array. An array is a list!

<script>
// In this example, we define 4 filter groups in an array and store it in a variable called myFilters

var myFilters = [
  {
    filterWrapper: ".filter-bar-category",  // parent wrapper of filter group1
    filterType: "exclusive"
  },
  {
    filterWrapper: ".filter-bar-color",  // parent wrapper of filter group2
    filterType: "multi",
    filterByClass ".color"
  },
  {
    filterWrapper: ".filter-bar-service",  // parent wrapper of filter group3
    filterType: "multi",
    filterByClass: ".number",  // class of the text that holds the filter info (optional)
    filterRange: true  // filter by number range (optional)
  },
  {
    filterWrapper: ".filter-bar-service",  // parent wrapper of filter group4
    filterType: "multi"
  }
]
</script>

Copy code

Then run the function below the array!

<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.6.js"></script>

<script>
// immediately/self invoked function. This function executes right away
(function() {
  // create a new Library instance and store it in a variable called "customBlogPosts"
  var customBlogPosts = new FsLibrary('.blog-posts-list')

  // define 4 filter groups in an array and store it in a variable called myFilters
var myFilters = [
  {
    filterWrapper: ".filter-bar-category",  // parent wrapper of filter group1
    filterType: "exclusive"
  },
  {
    filterWrapper: ".filter-bar-color",  // parent wrapper of filter group2
    filterType: "multi",
    filterByClass ".color"
  },
  {
    filterWrapper: ".filter-bar-service",  // parent wrapper of filter group3
    filterType: "multi",
    filterByClass: ".number",  // class of the text that holds the filter info (optional)
    filterRange: true  // filter by number range (optional)
  },
  {
    filterWrapper: ".filter-bar-service",  // parent wrapper of filter group4
    filterType: "multi"
  }
]

  // run the filter Library component on your instance
  
customBlogPosts.filter({
    filterArray: myFilters, // variable of the array we created above
    activeClass: 'button-active', // class that styles the active state (optional)
    
animation: {
      enable: false,
    }
  })
})();
</script>

Copy code

Paste this block of code before </body> tag of the page you're working with.

Code explanation

customBlogPosts

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

var myFilters

A variable we established to store our array. This is variable holds all of our filter groups establishes how the filter groups work. You can name this variable anything you want.

filterWrapper

The parent div wrapper holding the ui elements of a filter group.

filterType

Can be exclusive or multi select specific to that filter group.

exclusive

Allows the user to select 1 option inside the group at a time. The filter is exclusive to 1 option so for example clicking "red" would select all items with "red". If you then clicked "blue", "red" would be unselected.

multi

Allows the user to select multiple options inside the group at a time so that clicking "red" would select items with "red". If you then clicked "blue", "red" would remain selected. Both options will be selected at the same time. The filtered grid would show results that match both "red" and "blue".

filterByClass

Optional. The class given to the keyword text you want to target in search results.

This is useful when keywords from different group conflict. For example, "Kentucky USA" and "Kentucky Fried Chicken"

~filterByClass: ".state-text"~

filterRange

Optional. Default is ~false~. Set to ~true~ to use this filter group to filter a range of numbers.

For example, if you wanted to filter items between 20 and 66.

filterArray

Where we use our variable that holds array we created. In the example, this would be ~myFilters~.

activeClass

Optional. The class that will be added to buttons when they are in an active state.

~activeClass: 'button-active'~

filterReset

Optional. The class applied to a button that resets all active filters when clicked.

~filterReset: '.filter-reset-master'~

animation

Option to add animations and transitions for items leaving and entering the filtered grid.

enable

~true~ turns on animation on, ~false~ turns animation off (default: ~true~).

duration

Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).

easing

Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).

effects

Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).

filter-by

The data-attribute placed on the ui element to tell the Library what to filter by when that ui element is clicked.

filter-by works like a keyword search. The value of filter-by is what that ui element uses as a keyword search. Each ui element you want to use as a button inside your filter ui needs a data-attribute with a name of filter-by. This tells the Library what that ui element should filter by. The value of the filter-by data-attribute is the keyword you want that ui element to filter by. For example, if you wanted to search for CMS items that have "Website Designer", you would make the filter-by value "Website Designer". This keyword text must be inside the CMS item so the filter ui element can find it. Confused about how this works? Watch our How To walkthrough to see this working visually.

The value does not need to match the text of the button. It is not associated with any CSS style.

HTML structure and data-attributes

HTML Structure

Create div wrappers for each filter group. Put all UI elements (buttons, search, checkbox, etc.) that control a filter group in their respective filter group div wrapper.

Here we have created 3 filter groups: ~.filter-bar-category,~ ~.filter-bar-color~, and ~.filter-bar-service~. These are the class names we put as the value of the filterWrapper option when we create our array. The UI elements that control the filtering of that group are children.

Filter buttons can be deep nested inside the parent wrapper. They don't have to be direct children. Check out the Checkbox nested-nested-nested inside ~.filter-bar-service~.

We got you for full flexibility!

Data-attributes

Apply a filter-by data attribute to each filter button

We need to tell the Library what each button should filter by when it's clicked. We apply a data attribute with a name of 'filter-by' to each button that will update the filter. The "value" of that data attribute is the keyword that button will filter by.

A value of  "*"  will filter ALL items in that group (can be used to remove/reset the filter).

Types of html elements we can use to filter

<div></div>
'filter-by' is applied directly to the <div></div>.
<a> (link)</a>
'filter-by' is applied directly to the <a></a>.
<input> search
'filter-by' is applied directly to the <input> text field. Search bars always get "*" added as the value.
<select></select>
'filter-by' is applied to the <select></select> element and always gets a "*" value. The Value of the Choice is how each Choice is filtered by. The text visible to the user can be anything. In the above example "Blue color" is being filtered by the keyword "Blue".
<input> checkbox
'filter-by' is applied to the Checkbox element as seen in the screenshot.
<input> radio
'filter-by' is applied to the Radio Button element as seen in the screenshot.