Streaming live at 10am (PST)

Any known workarounds for nesting collections? Need to show tags in cards

I just ran into the limitation for nesting dynamic lists inside each other. This is killing me!

My client needs a landing page with a dynamic list of project cards. In each card, I need to show associated tags for the project (which is another collection, connected to projects with a multi-reference field).

Essentially this is what I need to accomplish:

Are there any known workarounds to do this?

1 Like

Hi @helmsmith,
Yes, this is a pain. According to this page it is not possible at the moment:

At the moment, you can show multi-reference field values only on a Collection page, and not within a Collection list. Support for nested Collection lists is planned. Vote for and subscribe to status updates of this feature request.
https://university.webflow.com/article/multi-reference-field

I’m wondering if you can solve this by using custom coding (jQuery), adding invisible collection list with the tags and somehow make the relation, but I doubt that this approach will succeed.

You will probably end up adding the tags in a separate text field as well, besides the multi-reference field. Maybe you can automate this process with Zapier, but I’m not sure if you can trigger a Webflow event into another Webflow event (when project item = published, update the extra tag text field with multi-reference tag input)…

Sorry for my thinking out load method as a reply. I’m curious though how this can be solved.

1 Like

How many tags do you have for each project? If its many My work around this ots not a good solution

each project could have up to 5-7 tags potentially, though i’d be glad to limit it to 3 or so on the landing page if that helps with the workaround

The you have to create 3 Fields using referense not multi reference. Then the data can be displayed. Multi reference only works for filtering

1 Like

The primitive workaround I use is:

  1. Create a rich text field in the collection item editing panel.
  2. Hand type the same items that are in the multi-reference field, and then link each of them to the same collection items in the multi-reference field.
  3. In the page displaying the list of collection items, insert a rich text field which pulls the text from #2 above.

There must be some better way, but I am not a programmer and I haven’t found a solution on the forum yet.

Update: another option would be to create a multi-reference field in order to link collection items; but then also create single reference fields (which can be displayed within lists), and duplicate the links. May be quicker, but also you could hit the # of reference field limit.

1 Like

Hey JT, I’ve been struggling with this exact same problem. So far I’ve found four approaches that work OK with tags. All of the require work and compromise, however I thought I’d summarize them here.

#1 - USE MULTIPLE REFERENCE FIELDS, INSTEAD OF A SINGLE MULTI-REFERENCE
Ditch the multi-ref field, and replace it we 3 reference fields to your Tag table. Tag1, Tag2, and Tag3. In your card, you program, style and color each them separately.

PRO - This sorts out your main view problem smoothly
CON - the CMS hosting plan only allows 5 references per table total. Depending on your table design, you may need to upgrade to Business hosting to get 10 references.
CON - if you need your Tag Collection page to display the associated tagged items, it gets a bit awkward because there is no “or” filtering in a Collection List. Therefore you cannot say "show me all cars where Tag1 = the current tag, OR Tag2 = the current tag, etc. Instead, if you have 3 Tag fields, you need 3 collection lists, each filtered to a different Tag. This munts sorting options, but at least you get the right list of items.

#2 - DITCH REFERENCES, AND USE SWITCHES

If you tag cound is manageable, you can put a series of on/off switches in your CMS table, each representing a Tag. That tag is applied when the switch is on.

PRO - Easy to implement.
PRO - No 5-field or 10-field limit, like References have.
CON - Sort order is fixed.
CON - Any tag-info pages have to be static pages, which you manually link to from that tag

#3 - DITCH REFERENCES, AND SPECIFY YOUR TAGS USING A CSV STRING

Pretty sure this works, but I’ve only done a conceptual design so far, details are here.

#4 - USE MULTIREF, THEN EXTRACT YOUR HIERARCHY THROUGH THE WEBFLOW API

This is the gnarliest approach yet. Here you use the CMS as-designed, with a multiref to your Tags table.
Separately, you build some code that will hit the Webflow API, extract your needed info, and build a hierarchy of Item to Refs as JSON, this is published to some URL.
Then, reference that JSON URL, and inject it into your Webflow page.
Now you have the Item to Tag data you need, and using jQuery you can add the correct Tags to each of your cards, including links, colors, etc.

PRO - The only solution that does 100% of what you want.
CON - Programming to create the JSON via the API
CON - Hosting this somewhere
CON - Programming the jQuery to create your styled Tags

4 Likes

This isn’t exactly what you are asking but this solution might work for some people: https://webflow.com/blog/dynamic-filtering-and-sorting

Kind of hacky, but if you just want a list of things, and don’t really need the individual pages, you can create an iframe in the collection list, and make the src the link to the individual page. You can do this by adding dynamic fields in the code editor:

Create your collection list, with the iframe inside. The iframe will appear broken in the editor, but the published version should work just fine.

Design the template page to be completely blank, with just the multi-reference at the top (in my case, they’re tags)

The result will be multi references in the collection list. Again, this is something you can do if you don’t need the individual page.

I’ll try updating with JS calls to see if I can maybe pull something without having to use an iframe, but that’s what has worked for me for now.

**** Update ****

A better way to do things is to write a javascript snippet that pulls the multi-reference info from the individual page. That way, you can actually style your individual pages and use them normally!
Since it’s all on the same domain, there are no CORS issues.

Here’s my code, along with comments:

7 Likes

@ antar
Oh my gosh- this is exactly what I need!

Is the first div class “tag-list” (and the slug ID) supposed to go on the CMS page with the CMS list that pulls in the multi-reference fields? Or is it fine to just give the class on the CMS page “tag-list”?

Edit: It’s just literally as you showed in the screenshot! Got it working, was a bit finnicky in the code editor, but over all success! Thank you so much for sharing that!

https://preview.webflow.com/preview/trail-gnomes?utm_medium=preview_link&utm_source=designer&utm_content=trail-gnomes&preview=1c0e14ff4423d857b8c3142cc5ce1ae2&mode=preview

1 Like

@rosealway The first div class “tag-list” can go on both, if you want the style to be similar on both the individual page and the collection list. However, it’s not necessary. What is going to let jQuery know where to put the tags is the ID, which, in my case, is the slug.

1 Like

Great work @antar. This is closest thing I’ve seen to a solution yet. Good job :slight_smile:

As a Javascript noob, I had a question… Would this work for nesting the tags into another CMS item collection? For example, I have a CMS collection that lists all companies on my website. I want to pull in all of the tags for each company into each CMS item on the page. That way, I can then look to do some advanced filtering.

Thanks again for sharing, the Webflow community is strong!

So what I understand is this: you have Apple, Home Depot and McDonalds, and they’re tagged with “Kid Friendly”, “Good Customer Service” and “Food”. You want to display your companies like:

Home Depot Apple McDonalds
Good Customer Service Good Customer Service Food
Kid Friendly Kid Friendly

If that’s the case, then yes, absolutely.
Webflow just put out the ability to nest collections, so for lots of use cases, you can just do that.
What I realized is that if you have multiple collections in one page, you can only nest collections in one of them, so you still might need my method of fetching via Javascript

1 Like

Yeah that’s exactly it! I’ve tried the new nesting and it’s awesome BUT it limits you to 5 items. Each of my companies has on average 8 tags so you can see why I’m looking for a workaround.

I’ve been trying your method, but it’s embarrassing to admit, I’m having some trouble getting to work which is totally my own inexperience.

I’ve got the HTML embed in the CMS Items and I have another CMS collection on the paged with tag-list, but I can’t tell if it’s working or not. How do I know if it’s successfully pulling in?

Here’s my public link & live link . Page I’m referring to is Home Design.

Cheers for you help, you’re awesome!

Got it - If you could, send me a screenshot of your code, since some of the elements pull from the collection, and it’s not clear what is what.

I appreciate the help. The collection for companies is ‘Companies’ and the tags are in a collection called ‘Categories’.

Got it!
Looking at the company page, I saw that you have several tag lists. So, you’re going to have to load in several of these tags. To keep things simple, create four divs on the top, so instead of “tag list”, have something like

<div class="features-tags" id="{{slug}}-feature"></div>
<div class="activities-tags" id="{{slug}}-activities"></div>
<div class="shoe-styles-tag" id="{{slug}}-shoe-styles"></div>
<div class="sexes-tag" id="{{slug}}-sexes"></div>

There’s a more elegant way to do this, but we’ll keep it simple for now.

Then, in your script, you’re going to pull those divs by class and place them in the above divs:

<script>
window.addEventListener('DOMContentLoaded', function() {
	jQuery(function() {
  	jQuery('#{{slug}}-features').load("/companies/{{slug}} .features-tags");
        jQuery('#{{slug}}-activities').load("/companies/{{slug}} .features-tags");
        jQuery('#{{slug}}-shoe-styles').load("/companies/{{slug}} .shoe-styles-tags");
       jQuery('#{{slug}}-sexes').load("/companies/{{slug}} .sexes-tags");
  });
});
</script>

This is what it would look like:

Test it out for me, since live links don’t let me publish, and the code won’t run until it’s published.

Another way to do this is to put all of your tags in a single div and pull that.
Also, you can nest THAT div inside of a hidden div, if you don’t want to show it on the individual company page – that’s a clever way to have a layout that’s only applicable to the object that’s calling the tags.

3 Likes

Alright, done and published. How do I know if it’s working?

image

You have to put a space before the dot down at the jquery call – so it’s .load('/companies/SLUG[SPACE].sexes-tags"

1 Like

DUDE IT WORKED!!!

I can’t tell you how many forums and YouTube videos I’ve looked at to get this to work :smiley:

Forget hero of the day… you’re hero of the month. Thanks a lot! Really.

2 Likes