Single nest source for multiple collection lists?

General
1

I am working at combining a bunch of different lists with rich data into a single list that can be filtered. It’s possible that I simply need to configure this differently but I’m trying to get one ‘nest-source’ collection list to be nested in three different collections (the ones that will be combined using API callback).

Essentially I have a ‘topics’ collection that I want to be applied to different resources/collections. One topic can be applied to different media types for which I have various collections (article, video, photo-essay etc…)

Is this possible?

2

Here’s the link to the page I’m working on: Search Results

What’ you’ll notice is that when you filter by Type: Video or Type: Photo Essay, non of the regions or topics have been nested.

3

I came to post this exact question.

I think you are right that this is not possible in Webflow? Which is just shocking. I thought this was the case months ago.

For example, we can’t do this:

/resources
/resources/resource-planning
/resources/resource-planning/templates

The only way to embed the /resource-planning/ folder inside the /resources/ folder, is if there is a manually created /resources folder.

But you can’t create a /resources folder if there is a static /resources page, which we obviously need.

TLDR - There’s no way to embed a CMS inside another CMS, i.e. you want to have nested folders.

image
image892×462 36.9 KB

image

4

I’m actually talking about the CMS Nest Attributes solution :face_with_monocle: but folders in Webflow definitely have their limitations as well.

5

Hey @Shane1! I am not sure if we can make it work in this setup. Could you share a read-only? I see some of the setup missing for the photo essay items.

What I’d like to try is to combine all the lists first, and then initialize CMS Nest. This way, all the nest-target are inside a single collection.

If this does not work I’m afraid we will need to use the same collection several times with different ID

6

Thanks @Support-Luis ! What you’re suggesting makes sense. I’m going to give it a go. I’m working on getting the read only link now. (Apparently you can’t do that as an agency/guest role :man_shrugging:).

Yes, I probably missed something on photo essay collection as I’m just trying to get it working once and then I have a number of more collections to add to the mix.

More from me soon.

7

What I’ve done, doesn’t seem to have done the trick. Here is how I have the code arranged (the jQuery at the bottom is just what I’m doing to show/hide loading elements):

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    window.fsAttributes.cmscombine.init();
  },
]);

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmscombine',
  (combineInstances) => {
    console.log('cmscombine Successfully loaded!');
    window.fsAttributes.cmsnest.init();
  },
]);

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsnest',
  (listInstances) => {
    console.log('cmsnest Successfully loaded!');
    window.fsAttributes.cmsfilter.init();
  },
]);

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsfilter',
  (filterInstances) => {
    console.log('cmsfilter Successfully loaded!');
    $('.search_tag-loader').unwrap().remove();
    $('[search="is-loading"]').hide();
    $('[search="is-loaded"]').show();
    $('.search_results-wrapper').css('filter', 'blur(0)'); // Set blur to 0
    $('.search_results-wrapper').css('cursor', 'auto');    // Set cursor to auto
    $('.search_results-wrapper').css('pointer-events', 'auto');
    setTimeout(function() {
        $('.search_results-wrapper').css('opacity', '100%');
    }, 200); // Set opacity to 100%
    $('.section_search-background_loading-wrap').css('opacity', '0%');

    // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
    const [filterInstance] = filterInstances;

    // The `renderitems` event runs whenever the list renders items after filtering.
    filterInstance.listInstance.on('renderitems', (renderedItems) => {
        $('.search_tag-loader').unwrap().remove();
        console.log(renderedItems);
    });
  },
]);
</script>```
8

Ok, so now I’ve moved on to trying to use multiple collections but still can’t get that to work :sweat_smile:

9

@Support-Luis any advice you can give on how to structure this to get multiple instances of Nest to work is much appreciated :blush: I wandered into other fruitless solutions but don’t love the prospect of going outside of an attributes solution

10

Hey just keeping you updated on this :sweat_smile: I got multiple nests to work. On my second instance of it, I didn’t have a link to the child template on the parent template-reference page.

I would still love to be able to simplify this implementation a bit as it is both a bit complicated and slow-loading BUT… I think I have something that will work. And I am grateful :pray:

11

Hey @Shane1! Sorry for the slow reply! I am glad you got this working. I know this is a tedious workaround, but I’ve opened a feature request for this feature :wink:

Hopefully this will not be a limitation soon!

12

No worries. I’m also opting to use the second nest option that uses a plain text field as the reference page route is taking a pretty big hit to the page loading speeds. Thankfully the API Callbacks have allowed me to inject some custom code to help really control the loading experience.

13

Yes, option 2 does not fetch the items from the template page.

Option 1 has cache optimization but it will only help after the user loads the page once.