Add_javascript

Add_javascript

{% add_javascript %}

Add a script asset to the current page via a <script> tag

{% add_javascript value attributes %}

{% add_javascript
value
attributes
 
Key:value pairs with unique keys. May use the variable arguments syntax. Attributes for the script tag and optionally the position that you want it to be placed
%}

attributes

position
 
Where to output the script in the current page. Must be 'head', 'in_place', or 'body'. If 'head', the script will be output inside the HTML head, if 'in_place', the script will be output immediately to the the template. If 'body', the script will be output at the end of the 'body' tag. Any scripts added to the head or body will only be added once and additional attributes will be combined from each time it is added. If it is added to both the head and body it will be includined in the head. The default is 'head'
async
 
True to include the async attribute on the script tag, or false to omit it. If the same script is added multiple times with both true and false specified, the script tag will include the async attribute
defer
 
True to include the defer attribute on the script tag, or false to omit it. If the same script is added multiple times with both true and false specified, the script tag will include the defer attribute
other
 
Additional attributes to include on the script tag. Additional attributes must have string values

Related

{% add_stylesheet %}

Add a stylesheet asset to the head of the current page via a <link> tag

{% add_javascript inline %}

Outputs javascript code in an inline script

{% add_stylesheet inline %}

Outputs an inline stylesheet in a <style> tag.

{% add_javascript inline %}

Outputs javascript code in an inline script

{% add_javascript inline [uniquename] [= attributes]? %}

{% add_javascript
inline
uniquename
 
If included, only one inline script will be included for each uniquename. This makes it safe to add an inline script in one or more partial templates which may be included multiple times in a page.
=
attributes
 
Key:value pairs with unique keys. May use the variable arguments syntax.
%}

attributes

position
 
Where to output the script in the current page. Must be 'head', 'in_place', or 'body'. If 'head', the script will be output inside the HTML head, if 'in_place', the script will be output immediately to the the template. If 'body', the script will be output at the end of the 'body' tag.
other
 
Additional attributes to include on the script tag. Additional attributes must have string values

{% end_javascript %}

This method creates a new liquid context for storing and manipulating variables.

Related

{% add_stylesheet %}

Add a stylesheet asset to the head of the current page via a <link> tag

{% add_javascript %}

Add a script asset to the current page via a <script> tag

{% add_stylesheet inline %}

Outputs an inline stylesheet in a <style> tag.

Examples

Add JavaScript to the body with deferred or async loading (e.g. with add_javascript options).

Add Deferred Async Javascript To Body

Copy
{% add_javascript "/main" defer:true async:true position:'body' %}

Add inline anonymous JavaScript in place (e.g. for one-off scripts) with add_javascript inline.

Add Anonymous Javascript In Place

Copy
{% add_javascript "https://cdn.thirdpartyservice.com/path/to/script" position:'in_place' crossorigin:'anonymous' %}

Add linked or inline JavaScript with add_javascript; use path, attributes, or inline blocks (once, in place, with nonce).

How to use the add_javascript method

Copy

Add linked javascript from a path

{% add_javascript "/jQuery.js" %}
Adds the javascript file from the specified path to the page. This is the simplest way to add javascript to a page, and by default adds it in the head of the page.

Add linked javascript from a path with attributes

{% add_javascript "/jQuery" position:'head' async:true defer:true %}
Adds the javascript file to the head of the page with the async and defer attributes.

Add third-party javascript to the body with additional custom attributes

{% add_javascript "/https://cdn.thirdpartyservice.com/path/to/script" position:'body' crossorigin:'anonymous' integrity:'sha384-...' %}
Adds the third-party javascript before the </body> tag with the additional custom attributes.

Add inline javascript once to body

{%- add_javascript inline xxkr_once = position:'body' -%}
function doSomething() {
alert('I did something!');
}
doSomething();
{%- end_javascript -%}
Adds the inline javascript to the body of the page. Because the script is named (xxkr_once), the javascript will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each script to be included should have a unique name.

Reusing the same inline script name prevents the second script from being added

{%- add_javascript inline xxkr_once -%}
doSomething();
{%- end_javascript -%}{%- add_javascript inline xxkr_once -%}
doSomethingElse();
{%- end_javascript -%}
Because both scripts use the same name (xxkr_once), only the first script will be added to the page and the second script will be ignored. This may sometimes be the desired behavior, but to include both scripts either remove the name or ensure that both scripts have unique names.

Add inline javascript in place

{%- for item in (1..3) -%}
{%- id itemid = prefix:'item_' -%}
<div id="{{itemid}}">{{item}}</div>
{%- add_javascript inline = position:'in_place' -%}doSomething('{{itemid}}');
{%- end_javascript %}
{% endfor -%}
Adds the inline javascript immediately to the template, which will result in a separate script tag for each item.

Add inline javascript in the head with a nonce attribute

{%- var nonce = '...' -%}
{%- add_javascript inline = position:'head' nonce:nonce -%}
doSomething();
{%- end_javascript -%}
Adds the inline javascript to the head of the page with a nonce attribute. The nonce attribute is used to prevent cross-site scripting (XSS) attacks by ensuring that the script is only executed if the nonce is valid. The logic for determining the nonce is left to the developer.