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" %}
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).
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 render in header_tags, 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 body_tags --> {% 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.
The obviously missing feature regarding javascript is the ability to bundle javascript files together to reduce the number of resource requests. Currently, if you want to bundle javascript files, you will have to use an external tool and copy the result into the CMS.
Please fill out the form below with your feedback or any questions you may have after working through the "Javascript" lesson.