I am wondering if some webflow genius here can help me out.
I currently have three collections with three levels of articles (expertise > service > article) on my firm’s website. I realize I could have just one but I would love to keep the full automatic breadcrumb schema.
My idea is to have one collection with a self-referencing field named « parent ». I want to recreate the breadcrumb schema but I am stuck.
Is there a way to pull the parent of the parent using JS ?
Here is an example:
Law
Contract Law (with parent = « Law »)
Non disclosure agreement (with parent = « Contract Law »)
In this example, on each article including « non disclosure agreement », I am trying to recreate the breadcrumb.
I can obviously do the level N and N+1 from webflow UI. But is it possible to pull data from record « Law » (N+2) ?
There is no pretty way to do this. I describe this as the “one hop rule” of Webflow’s CMS.
But, let’s assume that you have a fairly rigid 1:n structure here, of;
category <- subcategory <- practice
Each practice is in one and only one subcategory. Each subcategory is in one and only one category.
Then, you can sort of hack this, by putting the burden on subcategory, and enforcing the 1:n structure yourself. To do that, you’d flip the relationship between subcategory and practice so that subcategory has a multiref field to practice.
category <- subcategory => practice
Then you’re working within the one-hop rule.
On the practice CMS page, you drop a collection list bound to subcategory, which is filtered to only show subcategories where the practices contains the current practice. If you’ve enforced it well, there will be one and only one match.
Subcategory can also reach category through its single ref.
Unfortunately, the multi-ref is what I’d like to avoid.
I am really looking for a JS solution to get data of N+1, N+2, N+3, etc for the JSON-LD schema I want to add.
I see that finsweet manages to do amazing stuff with their attribute solutions, and I am pretty sure it would be doable. Just don’t know if it would be efficient in terms of loading speed.
The complexity of the script would be to:
Using the parent field of current record, get id of parent_N1
Retrieve data of parent_N1 including id of parent_N2
Retrieve data of parent_N2 including if of parent_N3
(Ideally repeat until there is no parent found)
If I could get something like that to work, it would be super flexible.
Than I would use chatgpt to make a complete script to recreate my breadcrumb data.
It’s really hard to explain, hope I am clear.
Cheers,
Joachim
I build custom solutions like this all the time.
The main caveat is performance, it’s important to make your data as accessible as possible, especially if you have hundreds of nodes in your hierarchy.
If you’re talking about thousands, solutions become even more creative. You create a single page as a data source ( up to 2000 items max ), have a script turn that into a hierarchy, and cache it.
All of this is overkill for most sites, but there are situations where it makes sense.
7k. I’ve done millions before, particularly in large hierarchies like consumer packaged goods (CPGs). But in a pure JS Webflow-hosted solution, even 7k is somewhat pushing things on the performance side. It can be done though. Is that a stable 7k, i.e. not likely to grow far beyond that?
If so, with some careful setup, that would be 4 page requests and a hierarchy build plus a caching layer. Or, you sync to an external db like Xano, and have the hierarchy build external so it’s performant.
A big part of how you build this depends on how you’re using it, e.g. whether you’re trying to display the full hierarchy at once or just retrieve a single path. Similarly, what you’re doing with it matters a bit to the planning.
Cost range for a good build would be somewhere in the $500-1000 range, and more if you want it to be highly performant through an API.
