Collection List within Collection List Alternatives

Yep, well I am barely dodging this issue for an ecom site myself. I hope someone has a solution for you.

@HammerOz yes I hope so too - thanks for the ideas.

So far the only actual solution I can think of is to write an externally hosted service which generates a JSON data block, using the API to capture all of the tour-tag-ref data. And then reference that in my page, and use jQuery to build out the tags part of the display.

That pretty extreme though, and adds further hosting costs. At that point it might make more sense to switch CMS’s.

1 Like

I have the same issue. The solutions I am using are primitive – there must be something better, but I haven’t come across it yet.

Solution A: use a multi-reference field so that all the items related to a tag can be displayed together in a list; and to display the tags for each item within that list, use several single reference fields and duplicate the tags in the multi-reference field. This works assuming you don’t have more than a handful of tags for each item and also that you don’t need those reference fields for something else (Webflow limits you to 10).

Solution B: Instead of using several single reference fields to duplicate what’s in the multi-reference field, create a rich text field and type in the tags that are in the multi-reference field and hand link them. It’s more time consuming than A and also I don’t think you’d be able to style the tags as buttons.

Good luck and I am all ears for any better solution!

Thanks Ed,

Unfortunately the CMS-level plan limits reference fields to 5, which is part of the torture.
We might have to upgrade to get the 10-limit, but that’s unfair to the client, since the only reason to do it is to work around Webflow’s CollectionList-within-CollectionList limitation.

Having said that I might be able to find some other justifications, so I’m going to prototype a collection with several single-ref fields and make sure I can build all 3 views practically from that. ( tours list with multiple tags, individual tour with multiple tags, and tag listing all associated tours ). On #3, I’m not sure if Webflow’s Collection List filter offers an OR capability, so that I can check each of the single ref fields individually.

I’ll also do a bit of digging to see exactly what the Collection RSS outputs, or whether there some easy way to access a JSON representation of the multiref field contents through the API, which I can program against.

Thanks for the ideas!

Good luck and I’d be interested to hear how you (or others) solve the issue!

In my case I’m not aware of “or” functionality in the filter… meaning I need a multi-reference field so I can sort items under a tag, plus corresponding single-reference fields to show those tags for each item when the items are displayed as a list.

I have read in the forum that Webflow is working on nested list functionality, but it involves some work given all the features that are within lists. My (perhaps naive) thought is that for now they could simply enable multi-reference field titles to display as an output in a list of items, since that would solve the issue we are all facing.

1 Like

I’d like that, any kind of hook for developers. For example when I have a collection in a page, it would be great to be able to have that same filtered data emitted as a JSON data chunk, including all of the referenced-field data. From there, basic jQuery gets me anywhere I need to go.

I had same issue. A good wordarond is to add ‘Reference’ and/or Multi Reference’ fields.

  1. Create new Collection (B) as an extension to your existing CMS object (A)
  2. Create a new refernce to (B) inside of (A)
  3. On the CMS page for (B) create all values you want
  4. On designer you will be able to insert both (A) AND (B) cms values

You can rinse and repeat for up to 5 CMS collections within one CMS collection.

@miekwave How did you get The Collection List B to embed within Collection List A? In Webflow the designer doesn’t allow embedding Collection Lists.

In this illustration-

  1. Tours collection (filtered)
  2. Tour item
  3. Tags collection (reference from Tours)
  4. Tag item
  5. Tag item

The Collection List required to achieve #3 isn’t allowed by the Webflow designer.

(EDITING POST - Please give me few hour to update this to include tags)

  1. Page must consolidate CMS into ONE CMS object such as CMS Master)
  2. CMS Master uses reference point from CMS Collections (CMS Child 1, CMS Child 2…CMS Child 5)
  3. Page now has access to load in CMS 1, CMS 2, CMS Child 5)

Play with this:
http://html-sandbox.webflow.io/cms-layers
https://preview.webflow.com/preview/html-sandbox?utm_source=html-sandbox&preview=e67118bc353dff859a7c3e046fc087ce



image

(EDITING POST - Please give me few hour to update this to include tags)

@memetican
Tah Dah
image

All of your tags can be defined in CMS

Choose the tag collection appropreate for your page

Define your tag collection here:

Add Tag Collections to your Master CMS as a reference
image

Embed your tags away on any page
image

Editors can update tags on a whim



2 Likes

Ha ha, that’s quite innovative- but it wouldn’t be practical for the client to have to create a custom tag collection every time they are defining a tour. If there are e.g. 10 possible tags, then with sequencing variations included that’s 10 factorial combinations 10 x 9 x 8 x 7 x 6 x 5 x 4 x 3 x 2 x 1 = 3,628,800 tag combinations. Well over the CMS record limit. :wink:

But more importantly, the individual tags themselves are not CMS items, which means they do not have a CMS page which then lists the tagged Tours.

+10 for creativity though, I’m still reading your approach with wonder.

Thanks man.

1 Like

@memetican
You can create only one Tag Collection called
10 Tags and assign 10-Tags to all of your Master CMS pages or CMS Wrappers (you can rename any tag labels with actual tage and value to match that tag for 1-on-1 tag matching)

Thank you – interesting approach and I could see it working for a small number of tags where the combinations would be limited/manageable (though I’d set up the tags as rich text fields rather than plain text, so that linking can be added). But for my purpose, where I have a hundred or more tags, it’s too unwieldy.

So I’m holding out hope that someone can: a) figure out a workaround; b) Webflow finishes nested lists sooner rather than later; or c) Webflow fast-tracks outputting multi-reference titles when displaying a collection item either alone or as part of a list (multi-reference titles already show up in the collection item editing page, so the functionality looks like it already exists.)

1 Like

Ed, there’s another approach I’m considering that solves some of these problems, but sacrifices a bit of convenience on the admin side.

Given 2 collections;

  1. Main collection, e.g. Tours
  2. Secondary collection, e.g. Tags, contains full tag data- unique tag Name, plus display Title, Color, Linked page, and a Match string that is the exact Name wrapped in delimiters.

We don’t use a Reference or Multi-Reference field, because of the reference-field-count and collection-within-collection limitations there. Instead, in Tours, we have a plain text field named Tags which uses this format-

,tag1,tag2,tag3,tag4,tag5,

EXAMPLE DATA

Tag #1
Name: 2day
Match: ,2day,
Title: 2 Day Tour
Color: #ff0000

Tag #2
Name: ticket
Match: ,ticket,
Title: Ticket Included
Color: #00ff00

Tag #3
Name: lunch
Match: ,lunch,
Title: Lunch Included
Color: #ff00ff

Tour #1
Name: Hobbiton Movie Set Tour
Tags: ,lunch,2day,ticket,

Then to generate the necessary UI on the “All Tours” page;

  1. In each Tour Collection Item, include a DIV to contain the tags. Within that DIV, or as a custom data property on that DIV, attach that Tour’s tags list, e.g. ,lunch,2day,ticket,
  2. Beneath the Tours Collection, have a separate Tags Collection, which renders all tags exactly as we want them to appear visually, but all are rendered inside of a hidden DIV container.
  3. Using jQuery, find our Tour Collection Item tags list, parse the CSV, and expand each tag by cloning that Tag’s HTML chunk. Basically we’re just duplicating our hidden, rendered Tag HTML wherever it has been referenced.

And on the “Tags” Collection Page, I think we can show all of the correctly tagged tours by showing all Tours in which the Tags field contains the current Tag Match field value. I haven’t tested that though, and there may be some limitation there I haven’t seen yet, in which case we’d need to use jQuery again to delete non-matching Tours.

NB: The reason for the Tags.Match field and the delimiters wrapping the Tours.Tags field, is to support that contains approach without mis-matching similar tags, e.g. lunch and halal-lunch would both match “lunch”.

Advantages - Unlimited tags per tour, styled however you want, ordered however you want. The styling work can be done in the Designer visually.
Disadvantages - programming, and admin training

2 Likes

Interesting ideas guys. In the meantime I hope you have all maxed out your votes on the relevant Wishlist item. Nested Collection Lists | Webflow Wishlist

1 Like

@HammerOz No way to “beat” Wordpress without this feature (On WP this is one of the main Advantages - really easy to manage blogs categories & Sub-categories by tree structure).

2 Likes

Any update on this topic?

Not with many-to-many collections, as in my example above, but with one-to-many, you can use the approach I’ve described here-

1 Like

Seems like now it’s possible to put a Collection List in a Collection List! I just succeeded.

I was now able to display multiple tags from “Tags” Collection onto the items of “Products” Collection.

1 Like

Yeah , awesome. Unfortunatly I ran into its maximum number of nested Collection Lists: just 1