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

Demonstrates how to add Deferred Async Javascript To Body.

Add Deferred Async Javascript To Body

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

Demonstrates how to add Anonymous Javascript In Place.

Add Anonymous Javascript In Place

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

Demonstrates how to add inline javascript once to body.

Add inline javascript once to body

Copy
{% add_javascript inline xxkr_once = position:'body' %}
function doSomething() {
alert('I did something!');
}
doSomething();
{% end_javascript %}

Demonstrates how to add Javascript.

Add Javascript

Copy
{% add_javascript "/jQuery" %}

Demonstrates how to inline javascript from template.

Inline javascript from template

Copy
<script>{% include javascript "/javascript/inlined/blog" %}</script>
OR
{% javascript js = "/javascript/inlined/blog" %}
{% if js is_valid %}
<script>{% include js %}</script>
{% endif %}