Tag styling per CMS Filter Field (possible solution via Attributes API)

Attributes
1

Hello, my client would like to change styling of the currently selected individual tags based on which fs-cmsfilter-field the tag relates to.

For example:

Category field tags: blue background, dark blue text
Search field tag: Violet background, Purple text

I’ve tried using fs-cmsfilter-tagcategory and fs-cmsfilter-tagformat but found that they only change the inner text which I cannot target via CSS.

Upon looking into a javascript solution via Attributes API I got a little lost, and wondering if I can get some support for this use case, please?

2

One possible solution for future iterations of Attributes would be the ability to override the default tag template (set by fs-cmsfilter-element=tag-template) for specific Filter fields/search.

3

Hey @timd! I’ll add this as a feature request for CMS Filter v2. If you have a link where you are trying this I can help you if you share the links

4

Thanks, @Support-Luis, the project share link is below.

Ultimately though I just need to know how to listen for an update ie. when filters change, I can then run some javascript to get me through.

Webflow - YellowCanary Master

5

Hey @timd! Sorry for the late reply. You can read more about the CMS Filter API here, I believe the renderitems event will be what you are looking for as this event fires each time items are rendered after a filter is applied.

6

Thanks @Support-Luis , that was what I was looking for. I’m going to write some javascript that checks the inner text of tag for filter label/category and then styles accordingly.

Is it possible to add a feature request for ‘Tag Template per filter-field’ please?

7

Hey @tim! Great to hear this can solve your issue!

I can add a feature request for CMS Filter V2 but we do not have an ETA for this :slight_smile:

8

No worries, thanks @Support-Luis