Building a Complex Filter System with Webflow CMS and F'n Sweet Library

In this tutorial, we’re going to explore how to build a super complex filter system using the F’n Sweet CMS library for Webflow. This filter system will be based on the text content within a collection and will allow users to filter the grid based on various criteria such as text search, radio buttons, checkboxes, and select options.

Understanding the Filter Component

Before we dive into the live example, it’s important to understand how the filter component works. It takes the text inside a collection item and uses it to filter the items in the grid. This feature utilizes the Webflow CMS to manage the collection items. Each piece of text within a collection item will serve as a way for that item to be filtered in the grid. The text content is controlled inside the Webflow CMS, where properties such as year, text content, color, toggle, and more can be managed. Changes made in the Webflow CMS will automatically update the text inside the item and, consequently, change how the item is filtered in the grid.

Visibility of Filter Options

It’s important to note that the text used for filtering does not need to be visible on the published site for the filtering to work. While the filters may be kept visible for demonstration purposes, they can be hidden on the published site. The key is that the text needs to be present on the published site for the filtering to be effective.

Live Example: Super Complex Filter System

Let's dive into a live example showcasing a super complex filter system made possible by the F’n Sweet CMS library in conjunction with the Webflow CMS. This system will allow us to filter the grid using a combination of a text search, divs, radios, checkboxes, and select options. All of these filters will work together, be configurable individually, and update the grid in real-time. This setup is incredibly easy to configure, especially when compared to systems like Isotope that would require extensive JavaScript and customization.

Setting Up the Filter System

To set up this complex filter system, we will begin by assigning classes to the relevant elements. We need to apply a unique class to each group we want to filter by. These groups include the text input, service buttons, color buttons, radio buttons for CMS, checkboxes for years, and a select input. Each of these groups will have a class that sets them apart and helps in identifying them for filtering.

Applying Class to Parent Wrappers

We’ll proceed by applying classes to the parent wrappers of each filter group. For example, a class will be added to the form block to identify the search parent, and classes will be applied to the other parent wrappers for filter groups such as services, colors, CMS, years, and select tests.

Adding Data Attributes

After applying the necessary classes, we need to add data attributes to the elements to inform the F’n Sweet CMS library about the filtering criteria. This includes specifying what each filter option should filter by. For instance, the text field will filter by asterisks (*) to indicate all content, while the various buttons and options will filter by their respective values such as branding, web design, development, colors, CMS properties, years, and more.

Configuring the Select Element

The select element requires a slightly different setup compared to the other filter options. We need to define the filtering criteria for each choice within the select element. This involves setting the text that is visibly displayed and the value that will be used for filtering. For example, a choice for 2019 will have the text “2019” and the value “2019” for filtering purposes.

Implementing the F'n Sweet Library

With the structure and data attributes in place, we can now move to the implementation of the F’n Sweet CMS library using custom code. Let’s walk through the necessary steps to integrate the library and set up the filter functionality through JavaScript.

Importing the F'n Sweet CMS Library

Before the closing body tag in the custom code section of the Webflow project, add the F’n Sweet CMS library to the project by including the real script file provided by the library.

Customizing the Project-Specific Script

Within the project-specific script, we can define the setup and behavior of the filter system. This involves creating a new instance of the FS library and targeting the collection list class. We store this new instance in a variable for use in the filtering process.

Defining the Filter Array

The heart of the filter system lies in defining the filter array. This array holds all the necessary information to instruct the library on what criteria to use for filtering the grid. This includes the classes of the parent wrappers for each filter group and the settings for exclusive or multi-select filtering based on the filter group type.

Invoking the Filter Component

Finally, we utilize the filter component of the F’n Sweet CMS library to apply the filter array and configure additional settings such as the active class for styling active filters and animation parameters for seamless visual transitions upon filter activation.

Conclusion

By following these straightforward steps, users can harness the power of the F’n Sweet CMS library to effortlessly create and manage a highly sophisticated filter system within their Webflow projects. This empowers them to offer a seamless and intuitive filtering experience for website visitors without the need for extensive JavaScript or complex custom code. The F’n Sweet CMS library simplifies the process and puts the control directly into the hands of Webflow users to efficiently manage and update their filter-based content.