Digital Menu with Tabs+Nest+Load

General
1

Hi,

we implemented cms nest + cms load inside a cms tabs element using finsweet.

everything works except the “render-all”.

I got the clonable, i have the cmsnest as defer and prevent init, i have the script that initialize the cms nest once the load is completed but i still cannot render all my drinks in the nest-targets.

i tried to use the support tool but i think it’s not compatible with the prevent-load tag (i also run the support tool on your clonable and it gives duplicated “list” in the page (i think because it checks AFTER the lists are nested).

https://preview.webflow.com/preview/swing1966-menu?utm_medium=preview_link&utm_source=designer&utm_content=swing1966-menu&preview=bf3ae02dd03026fb1539f065deadc7b2&pageId=65523886e835156307b9e3f2&locale=en&workflow=preview

here the readonly link

could you please tell us what’s the problem? thank you as always for your availability

2

I just noticed that in the “food” page the nest by link it’s not working

i see all the products in each one of the tree categories, i get an error from the automated support saying:

The attribute fs-cmsnest-collection="food" is found on the Collection’s CMS Template, but the link is not working. Check if the link to the Item’s Template page is correct.

The link seems fine to me, same as the drinks one

readonly link

https://preview.webflow.com/preview/swing1966-menu?utm_medium=preview_link&utm_source=designer&utm_content=swing1966-menu&preview=bf3ae02dd03026fb1539f065deadc7b2&pageId=65524d671e87563767db6cdd&locale=en&workflow=preview

3

Hey @gianluca! CMS Load modes do not need an instance number, only the list element will need the -x.

You also have the fs-cmsnest-element=list twice on a collection where you are using Webflow’s native nesting, on the parent and the nested list.

And if you’d like to create tabs after the items are nested, you’ll have to delay the load of the Tabs Attribute the same way as the Nest.

The callback to initiate CMS Nest and CMS Tabs will be

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

Also, the template page that needs the current link and the template-reference collection is the parent collection, be sure to add the multi-reference field where the categories are added so only the selected categories are nested and not the complete list.

5

ok, i removed the duplicate list and added the script as you suggested,
i dont understand the multireference field thing.

By now we have macro-categories, categories and drinks.

Macro categories and categories are created using the native webflow nesting mechanism (which is fine due to the low number of records).

i then have the drinks list that have a “category” field

do i need a multireference field pointing to each product that’s part of a category? if so how does “distillati” tabs works now?

The only multi reference field i have is for the native nesting, i thought it was unnecessary for your cmsnest due to the working tabs (again, distillati)

6

ok, i changed the structure so it multi nested, the categories and macrocategories have multireference and the link blocks works fine.

still i have problem with the load, only cms drink items on top of the list appears, “Acqua” elements does not

Distillati → Grappa → Marolo Moscato - WORKS
Acqua → Acqua → Naturale / Gassata - DONT WORK

thank you as always for you availability

7

Hi Luis,

i finally find the issue.

The pagination element of my child list was hidden with “visibility hidden” not with “display none”

This blocks the load functionality without giving errors in the automated support, i suggest to add an error for that case

Also, before adding the multireference field to every element of my parent collection, i tried to add the template reference the way i was thinking from the beginning (i simply put a child collection filtered with the current parent item in the template) this allows me to mantain the cms structure without multiple reference and without “top->bottom” dependency (we will give the editor access to our customer and we want them to be able to delete a child item if he wants, with the multi reference in the parent category he would be force to first remove the reference and then delete the item).

COuld this give problems with the implementation?

8

Hey @gianluca! Thanks for spotting this, we will add a check for it in the next version for sure.

Regarding the CMS structure, it is up to you and how technical your client is, if you are managing the nesting with Webflow there is no need to add the script or its callback as everything is done natively.

In other words, if you are not using the multireference field already in your setup then CMS Nest becomes redundant. Unless I am misunderstanding the whole structure.

9

Ok, it’s clear now

We need the cms nest because webflow allow only one nested collection per page, we need “multi” nesting.

In the template page we can use the native filtering to create the link block list needed by the cmsnest.

Everything it’s working now.

Last thing, i have a loading screen used with other customers that use the cmsload “loader” feature. in this page the load it’s pretty quick, the time consuming elements are the cmstabs and cmsnest (less than a second but still there)

is there a way to have something like the “loader” functionality with other finsweet attributes components? or maybe a trigger in the snippet that do the same thing?

10

I am afraid the other solutions do not offer a native loader at the moment.

One solution that comes to mind is to try adding a loader element to the nest-target and the slider that will be removed once the elements nest and the slider content populates.