Collection List within Collection List Alternatives

Design help General
1

Not sure if this is the best category to use…

I need a bit of design advice on working around the collectionlist-within-collectionlist limitation.

A tour company client needs to apply “tags” to tours, e.g. 1-day, 2-day, halal, etc.

Those tags also serve as a grouping mechanism, so that you can e.g. click the halal tag and see all halal tagged tours.

Both the Tours and Tags are setup as collections, and Tours have a multiref to Tags.
[ Note- with this ref, we’re now at 5 for the tours collection, which we can’t reduce or increase, the jump to the next hosting plan is far too high for this client ]

On the Tours page, tours are shown in a card format, via a Collection List.

Each of those cards needs to show the Tags at the top, in a specific sorting order, in the area I’ve indicated in red-
image

However Webflow doesn’t allow putting a collection list within another collection list.

Based on our requirements, I think the Tour and Tags Collections are both needed as well as the multiref field. That establishes the linking in a way the client can manage, and they’ll be able to add the new Tags they need without new programming.

So the key piece here is how to display a collection list of tags within a collection list of tours.
What are my options?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

The client could add “tag” by the editor (Without developer). And each tag is auto clickable (Because you create tag page with list show only the current tab(Filter)).

Did you watch this tutorial?

tags in your case is the “authors” to “articles” in the example above.

If you trying to create complex filtering - please add more detials or examples.

1 Like
3

Thanks Ezra- I think you’re suggesting we use a Reference field instead of a Multi-Reference field to store the Tag reference?

On the one hand, we’d wouldn’t need a Collection List to display the set of referenced tags; however the client would only be able to assign a single tag per tour. In their case they need quite a few more than that. Typically 2 to 4 per Tour.

The filtering is very simple-

  1. Client assigns the Tags to the Tours.
  2. Site allows the end-user to see all of the Tags assigned to a tour, e.g. “1 Day” “Halal” “Child-friendly” “Wheelchair accessible”
  3. Site allows the end-user to list all of the Tours which have a particular Tag.

It’s a very basic Webflow CMS multi-ref setup.

The challenge is finding a way to make #2 work, when we’re presenting a list of Tours. Each of the tours in the list needs to display its list of tags, which is where we face the Collection List inside of a Collection List problem.

1 Like
4

Not tried this…but perhaps do not use tag collection at all. Instead add switches to the tours collection for each desired tag . Then include a tag element for each switch field in the tours collection item card and conditionally hide the tag divs if not “checked / switched”. You would need to manually create static “tag” pages if those tag divs were to link to a tag page.

Make sense ?:upside_down_face: Obviously horrible if you have heaps of tags.

1 Like
5

Thanks Hamish, I’d considered that but avoiding it for three main reasons-

  1. The customer can’t create their own Tags
  2. Pretty soon I think we’ll hit our CMS field limit in the Tours table as the “Tag” switches grow- but I haven’t checked the actual limit on fields.
  3. The link back problem, which you mentioned as well. I can’t think of a good way around the static pages for each tag. We could also have a multi-ref which is sync’d to the switch settings, but that’s fairly ugly for the client to keep straight, lots of potential for error.

What I’m really hoping someone has found a way to do is to render the multi-ref field within the Collection List in some other way, like a CSV or JSON chunk, which I can write jQuery code to expand into the necessary HTML tag elements.

1 Like
6

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

7

@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
8

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!

9

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!

10

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
11

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.

12

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.

13

@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.

image
image725×728 293 KB

14

(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
image992×609 94.3 KB

image
image1265×501 51.7 KB

image
image
image1863×911 99.9 KB

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

15

@memetican
Tah Dah
image

All of your tags can be defined in CMS

Choose the tag collection appropreate for your page

image
image1161×551 71.3 KB

Define your tag collection here:

image
image350×947 28.6 KB

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

image
image746×914 40 KB

image
image956×659 29 KB

image
image475×672 20 KB

2 Likes
16

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
17

@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)

18

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
19

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
20

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