Nest not working

Attributes
1

Hi, I have everything set up correctly for CMS Nest, but it still isn’t working.

The Finsweet automated support says this, “The attribute fs-cmsnest-collection=“tags” is found, but the url link in the CMS Collection Item is not working. Check if the Link Block or Text Link have the correct link to the Item’s Template page.”

I have ensured the link is correct on all the CMS collections.

Read-only link:
https://preview.webflow.com/preview/healthiest-employers-2023?utm_medium=preview_link&utm_source=designer&utm_content=healthiest-employers-2023&preview=5c4cf80f3240f514fcdb59e5ef630e46&pageId=652da8f9bb88cbd08c396e9c&workflow=preview

Any help is appreciated!

Thanks,
Peter

2

Hey @PHD! This is a result of the template not being published, CMS Nest requires a functioning link to the template page of each to fetch the data to be nested. Can you test publishing the template page, please?

If you don’t want to publish these pages you can look into setup option #2 where no data is fetched from the template page.

Screen Shot 2023-11-01 at 18.23.08
Screen Shot 2023-11-01 at 18.23.081142×724 93.8 KB

3

@Support-Luis Got it. Thanks! That’s good to know.

One last thing, I have a custom empty state for when there are no referenced CMS items. But that empty state isn’t showing. Is there a way to show the empty state?

4

I believe you can style the nested list’s empty state and this will show when the items are nested.

5

@Support-Luis Not showing on the site. Take a look.

It should show a faded “None” button when empty.
image

6

I see, could you test this code on your page please?

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

      //Replace this class with your actual empty button class
      let emptyElement = document.querySelector('.my_empty_element');

      let elements = document.querySelectorAll('[fs-cmsnest-collection="tags"]');

      elements.forEach(function (element) {
        if (element.innerHTML.trim() === '') {
          let clonedElement = emptyElement.cloneNode(true);
          element.appendChild(clonedElement);
        }
      });
    },
  ]);
</script>
7

@Support-Luis I added that to both the main page as well as the CMS template page. Nothing. I replaced “my_empty_element” with the “past-winners_none” class which I used on the empty state element.

8

Hey @PHD! I see the empty button is now showing up correctly. How did you manage this?

9

@Support-Luis I just added the empty button element to the div with the [fs-cmsnest-element=“nest-target”] attribute. If there are CMS items to nest, then it replaces this element, and if not, then whatever is within the div remains.

10

Awesome! Thanks for sharing!