How to properly update JS after editing a section in Customizer

Rostislav333
Shopify Partner
8 0 0

I have a Shopify section with a SplideJS slider. The problem was a buggy update of the slider in the customizer. I found a way to update correctly in the customizer and the method works. But the problem is that I am duplicating the code for this. Is there any other way to avoid this? Maybe I'm doing it wrong

document.addEventListener('DOMContentLoaded', () => {
    const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
      pagination: false,
      gap: 1,
      drag: false,
      perPage: 6,
      perMove: 1,
    });
    rlHotspotSlider.mount();

    if (Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
          pagination: false,
          gap: 1,
          drag: false,
          perPage: 6,
          perMove: 1,
        });
        rlHotspotSlider.mount();
      });
    }
  });
Replies 0 (0)