Filter a nested Collection by current Page

Design help CMS
1

Hey Community,

I have a slightly more complicated project, but I really appreciate any help I can get.

Here is my situation:
I want to have a site that lists people and their opinions on certain topics. So I have created 3 collections. One for topics, one for people and one for quotes (and one for Tags, but that´s irrelevant for now).

So far so good, but now it is more complicated to make the CMS People Page with the connections and filters. I want each People page to list all topics for which I have a quote(s) in my database.

I don’t know exactly how to implement this.
My approach was to have a reference field in the people collection with all the topics the person has said something about and then aon the People CMS collection Page a collection list with the topics - so all topics are listed to which the person has said something about. Furthermore I created a reference field at the topics, which links all quotes to the topic. At the People CMS collection page I created a nested collection list with all quotes. The only problem is that I can’t filter the nested collection list by the current Perso so all quotes to the Topic are listed and not only the ones the person said.

image
There is no option for filtering by current Person :frowning:

I hope you understand what I mean. If you have another idea how to implement this or how to implement my approach better I am very grateful. If you have any questions, feel free to write. I am grateful for any suggestion.

Here is my public share link ( go to the people collections and then to Elon Musk because I only have a few sample quotes so far) : https://preview.webflow.com/preview/famousopinions?utm_medium=preview_link&utm_source=designer&utm_content=famousopinions&preview=482adadf451fb763527ee5b703ac9e67&pageId=6301447a148cfc22e6d65f1b&itemId=631b32bfe1bb5878b788458e&workflow=preview

2

Natively in Webflow’s collection-list querying, you’ll find barriers like this fairly often. You can get around most of them with some creative scripting to move those elements around after they’ve been emitted into the page.

I built a script solution to solve the embedded collection lists issue some years ago, before I discovered that Finsweet had built a very similar set of tools and with more capabilities. I’d start there and see if you can build the collection lists arrangement you want that way.

1 Like
3

Thanks.
I´ve tried this one out, but it only works on static sites and not on the Template Page :confused:

Maybe there is a different solution? @memetican

Thanks a lot.

4

Actually, that seems really unlikely- from the perspective of a client-side script there is zero difference between the two. A DOM is a DOM.

If you can structure your page the way you want, with your categories containing your quotes, and you just need to filter out quotes from People who are not the current Person, you can use my element filtering lib;

5

Hi @memetican,

thank you so much for your help! Appreciate it.
I´ve implemented everything in your script and and watched your Loom- Video.

I think I almost have the solution and I only need to change small things in the script.

Could you help me a little bit with my custom script?
I think I have small mistakes in my custom code.

Right now it is:
function iscurrentperson (item){
var cmsperson = “Name”;
var quoteperson = Person($(item).find(“data”).attr(“quoutename”));

if (cmsperson == quoteperson)
return true;
else (!cmsperson == quoteperson)
return false;
}

Here is my read-only link: Webflow - Famousopinions

6

@latest → @3.12

7

It works!!

Thank you so so so much. Honestly.

Is there anything I can do to support you?

8

Hey @memetican ,

now I have antother problem. There is a limit on Nested Collections. Weblflow only allows 5 Items.
Since my quotes are filtered but still in the code, only hidden, only 5 quotes will be on the page, these are then filtered and then remains max. 1-2 on the page.

Is there a way to make the quotes not only invisible but completely deleted from the code?

Thanks a lot.

9

Yes they can be deleted but that won’t solve your problem. Webflow is only emitting 5 max, and the scripts run after that content-create step, so it doesn’t matter if you delete some of those afterwards.

At this point you’re headed down a much more complex path, which involves separating your collection lists, and then writing code to clone items and stitch them back together the way you want. It’s a bit of a coding project to that, and even in that scenario, you’ll begin to run into problems with Webflow’s 100-item limit on Collection Lists.

Soon you’ll be asking about AJAX solutions and the CMS API.

Unless there’s a very compelling reason, and a good deal of money on the table, you really don’t want to invest too much in that path. You’re much better off designing “with the grain” in Webflow, rather than against it.

In your case, on the Author’s page, I’d…

  • Add a collection list of all quote by that author
  • Sort them perhaps by date, most recent at the top. Or random, depending
  • Show the topic tags, but don’t group by them.

If you really want grouping by topic;

  • Find a script solution that will group them after the list has been generated. I think Finsweet might have something in their Attributes collection that can help you with this?
  • Alternately you might play with a plugin like MixItUp3, which lets you view and filter your list dynamically, e.g. by topic, or “see all.”