CMS Load messing with Slider Component

Attributes
1

Description

I have a website where I have Slider component added for various elements in the main locale and that works just fine the problem is that for other locales I have set up CMS load in a different element but I think they’re messing with each other.

Site URL

Steps to Reproduce

  1. Load the main locale and you’ll see how all the slider components work ok
  2. When you select another locale the list with CMS load loads items incorrectly

Expected Behavior

The idea is to load the items in the different locales like the ones already there when loading the locale for the first time.

Video/Screenshots

Thanks in advance.

2

Any ideas @Support-Luis ?

3

Hey @aaron!

Weird issue :thinking:

I’ve noticed that the CMS Load setup was removed. Could you please add it back to the page?

Also, are you suing any interactions on the items on this list? Maybe it is a simple fix such as adding fs-cmsload-restix = true to reset the interactions on the newly loaded items :thinking:

4

Yeah I had to remove the setup because this site is live and the issue was live for too many days and the company was not happy with that error being live.

I replicated the page and you can see the error in a this new page I created:

The preview link is the same but now the setup with the error is in the page called ‘Todas Copy’

Thanks

5

Thank @aaron! I’m afraid you did not share your read-only previously, could you please share it?

From what I can see, the issue comes from the slider classes not being removed properly when changing locale. I am not experienced in Webflow localization so I am not sure if there is a way to manage which classes the elements get depending on the active locale.

I’ve tried a “hacky” solution that involves checking if there is a Slider component and if not, change the class from shops_slider_slide to shops-collection-item. However I’ve gotten mixed results.

It works great for the French locale but fails on the Italian one. I am not sure if this is due to me working on an override and the way items are loaded.

Here is the snippet I was working with, in case you’d like to test

Replace the CMS Load script with this one.

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

Add this to the </body> custom code section of the page.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsComponents = window.fsComponents || [];

  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      console.log('slider Successfully loaded!');

      const [sliderInstance] = sliderInstances;
      if (!sliderInstance) {
        console.log('no slider found');
        window.fsAttributes.cmsload.init();

        window.fsAttributes.push([
          'cmsload',
          (listInstances) => {
            console.log('cmsload Successfully loaded!');

            const [listInstance] = listInstances;
            const { items } = listInstance;
            console.log(listInstance);
            console.log(items);

            items.forEach(({ element }) => {
              if (element.classList.contains('shops_slider_slide')) {
                element.classList.replace('shops_slider_slide', 'shops-collection-item');
              }
            });
          },
        ]);
      } else {
        sliderInstance.on('slideChange', function () {
          console.log('slide changed');
        });
      }
    },
  ]);
</script>
6

Thank you very much @Support-Luis

I’ll try the script you send but something tells me that if you’re having issues with that it’s not going to be any different on my end. I’ll try it anyway.

In the meantime here is the read only link:

Sorry I thought I shared it previously.

7

No worries @aaron!

Thank you for sharing the link. I see the CMS Load setup has been removed. Are you still looking for a solution?