Building Custom Filters for a Collection List in Webflow

In this tutorial, we will continue building on the attributes, plus custom code to feed external data inside a collection list in Webflow. Let's recap what we built in the previous video. We used a fake store API that returns fake product data, and we used JavaScript API from attributes to fit that data inside the collection list. The collection list is able to be sorted and paginated, and now we want to dynamically create all the filters so we can also filter this list.

Code Recap

In the previous code, we fetched the instance and then the data from the template element and external data. We used this information together to create new items and add them inside the collection list instance.

Accessing CMS Filter API

Now, we will be accessing the JavaScript API from the CMS filter because we will need this to populate and sync the radio buttons that we'll be adding. We'll access the CMS filters instance and continue from where we left off in the code.

// Accessing the CMS filter APIcms.attributes.push('webflow.attributes.push', function(cms) {  // Callback for CMS filter  cms.filters(function(filters) {    // Getting the filter instance    var filterInstance = filters[0];    // Getting the template element and its parent    var radioTemplateElement = filterInstance.form.querySelector("[data-element='filter']");    var wrapperElement = filterInstance.form.querySelector("[data-element='wrapper']");    // Removing the template radio element    radioTemplateElement.remove();    // Collecting all the categories of the products    var categories = collectCategories(products);    // Creating new filter radio for each category and appending them in the wrapper    categories.forEach(function(category) {      var newFilter = createFilter(category, radioTemplateElement);      wrapperElement.appendChild(newFilter);    });    // Syncing the CMS filters instance to read the new filters data    filterInstance.storeFiltersData();  });});

Steps Explained

1. We access the CMS filter API and push a callback for CMS filter.
2. Within the callback function, we get the filter instance and the template and wrapper elements.
3. We remove the template radio element as we don't want it in place.
4. We collect all the categories of the products using the collectCategories function.
5. For each category, we create a new filter radio using the createFilter function and append it to the wrapper element.
6. Finally, we sync the CMS filters instance to read the new filters data.

Refactoring the Code

Now, let's refactor the code. Instead of pushing two different callbacks, we can just push one where we get the filters instance and from the filters instance, we get the list instance.

// Refactored codevar filtersInstances;cms.attributes.push('webflow.attributes.push', function(filters) {  // Getting the list instance from the filters instance  var listInstance = filtersInstance.listInstance;  // Rest of the code remains the same});

This refactoring allows us to access the list instance from the filters instance, providing more convenience.

Testing and Verification

After refactoring the code, we can test it to verify that everything is working as expected. We can check if the filter creation and syncing are functioning properly and that the sorting and pagination are still working as before.

// Testing and Verification// Load the filters and verify the functionality of sorting and pagination

Upon testing, if everything works as it should, we can consider the implementation a success.

Conclusion

In conclusion, we successfully built custom filters for a collection list in Webflow using JavaScript API from attributes and the CMS filter API. The code is now more organized and easier to maintain, demonstrating the power of Webflow for creating dynamic and interactive web experiences.

We encourage you to follow along with the tutorial and test the functionality on your own. The links to the repository, documentation, and the published site are provided in the description.

Thank you for reading and watching. If you have any comments or questions, feel free to leave them below. Don't forget to like and share this tutorial. Happy coding!