How to target a block if section ID is randomly assigned?

Technical Q&A
1

I’m trying to open and make visible a drawer when the user selects a block in the Shopify editor.

But I’ve noticed that the section ID is a random name… and if your theme is installed on another site this ID changes.

How do I target this section ID if it’s always random?!

This is what I’ve so far and it’s working except for the above problem.

document.addEventListener("shopify:section:select", function(event) {
    if (event.detail.sectionId === "template--14892421316801__home-hero") {
        alert("template--14892421316801__home-hero");
    }
});

thank you

2

Do you want to target on a single ‘home-hero’ section, or will it do it on all ‘home-hero’ sections. You can use sections.register to call events to a specific section, ex: https://i.imgur.com/VLfzjQN.png With this, the function only works when you call that section. If you call multiple ‘home-hero’ sections and only want to target on a single ‘home-hero’ you can add data to check then use if for this. Hope it helps!

3

Thank you for pointing me in the right direction I’ve found this script from Shopify that will help me.