CMS Filtering a Multi-referenced collection

Attributes
,
1

CMS Filter + Multi-reference Lists

Hey folks!

I’ve spent a many number of days exploring videos / guides / discussions and I’m stuck. I’d love to get some pointers from the lovely community here. I’m new to Webflow so please excuse my limited technical knowledge.

I’m working on a Products page for browsing an extensive catalogue of furniture products. The filter fields include:

  • Category (single-select field working as expected)
  • Range (single-select field working as expected)
  • Type, e.g. curved / corner furniture (multi-reference field not yet working)
  • Installation Method, e.g. free standing / wall mounted (multi-reference not yet working)

I’ve tried a number of solutions so far, such as:

  1. Separate CMS collections for Types and for Installation Methods. Plugged them into the Products_feed-item cards as 2 multi-reference CMS lists and styled them as required. The relevant types / install methods were recognised, and filters worked somewhat, but it was rather buggy. Webflow also wasn’t happy with this solution (due to more than 1 nested collection).

  2. I compromised and collated the Types & Installation Methods collections into a single multi-reference collection which I renamed as the “Features” collection. I removed the 2 multi-reference lists that I had plugged inside Products_feed-item cards and replaced it with a CMS Nest solution.

  • The CMS Nest solution is working, I followed the documentation and now the relevant “Features” are showing as tags in each Products_feed-item card.
  • On the Product template page I added the “Features” field-identifier to the tags. I can tell the CMS filter solution is recognising them since when I toggle the working Category and Range filters the is-emptyfacet styling is working as expected.

Here lies the problem, the “Features” filter checkboxes can’t be activated. When clicked, nothing is happening, and I’m running out of ideas. :sweat_smile: It’s important for me that I deliver my client a scalable solution and so I figured a multi-reference field would be more intuitive than including each and every feature as a single-select field in the Products CMS collection items. Keeping this as a last resort.

Site URL

Video/Screenshots

image
image580×601 10.5 KB

Example Products_feed-item card, including tags in the top-left of the thumbnail.
(These are the values I want to filter) Currently implemented using CMS Nest.

I have a feeling it’s something small that is easily fixed and I’m probably not the first person to ask this question! Any suggestions are welcomed, and thanks in advance for your support! :heart_hands:

Alex

2

Hey @ablumeinfeld! I have some good and bad news.

Good news: I can click the filter with some JS via the console, and it seems to be working as expected. There may be a structure-related issue preventing us from clicking the actual button. Below is a quick Loom showing the list filtered via the console.

Bad news: It seems that Webflow is currently down, and I cannot load the read-only link to take a closer look at the issue.

I’ll get back to you as soon as I can!

On another note, I see you have some v1 scripts on the page. Please remove them to avoid any issues between script versions as they are not compatible.

1 Like
3

Thanks so much @Support-Luis, I’m relieved to know that the filter is in fact working!

I was having issues with Webflow yesterday as well.. seems to be working for me now.

I’ll cleanup the v1 scripts - they came along with the Relume component I used.

Keen to learn where I’ve gone wrong, when you get a chance to have a closer look!

Cheers

4

Update: Fixed! It’s all working as expected now.

You mentioned a potential structure issue, and that pointed me in the right direction!
Turns out in the filter group that wasn’t working, the div wrapping the checkboxes was not recognised as a checkbox field, just a div block. So i replaced it and all is good!

Thanks for your help! It was indeed a small issue and easily fixed :joy:

2 Likes
5

That’s great to hear @ablumeinfeld! Please let me know if you encounter any other issues! :flexed_biceps: