CODEWITHSUNDEEP
javascriptshopifyliquid
rosalynnas
rosalynnas

Reputation: 423

How does Shopify's {% javascript %} tag work?

I haven't been able to find anything on how this tag works. Why should I use the {% javascript %} instead of HTML script tag? Is there any difference? I've checked the Shopify cheatsheet which describes every other tag, as well as sifted through several pages of google and haven't found anything substantial.

Upvotes: 1

Views: 7091

Answers (2)

Karim Tarek
Karim Tarek

Reputation: 907

If you are adding the {% javascript %} tag in a theme section context then:

Sections can bundle their own script and style assets using the javascript and stylesheet tags. You should only need to use this for sections that are meant to be reused or installed on multiple themes or shops.

The scripts for all sections are concatenated into a single file by Shopify and injected into content_for_header. The injected <script> is set to load asynchronously with the defer attribute. The javascript tag is wrapped in a self-executing anonymous function and a try/catch, which means that variables get defined inside a closure and runtime exceptions won't affect other sections.

Reference

Upvotes: 3

David Lazar
David Lazar

Reputation: 11427

It is simply a convenience for you. It offers you no special capabilities. It nice because to the less than stellar technical person, someone who might get a little Liquid but not much else, it is pretty clear that the stuff inside the tag is likely Javascript. They recommend you only use these tags if your section is meant for a widely distributed theme, and or many shops. In other words, if you like script tags, go ahead and use them, no harm done.

Upvotes: 2

Related Questions