Hello,
I’m working on a component library and I plan to use the components feature as much as possible.
I have a component that contain few simple elements like a title, a description and a collection list.
On some pages, the list will display some items with a specific category (cms field), on some pages a different category.
How could I add a parameter to my component that would allow to filter the list depending on this parameter?
Thanks in advance.
Hi Amaury,
As far as I know, you can’t create a parameter in a component that serves as a filter value.
The only thing i can think of is using Finsweets CMS filter system. This could give you the possibility to link each collection list to a CMS item which would serve as attribute value to filter the list.
I haven’t tried this yet but maybe it helps you in de right direction!
You can use custom code to achieve this.
Your component property would be e.g. a string, and you’d emit that into a hidden text element.
Your custom code would then take that text element and use it to filter your collection list.
Here’s a library that can support the filtering step.
Advanced Element Filtering - Sygnal Attributes | Designed for Webflow
As Rory suggests, you might be able to accomplish that with Finsweet’s as well, although it may need you to use an INPUT field for the filtering process.
Did you instead try to go the simple route of just using Component properties per instance:
You may be over engineering this by making it so dynamic if you’re setting the parameter within the component itself - or not, I don’t really know what you’re trying to accomplish.
But if not, just set this on the pages that need the customization and your done.
Hello,
Thank you all for the answers, I’ll read the documentation of both the solution that you’ve provided, but at a first glance, it seems to be about filtering from the front-end, am I right? @RoryVB, @memetican.
To be more explicit, I have this kind of component:
I’ve simplified it for the sake of the example, but I’ll have many editable part, I also have a footer, etc…, and a list where the items come from a CMS collection.
The items will always come from the same collection, but shouldn’t use the same filter.
I must admit that I don’t see how to use the Component properties for this, even though that’s what I would want to do.
For anyone wondering about this - I had the same issue, there’s no good solution for this. The workaround I used relies on the visibility setting. Visibility can be a component property. So, I created about 5 variations with 5 different visibility names, and now I toggle them on and off based on which one I want to show. I guess if it would be more than 5 or 10 I’d opted for another solution, but for this size it will do for now.
