Building a CMS Library in Webflow

Webflow is a powerful tool for creating responsive websites without writing code. With the CMS library for Webflow, users can manage their content efficiently. In this tutorial, we will focus on the filter component of the F'N Suite CMS library for Webflow.

Understanding the Filter Component

The filter component in the CMS library allows you to use keywords to filter items inside your CMS collection. It enables you to control how the filtering operates within specific classes, making it a powerful tool for organizing and retrieving content.

Filtering within Specific Classes

Sometimes, keywords used for filtering may conflict with other keywords. The filter component provides an option to search for keywords only within a specific class inside an item. This feature becomes very powerful once you understand how it works.

Live Example

Let's start by exploring a live example to better understand the filter component. In the example, we have applied the filter to a search input, which is only searching within the class of "year." This means it will not filter anything with "project number" but only "year."

Searching with Filters

When using the search input, if you type a keyword that matches the "year" class, it will return all the matching items. For example, searching for "2020" will return all the items from the year 2020. Similarly, searching for "2019" will return all the items from the year 2019. This demonstrates the specificity of the filtering within the "year" class.

Customizing Filtering in Webflow

Now that we understand the concept of filtering within specific classes, let's explore how to implement this in Webflow through the Designer and Custom Code.

Implementation in Webflow

Designer View

In the Designer, we don't need any new data attributes or classes. We only need to be aware of the classes that we want to filter within.

Class Structure

We have specific classes that we want to filter within:

• Name: It holds project names like "project 9," "project 10," and so on.
• Number: It holds the project numbers (e.g., 9, 10, 11).
• Year: It holds the years associated with the projects (e.g., 2020, 2019, 2017).

Custom Code

We'll need to use custom code to configure the filter by class options for the specific filter groups we want to use.

JavaScript Array

Inside the custom code, we create a JavaScript array containing our filter groups. Each filter group has a filter by class option.

1. Search Input: We configure the search input to filter only within the "year" class. This explains why typing "15" did not return any results in the live example because the year class does not contain the number 15.
2. Year Checkboxes: We also set the filter by class option for the year checkboxes to filter within the year class.
3. Range Filter Buttons: For the buttons filtering by project names and project numbers, we use the filter by class option to restrict the filter within the number class.

By implementing these filter by class options, we make the filtering more specific and ensure it only operates within the defined classes in our CMS collection.

Advantages of Effin Sweet CMS Library

The F'N Suite CMS library for Webflow provides powerful features for organizing and filtering content effectively. By understanding and utilizing the filter component, users can streamline content management and make it easier for visitors to find specific information.

With the ability to filter within specific classes, users can create a more refined and targeted filtering experience for their website visitors. This feature is valuable for websites with extensive content libraries, making it easier for users to find the information they need quickly and efficiently.

In conclusion, the filter component of the F'N Suite CMS library for Webflow is a valuable tool for managing and organizing content. By leveraging filter by class options, users can create a more tailored and efficient filtering experience for their website visitors.

Incorporating these advanced features and functionalities in Webflow can elevate the user experience and streamline content management, making it an essential component for building a dynamic and user-friendly website.