I’ve been trying to use these, since they mean that you can include CSS and JS for your section, which only gets output once per section, even if you add multiple sections of the same type. And the Shopify docs say that they concatenate all the CSS and JS for all sections into a single file when the page is rendered.
Really handy - in theory.
Two problems, though:
1. Cache invalidation is typically not workingWhen I make a change to code in those tags, it’s not reflected on Shopify until I try multiple times to make more changes, re-save, re-upload (using Shopify CLI for themes with ‘shopify theme dev’). Eventually it loads. And often on deployment (e.g. via the Shopify Github integration) it’s not recognised either, and I have to delete the theme and re-upload it! It’s been like this for at least 3 years. I can maybe live with this if it wasn’t for point 2.
Am I doing something wrong that’s causing this cache issue, or will Shopify accept this is a platform bug that needs to be fixed?
2. Script contained within {% javascript %} isn’t always executed in Theme CustomiserIn Theme Customiser, it seems that any script contained within the {% javascript %} tag on a section that has been newly added to the page is not executed. It’s the same for inline script contained in tags.
That means my section doesn’t work or render properly in the Theme Customiser when it needs JavaScript to work (e.g. a slideshow). That’s a obviously a poor merchant experience.
If I save the section on the page and reload Theme Customiser, it works. On the storefront, it works.
I know about the shopify:section:load event listener, but that doesn’t work when I use script in the {% javascript %} Liquid tag, because the script isn’t executed to add a listener for that event.
It seems the only way is to include my own external JS file on all pages from theme.liquid (e.g. ). I’d rather not do that if I can help it, as it adds script to the page even if the section isn’t used on that page, worsening performance. It’s also more hassle having to edit theme.liquid and maintain a separate .js file for each section.
What is the official recommendation on where to place JavaScript code for sections, that will be reliably executed in Theme Customiser and can receive ‘shopify:section:load’ events, even when the section is newly added to a page?
Thanks for describing your workflow and the issues you’re hitting up against. Since there are a couple options for including scripts and styles it can be tricky to find the best approach for what you need to achieve. Typically I’ve seen the {% stylesheet %} and {% javascript %} tags used when there are relatively small amounts of CSS/ JS being added to a section, or for development purposes to have access to Liquid/HTML and CSS/JS within the same file.
If you’re including a significant amount of JS/CSS into a specific section I’d recommend creating a seperate JS file that would live the /assets directory, and can be included using the asset_url filter. An example of this on Dawn would be the media gallery JS file that’s included in the featured product section. Would this approach work for you?
In your example, Dawn uses a line of code as below within the section file:
I’ve tested that on the theme I was working on, and it doesn’t work for a couple of reasons:
It outputs the script tag on the page every time the section is included. If a merchant has that section 4 times on a page, we’ll get 4x those script tags when we only need it once.
It still doesn’t execute the JavaScript in Theme Customiser when a section has been newly added to the page.
The Shopify docs say:
The content from {% javascript %} tags across all sections is concatenated into a single file by Shopify, and then injected into the theme through the content_for_header Liquid object. The file is asynchronously loaded through a tag with the defer attribute.
So {% javascript %} solves the issue where the script would be output multiple times on a page, but we still have the problem where it doesn’t execute in Theme Customiser reliably, and also we have the cache problem.
The {% javascript %} tag is advertised in the docs as being the way to include JavaScript assets for a section, but due to the above, that seems quite misleading?
Is Shopify able to either fix these two issues, or provide an alternative that doesn’t require us to include global JS in theme.liquid for every section?
Or honestly at this point even if there was some official admittance that {% javascript %} isn’t supported and I don’t have any choice but to use global JS, that would at least help us know where we stand.
@Liam Bump! Im also experiencing the same problem, I dont understand why the javascript scripts are not executed when a new section is added. Im currently working on an app which installs sections to themes, and I dont want to create also an asset file for every merchant, I really hoped that the {% javascript %} tag would execute on section add but unfortuantly thats still not the case…