CMS Nest et Interactions not working together

Attributes
1

Hi,

I used CMS Nest + CMS Tabs together, and it works great.
Now, on the child element of the Nest, I need to add a hover effect, but it doesn’t work.
In my case:
Parent collection = Category
Child collection= Partners

I tested with Webflow Interactions or directly with Javascript, but if the Collection works with CMS Nest, the hover is not displayed.

On this page, section “Nos partenaires”, here is the CMS with hover not displaying: Partenaires

An example of what the hover should be doing:
https://resilience-staging.webflow.io/untitled

Read-only:
https://preview.webflow.com/preview/resilience-staging?utm_medium=preview_link&utm_source=designer&utm_content=resilience-staging&preview=bc68c1394b9631e1d98867396501334d&pageId=64ff060f458b7ce85b16c22a&workflow=preview

Thank you for your help and have a good day!

2

hey @hello14! You can do this by resetting Webflow’s interactions engine by code. I also went ahead and added a “safety” measure to ensure CMS Nest and CMS Tabs always work together by preventing the tabs from initializing without all the content.

You’ll need to change the CMS Tabs script in your <head> to

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

And add this callback function in your </body>

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

      window.fsAttributes.cmstabs.init();

      window.fsAttributes.push([
        'cmstabs',
        (tabsInstances) => {
          console.log('tabs Succesfully loaded!');
          window.Webflow && window.Webflow.destroy();
          window.Webflow && window.Webflow.ready();
          window.Webflow && window.Webflow.require('ix2').init();
          document.dispatchEvent(new Event('readystatechange'));
        },
      ]);
    },
  ]);
</script>