Multiple sections crash the Shopify editor: shopify:section:load

Technical Q&A
1

I’m having a problem with Shopify editor and a javascript module.

I’ve created a section for testimonials slider, everything is working except when I add more than 2-3 of these sections: every time I edit something (text, change image, select link) the Shopify editor freezes.

I found out that every time I select an image or write text (even if it’s another section) the slider.init() gets fired.

document.addEventListener("shopify:section:load", (e) => { 
    slider.init(); 
});

document.addEventListener("DOMContentLoaded", () => { slider.init() });

I’ve tried to only fire the slider if its section is loaded… but it doesn’t work.

document.addEventListener("shopify:section:load", function(e) {
    if(e.detail.sectionId === '{{section.id}}') {
        slider.init();
    }
});

document.addEventListener("DOMContentLoaded", (e) => { slider.init() });

I’m out of ideas. Do you guys have a solution for this?

What I’m trying to achive:

  1. when the Shopify Editor is opened > start all “testimonials sliders”
  2. when a new “testimonials sliders” section is loaded > start the slider
  3. Prevent the Shopify editor from freezing because every time :load is fired it tries to re-fire slider.init()

thank you in advance

2

Hi @crusco ,

You can try the following:

  • Add class for testimonials section. Refer:

Screenshot.png
Screenshot.png901×439 14.1 KB

  • Then you change the code:
document.addEventListener("shopify:section:load", function(e) {
  if (document.getElementById(`shopify-section-${e.detail.sectionId}`).classList.contains('testimonials-section')) {
    
  }
});

Hope it helps!

1 Like
3

Thanks a lot. Yep, that definitely fixes it.

1 Like