How to track section content updates in theme customizer?

Technical Q&A
1

Hi there, I’m developing a theme and I’ve created a section to allow the store owner to change content as he/she likes.

I would like the preview to reload the scripts when the store owner updates the content.

The HTML structure of the theme preview is updated, but unfortunately it doesn’t re-run the scripts that are listening to the document load event.

Is there any event I can listen to? How do I track content changes?

Thank you

2

Hi Allessandro4,

Well you can listen to events when section load/unloads. For example:

function SectionShouldGetLaidAgain(e){
	const section = $(e.target).children('[data-section-type]').data('section-type') || false;
        switch (section) {
	    case 'MySuperAwesomeSection':
		  MySuperAwesomeSection.letsGetLaidAgain(section_id);
		  break;
	}
}
const MySuperAwesomeSection  = {
   letsGetLaidAgain: function(section_id){
      /// get updated contents using this https://shopify.dev/docs/themes/sections/section-rendering-api
   }
}

$(function(){
	$(document)
	.on('shopify:section:load', SectionShouldGetLaidAgain)
	.on('shopify:section:unload', DO_YOUR_STUFF)
	.on('shopify:section:select', DO_YOUR_STUFF
	.on('shopify:section:deselect', DO_YOUR_STUFF)
	.on('shopify:block:select', DO_YOUR_STUFF)
	.on('shopify:block:deselect', DO_YOUR_STUFF);
});
1 Like
3

Great! Thank you bro.

For anyone coming later, you can find more information about it in the Shopify documentation (develop-theme-sections-integration-with-theme-editor).

Plus this came very handy: https://www.shopify.com/partners/blog/the-beginner-s-guide-to-building-shopify-themes-with-sections

1 Like