Multiple Nested Lists with CMS Combine and CMS Filter

[michaellee2245]

I’m hoping you can help me solve an issue I’m running into. My company needs to create a resource library. In order to do this and work around Webflow’s limitations I need 3 attributes combined – CMS Combine, CMS Filter, CMS Nest. We have several collections that all need to be combined into one list, we need to filter that list and we need to nest the multi-reference field into each collection list that’s being combined so that we can filter the lists.

I know that you can’t use all three of those Attributes together. So I settled on using CMS Combine and CMS Filter together and utilized this solution – Multiple Nested Collections – to have multiple nested collection lists on the page. However, even though I have the solution implemented properly and I can see the reference tags and the tags have the correct CMS attribute to allow the filtering to work, it is not filtering based on the Tags.

The way we have the page set up currently is the ideal way for us to have it. So if there is something I’m missing or a solution we can figure out to mesh the two systems together and allow the lists to be filtered, that is what I’m looking for. Do you have any thoughts or solutions on how I can get these to talk to each other?

Here is the read-only link of the Resource Library web page I’ve built – Read-Only Link

and here is the live page – https://www.award.co/resource-library-updated

[barrybaris]

Hi @michaellee2245 So it would be my pleasure to help you out with Attributes. I’m just trying understand your problem and trying to figuring out the error why it is not working. Just before I explain you my solution could you please test it out first with Automated Support Service and let me know if you get any errors?

Attributes Support

Another question would be, are these tags/categories gonna be visible in the live design? I reckon not? then you could just them add in a collection list instead of embed solution.

I can see that your form block resource-filter_form-block
is not wrapping your collection lists resource-lib_items-container. Perhaps you can try to nest your collection lists within the form block

Just let me know and we can figure this out

Best,
Barry Baris

Edit: I see that you are currently updating the site and it was actually working, filtering for a while.

[michaellee2245]

So using the Automated Support Service it is telling me that the fs-cmsfilter-field=“categories” is found but it’s not on the right element. It’s telling me to move it to the Checkbox Label. However, I already have it on the Checkbox Label, I’ve triple-checked, so I don’t know why it’s giving me the error. I’ll attach the images to show that I’ve done it properly.

Now, my first filter has an attribute of fs-cmsfilter-field=“resource-type” and it is working properly on the exact same setup.

The tags will not be visible on the page, you are correct. I initially tried adding the tags via a nested collection list. But since Webflow only allows one nested collection list per page and I have 4 collection lists being combined it would only allow me to filter one of the collection lists.

[michaellee2245]

The resource-lib_items-container is just the layout portion of the content. It doesn’t need to be nested within the form block element.

Just for good measure though I did nest it in the form block, published and tested it and the filtering still didn’t work.

[Support-Luis]

hey, @michaellee2245 you can now use the three solutions on one page using some custom code. Here is how to make it work using all Attributes solutions.

1. Set up CMS Nest with this guide

2. use this CMS Combine Script

<!-- [Attributes by Finsweet] CMS Combine -->
<script defer fs-attributes-preventload="true"  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmscombine@1/cmscombine.js"></script>

3. add this code to your </body>, this will delay the CMS Combine script until all items are nested

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsnest',
  (listInstances) => {
    console.log('Items Nested Successfully!');
    window.fsAttributes.cmscombine.init();
  },
]);
</script>

4. your lists to nest will have the fs-cmsfilter-field = IDENTIFIER on the text element of each item and the fs-cmsfilter-element = list attribute will only be needed on your first list.

Feel free to message me if you need any help

[michaellee2245]

Okay a couple of things here.

First, Thank you @barrybaris for your help troubleshooting this. I added the fs-cms-filter=“any” attribute to the checkbox label and now even though the Automated Support is saying that the “categories” is not on the Checkbox Label, the filtering system is working as expected. So, it appears to be a viable solution the way I’ve set it up.

Second, thank you @Support-Luis for sharing that all three attribute solutions can now be used on a page by implementing CMS Nest with custom code! This will be very helpful as I know if I implement it this way the filtering should work and be stable without wondering if things aren’t working because I’m trying to mash two systems together.

Thank you both for your help!

[barrybaris]

You are welcome @michaellee2245, sometimes simple solutions are the best solutions. Surely I would def suggest the most professional way for longterm as @Support-Luis explained. That’s something I also didn’t know that and learned it just now! I’ve had the same issue for a project back then

[Support-Luis]

@michaellee2245 you are welcome! If you go the custom code way in the future please don’t hesitate on messaging me with any doubts

[michaellee2245]

So I went ahead and implemented the Custom Code solution and it took me awhile to figure out everything and where to add all of the attributes but I finally did and the filtering is working like a charm. If anything breaks or I need additional help on this I’ll reach out.

Thanks again!

[natalie]

@michaellee2245 I’ve been working for HOURS trying to get all of my collections to combine, nest and filter. I’d love to chat if you’re willing to share your solution!

@Support-Luis has been super helpful so far, but I’m still running into roadblocks and I can’t figure out the solution. I have 9 collections of different types of resources on one page that I’m trying to connect to their tags so that they can be filtered. It seems like it should be so simple, but I’m about to chuck my computer out the window, lol.

This is my read-only link.

Per Luis advice, I even tested trying a new page with only the nested attribute and it’s still only working for the blogs.

Thanks so much in advance!!