CMS Tabs with multi-referenced tab link

Attributes
1

In the past I was able to create CMS Tabs with a single-reference element as a tab link.

Now, I’m trying to create a tab component with two separate collection lists: one for tab links (list of problems), and the second for tabs content (list of corresponding services that solve them).

Everything’s set up correctly when it comes to the tab component — “Problems” is the primary collection list and is being pulled to the tab component by CMS Tabs, where “Services” is a nested collection inside Problems.

The issue is that Webflow doesn’t allow to filter nested collection. It’s a critical feature for the client to do so.

I’ve tried to nest the Services inside Problems to filter the nested collection but it seems that it’s not possible with Attributes — Services’ collection items are not being displayed inside CMS Tabs.

Do you guys have any idea how to properly set up?

Preview: https://preview.webflow.com/preview/probody-one?utm_medium=preview_link&utm_source=designer&utm_content=probody-one&preview=54f13677a183f1c2e084a4a0bc632460&pageId=642fe4509fb1f7047031f799&workflow=preview

2

Hey @filip.radkiewicz one thing we can try is to prevent CMS Tabs from loading until CMS Nest has finished nesting the items.

For this you’ll need to change the CMS Tabs script to this

<!-- [Attributes by Finsweet] CMS Tabs -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmstabs@1/cmstabs.js"
></script>

and then add this callback function that initializes CMS Tabs

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

Hey @Support-Luis

I’ve restored CMS Nest and implemented your scripts, but without any luck.

Services still don’t show up next to Problems (you can check here: https://probody-one.webflow.io/kosmetologia)

4

On my end I do see some elements being nested into the tabs, however it seems you have added a hide class and no elements are visible.

Screen Shot 2023-09-20 at 12.20.40
Screen Shot 2023-09-20 at 12.20.401920×1035 129 KB

This might come from you hiding the collection list directly which breaks the attribute. Can you wrap your list in a div and hide this wrapper?

5

Yep, it works. I should took to heart the instruction from Attributes’ site to not hiding Collection List (but I thought that it was related to the List not Wrapper.

Thanks!

1 Like
6

Great to hear this! You are welcome!