Including, Minifying and compressing Javascript and CSS

Overview

Aurora gives you the ability to minify Javascript and CSS files along with compressing them into a single file, thus saving your customers a significant amount of time waiting for the page to complete.

📘

It is very important that all files end with ".js" and ".css" and you do not include these file extensions when calling the code.

Below is an example that you can use to include jQuery, jQuery UI and 2 core Aurora files.  

{include_js files=jquery.min,jquery-ui.min,r:config,r:generic,$dynamic_js_template,$page_js_template}

If you are including core Aurora files, you can use either r3: or r: . If these are not included, it will look in your own templates js folder for these files.  For example, if your templates folder is "example.com" it will look in "templates/example.com/_js"

All Javascript files are expected to be in the _js folder, as all CSS files are expected to be in the _css folder.  

Overriding the type property with Javascript

The default script type is always text/javascript when using the include_js template function.

However, you can override the type parameter as follows:

{include_js files="jquery.min" type="text/plain"}

Which will generate:

<script src="/templates/example.com/_js/jquery.min.js?v=1" type="text/plain"></script>

To remove the type parameter, simply set it to false e.g.

{include_js files="jquery.min" type=false}

Which will generate:

<script src="/templates/example.com/_js/jquery.min.js?v=1"></script>

Using async and defer properties with Javascript

You can also use the async and defer script parameters with the include_js template function as follows:

{include_js files="jquery.min" async=true defer=true}

Including additional attributes

The attributes parameter may be used to specify an array of additional attributes to apply to the script tag:

{assign var=attributes value=['data-custom-attr'=>'myvalue', 'data-other'=>5]}

{include_js files="jquery.min" async=true defer=true attributes=$attributes}

Which will generate:

<script src="/templates/example.com/_js/jquery.min.js?v=1" async defer data-custom-attr="myvalue" data-other="5" type="text/javascript"></script>

To add an attribute with no value, use null:

{assign var=attributes value=['data-custom-attr'=>null]}

{include_js files="jquery.min" attributes=$attributes}

Which will generate:

<script src="/templates/example.com/_js/jquery.min.js?v=1" data-custom-attr type="text/javascript"></script>

The following warnings may be emitted when using the attributes parameter:

📘

The async and defer parameters, if specified, take precedence if async and/or defer are also specified as attributes.

Including Javascript/CSS on specific pages

There are 2 methods you can use to do this:

1. Editing the header.tpl.html and including logic in place
2. Editing the specific template file and including logic in place

Editing the header.tpl.html

There are a variety of tags in place within Aurora that you can use to calculate where you are.  In the example below, we are giving values to $dynamic_css_template and $dynamic_js_template, so these JS/CSS files are included on the page, providing you are in the members area

{f in_array("members", $pageType)}
  {assign var='dynamic_css_template' value='reviews,members'}
  {assign var='dynamic_js_template' value='r:members'}
{/if}

Editing specific template page

In the below example, we are saying to include custom-home.js along with home.css and tabs.css on only this file.  

{include file="_includes/header.tpl.html" page_js_template="custom-home" page_css_template="home,tabs"}

The use of page_js_template is simply for demonstration purposes.  You can call it any variable you want, as long as in header.tpl.html you reference it as part of your "{include_js}" code.  

📘

You cannot compress any 3rd party JS files, as these must be linked to externally.