Dawn theme: How to handle secion and block JavaScript events

Store Design
1

Hi,

Could someone give me instructions on how to handle section and block JavaScript events on Dawn theme?

For example, Shopify emits JavaScript events such as shopify:section:select, shopify:block:select, etc. I want to know how to handle these events on specific elements such as MenuDrawer and HeaderDrawer in performace-optimized ways.

Thanks.

2

Hey there @tobychen ,

In order to do something when a section is re rendered or a block selected/deselected, you would use those events: https://shopify.dev/themes/architecture/sections/integrate-sections-with-the-theme-editor#section-and-block-javascript-events

So for example you could set an event listener on the document to listen for the event: shopify:section:load. And in your function to deal with the event, you can log the event.detail and it will give you the information mentioned in the table from the link I shared above. So for shopify:section:load it will give you the section ID of the section that is being re rendered.

Does that help ?