How to properly update JS after editing a section in Customizer

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 < script > 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(); }); } }); < /script> Run code snippetExpand snippet

Comment (0)

You’ll be in good company