JavaScripts
Creating a JavaScript File
Adding JavaScripts to your theme is simple. Just click the [+] at the bottom left of the Theme sidebar, then select ‘JavaScript.’ Then, to create a new JavaScript of your own, fill in the filename and click ‘Create.’ Your new file will be created, and opened so you can start editing right away.
In addition, if you’re going to use common JavaScript libraries like jQuery or Prototype, we’ve made those available in the new JavaScript dialog for you to select and have loaded into your theme. Simply select the file you want from the select box instead of ‘New Blank File,’ and we’ll add the file(s) for you. These files are copied right into your theme, so you can edit them as you wish.
Accessing Your JavaScripts
Harmony stores your JavaScripts in the /theme/:theme_id/javascripts/ folder of your site, so if you name your file effects.js, you can link to that file from the head of your document like so:
<script src="/theme/{{ theme.id }}/javascripts/effects.js" type="text/javascript"></script>To make things even easier, we provide some handy Liquid filters to make linking to your JavaScripts even easier. To link to a single JavaScript file (effects.js, for example), just add this to the <head> of your template:
{{ 'effects' | javascript }}This will produce the same markup as above. To link to several JavaScripts at once, just pass a comma separated list of filenames (without the .js) through the javascripts filter.
{{ 'jquery,effects,behavior' | javascripts }}This will produce the following HTML:
<script src="/theme/4b16c2c4cf395c1125000005/javascripts/jquery,effects,behavior.js" type="text/javascript"></script>IE Conditional JavaScripts
If you’d like to specify JavaScripts for IE only, we provide some handy filters for that as well. Rather than remember the syntax for the IE conditional comments, simply use a filter like this:
{{ 'jsforie' | ie_javascript }}This produces the following HTML:
<!--[if IE]><script src="/theme/4b16c2c4cf395c1125000005/javascripts/jsforie.js" type="text/javascript"></script><![endif]-->To specify a specific version of IE, <, >, <=, or >=, pass that after the filter like this:
{{ 'jsforie' | ie_javascript: '<=6' }}This will produce the following HTML:
<!--[if IE lte6]><script src="/theme/4b16c2c4cf395c1125000005/javascripts/jsforie.js" type="text/javascript"></script><![endif]-->Include multiple javascripts inside the IE conditional comment by using the ie_javascripts filter, which behaves the same as the javascripts filter.