Finsweet: Implementing the "All" Button
Add custom attributes to individual CMS Items
Today, we're diving into how you can enhance your filtering system in Finsweet by effectively implementing the "All" button. This feature is crucial for users who want to view all categories without toggling individual filters on and off repeatedly. Let's explore how to make this functionality seamless and user•friendly.
The Challenge
When setting up filters in Finsweet, especially when you have a diverse array of categories, the "All" button becomes an essential part of the user experience. Initially, you might find on Finsweet website they recommend adding the checked = “checked” attribute directly to the CMS collection items. However when you do this it will give all the items in the collection the checked attributes. Also each item inherits this checked attribute. I have seen many create a separate radio button and label that as “All". However for styling reasons this could lead to some issues down the road.
My Solution
To solve this, I adopted a strategy that involves integrating an "All" category directly into my CMS collection. Here's a step by step breakdown of how I accomplished this:
Modify the CMS Collection
In your CMS collection that houses your tags or categories, add a new category named "All." This step is crucial as it centralizes the control for displaying all items. Make sure the All Category is the first item in your CMS collection.
Adjust CMS Categories
Navigate to your CMS categories, add a new field, choose an ‘Option’ field, and name the label ‘Blog Active Filter’—or a name of your choosing. For the option, write ‘checked’. This option acts as a trigger for activating the “All” filter by default. Please note this option will only affect CMS items that have the ‘blog active filter’ option active. Therefore, apply this only to the filter you want to affect by default.
Configuration of the "All" Category
Next, we will select the item in our CMS to which we want to apply this option field by default. In our case, it’s the ‘All’ filter. We will set the custom attribute name to ‘checked’ and the value to ‘Blog Active Filter,’ which is dynamically imported from our CMS. This setting ensures that the ‘All’ category is selected by default when the page loads. Make sure you select the radio button and not the label. Remember we will only add the checked option to the All category.
Selecting the Right Control Element
Move to the specific CMS item you wish to influence within the blog and opt for radio buttons. Finsweet recommends using radios for a clearer and more distinct selection process. Select the correct item in your CMS and ensure the custom attribute named ‘checked’ is set to ‘blog active filter.’ This ensures that the ‘All’ filter will be recognized and activated when the page loads.
Conclusion
Implementing the "All" button in Finsweet can streamline the user experience by providing an effortless way to revert to viewing all categories. By incorporating an "All" category into your CMS collection and correctly configuring the associated settings, you can avoid common pitfalls such as attribute redundancy and ensure a smooth, user•friendly filtering experience. Feel free to tweak this setup based on your specific needs and the structure of your website. Remember, the goal is to make your content as accessible and navigable as possible, enhancing user engagement and satisfaction. You can also add custom styling to any individual item in your CMS using this method.
Thanks for reading, and I hope this guide helps you enhance your website's functionality.
