As a developer, it is important to understand Javascript in Marketpath CMS. To add Javascript to your page you add the following code within the page template or any of its partial templates.

{% add_javascript "main" %}

Caching & CDN

All Javascript in Marketpath CMS is served over the CDN which helps the Javascript files download extremely fast. While the caching would normally cause a significant delay between when you update a file and when it is available on the website, we have added a cache busting mechanism that ensures visitors will always get your latest javascript updates as soon as they are published.

As a result, every URL for a javascript file on your site ends with a question mark followed by a series of numbers. If you need to reference that javascript file somewhere else (eg: another site), you should copy the full URL excluding the question mark and anything following it (so http://domain.com/path/to/file.js?123456789 becomes http://domain.com/path/to/file.js).

Additional Javascript Parameters

The CDN is a helpful tool to make your website fast, but there are other tools that we have built into our templating engine that can also improve page load performance. The most notable is the ability to easily load scripts asychronously and defer their execution to prevent parser blocking. It's actually much simpler than it sounds, you just have to be careful how you use it.

To use this feature, you simply have to include the async and defer properties when you include the javascript.

{% add_javascript  "main" async:true %}

{% add_javascript "otherJS" defer:true %}

Just be careful how you use this - if another script relies on functionality in this script you may not be able to take advantage of async and deferred scripts without experiencing some odd bugs. Also, if the same script is included multiple times with different options you could see unexpected behavior.

You can add Javascript in the header, in_place, or in the body. Adding to the header is the default if no value is provided.

<!-- add JS to automatic_markup.header_scripts, both are the same -->
{% add_javascript "main" %}
{% add_javascript "main" position:'head' %} 

<!-- add JS to render in place -->
{% add_javascript "main" position:'in_place' %}

<!-- add JS to automatic_markup.body_scripts -->
{% add_javascript "main" position:'body' %}

Javascript added using head or body, whether in the page template or included partial templates, will be rendered in the order they were added using add_javascript.

Bundling

Each javascript object can bundle other scripts using Pre-Includes (output before this file) and Post-Includes (output after). Nested includes are allowed. A given script is included once per compiled file. If the same helper is a pre- or post-include on several top-level scripts, visitors may still download it more than once (once per compiled bundle).

Check Minify to minify the whole compiled bundle, including nested includes. If a minified script fails in the browser, turn minify off to debug, then turn it back on.

For Liquid inside javascript, check Parse Liquid Code. See How to Use Liquid in Javascript and Stylesheets.