Beginner Theme developer, trying to register section instance

djoe
New Member
1 0 0

I am trying to learn how shopify themes work on a deep level with javascript. The approach I'm taking is trying to untie the knot that is the vendor.js file in the express theme. I want to understand how it all works, and I'm very confused at this one part. all i would like to do is first understand how these sections are registered and the code within is executed.

 

(function (sections) {
    sections = 'default' in sections ? sections['default'] : sections;

    sections.register('header', {

        onLoad() {
            console.log('hello world');
        }

    });

    window.addEventListener('DOMContentLoaded', () => {
        sections.load('*');
    });
}(Shopify.theme.sections));

 

 

above is the basic boilerplate of my js file, making sure to register the 'header' section, which does show up on the shopify.theme.sections.registered object. however the code in the onLoad block is not being run. i understand that after the DOMcontentloaded event happens, the section is registered probably due to some magic in the vendor.js file (which is minified and really tough for me to grasp) and so the 'header' section shows up under shopify.theme.sections.registered however it's not showing up in the shopify.theme.sections.instances array, and I believe this is why the console.log is not firing.

I'm not sure why it isn't showing up in the instances array, I can't really understand the minified vendor file. I'm kinda stuck, and I'm in over my head. anyone know what i could be missing?

thanks!

 

0 Likes