How To Guides
JavaScript Resources and Resource Groups
4. Default Attributes (Comments)
5. Default File Path & Manually Setting The File Path
6. Adding a JS Resource to a Specific Page
9. Controlling Order of Scripts Output
10. Manually Call In Script on Any Page
Overview
Miva 9.0007 introduces a brand new JavaScript Asset Management tool called JavaScript Resources and JavaScript Resources Groups. Together they are a powerful tool allowing you to centralize and simplify the management of your JavaScript files as well as edit your JavaScript files right from the Miva Admin. At a high level this new feature allows you to:
- Maintain a single place to update and edit all JavaScript files
- Add inline, local files and external JavaScript Resources
- Edit JavaScript Source Code via the admin for local files (overwrites file on server)
- Use JS files in custom file paths on Server
- Version Control + Miva Template Variables for all Inline Scripts
- Add custom attribute tags on inline script tags (async=”true”)
- Global Scripts or Page Specific Scripts (ex include a js file only on PROD)
- Set the order of the JS files being output to the page
- Active / Non-Active toggle
- Group multiple JavaScript assets together into a Resource Group
Code: Used to uniquely identify each JavaScript Resource
Type: There are 4 resource types supported
Combined Resource - This allows you to combine multiple files and output them as a single file.
Local File - Points to a file store locally on the Miva server
External File - References a path to a JS file hosted externally, typically from a CDN
Inline Script - Outputs an inline Script Tag
File Path: The relative path to the file (local file) or the absolute path to the external file. N/A for inline script tags
Script Tag Attributes: Preview of the script output including custom tag attributes you have added. These can be added or removed by selecting the resource from the batch list and clicking the “Edit Attributes” button.
Global: Whether the script appears on all pages. Default is global. If a script is not global, you have the ability to select which pages you would like it to appear on by selecting the resource from the batch list and clicking on the “Pages” button.
Here you can assign a JS resource to be output on a specific page vs all pages (global)
Active: Whether the JavaScript Resource is active or not. A script must be active to be output to the page.
Edit Source
In Admin editing of JavaScript Files is now available. This allows you to make changes to your JavaScript files without having to use FTP to manage them. To edit the source of a file, select the resource from the list and click the “Edit Source” button. This will bring up a text editor to modify the contents of the file.
Local Files - For files that live locally on your Miva Server, when editing, Miva will open the file and allow you to make changes and resave the file on the server to the same location. It's important to note that if you are editing files via the admin and via FTP at the same time, it's possible to overwrite your changes. Its up to you, the developer, to ensure the JS files are not being overwritten by someone else. With local files, there is also no version control or access to Miva variables or template language.
Inline Script - Inline scripts allow for admin editing as well as automatic version history and Miva variables and template language. Because these inline scripts get compiled just like any other page template you can use the power of the Miva Template Language to set variables. The scope of what variables are available will depend on what page the JS Resource is being output on. For example if you wanted to create a JS resource for Adwords Conversion tracking and pass in the order total, as long as you are outputting the script on the INVC page, those variables will be automatically available.
External Files - Editing Is not available for external files
Edit Attributes
All three JS Resource Types (local, inline, external) support adding custom Attributes to the Script Tag Output. To add your own attributes to the script tag, select the resource and click “Edit Attributes” button. Here you can add custom name/value pairs which will be output in the script tag on the page.
Page Source Output:
Default Attributes (Comments)
There are two default data attributes that get automatically added to all JavaScript Resources. These tags are used as comments to help identify the Group the script is apart of as well as the unique code of the script itself.
These data attributes are: data-script-group and data-script-code
Example:
These will always appear after the src attribute and are not editable via the admin (they cannot be removed)
Default File Path & Manually Setting The File Path (local files)
When uploading local files, Miva will always upload all files to a new folder in the following path:
/mm5/scripts/00000001/file_name.js
Where /mm5/ is your base directory and 00000001 is your store number. These two values could change based on your specific install of Miva.
This path cannot be changed for files uploaded via the admin, however you can manually FTP files to any path on the server and then manually set that path when adding the file:
This allows you to have your JS files live wherever makes sense for your site while still taking advantage of this new JavaScript Asset Management tool. This is is how all JS files are linked in all v2 ReadyThemes.
Combined Resource
New in 9.13 (or greater) there is new resource type called "Combined Resource." This allows you to take multiple JavaScript files (or CSS files if working with CSS assets) and output them into a single file. Miva will automatically concatenate them together in the order you specify.
Once you have your combined resource, you can assign it to output any resource group so it outputs on the page.
Note: Only local JavaScript Files are able to be combined into a single file. Inline and External JavaScript files cannot be combined.
File Output
The combined JS file will get output using clientside.mvc and will look like this:
<script type="text/javascript" src="https://www.domain.com/mm5/json.mvc?Store_Code=NAD&Function=JavaScriptCombinedResource_Output&JavaScriptCombinedResource_Code=all_js" data-resource-group="head_tag" data-resource-code="all_js"></script>
Even though its extention is not .js, it will output the correct content type of "test/javascript" so all browsers will treat it just like any other JavaScript file.
Subresource Integrity Generation
New in Miva 9.13 is the ability to have Miva generate the subresource integrity attribute on any JavaScript file. To learn more about the benefits of subresouce integrity attributes click here
If using the SRI attribute you'll want make sure you re-generate it after any changes or else the file will fail to load.
There is now a new button for "Generate SRI" whcih allows you to generate an SRI for any file using SHA256, SHA385, SHA512 or All. You can also clear the SRI as well.
Adding a JS Resource to a Specific Page
One nice feature of the Asset Management Tool is you can specify tracking scripts to only be output on certain pages. This is useful for example when adding Conversion Tracking scripts where you only want the JS output on a specific page.
To do this add the script and set the Global flag to off/false. Then select the script from the list and you’ll see a “Pages” Button
This will bring up a page to select which pages the script gets output on:
JavaScript Resource Groups
JavaScript Resource Groups allow you to group multiple JS files or inline scripts together to be output together. These could be output globally on every page, or page specific.
By default there is a single resource group called head_tag. This tag is included on every front end page and allows you to add your own custom JS files to be output when it runs.
You can also create your own custom resource groups. For example, if you wanted to create a JavaScript Resource Group that was included in the global footer for tracking scripts you could do that:
Then you can add JavaScript Resources (local files, external files and inline scripts) to be included in this Group
Lastly, you would need to add the resource group tag to the global footer (or wherever you want it to show up)
Resource Group Tab
There is a separate Resource Group Tab to help manage resource groups as well as quickly see all the JavaScript files that are apart of a specific group. This also allows you to change the sort order (order the files are output on the page) for the files assigned to that group. (See next section below)
Controlling Order of Scripts Output
Often times it is critically important that one JS Resource be output before another. The sort order of the files can be controlled via the admin under JavaScript Resource Groups Tab. This sort order determines the order the script tags are output to the page. Here you can click a resource group and then click the “JavaScript Resource” button to see all the Resources assigned to that Group. From here you can change the sort order like any other batch list in Miva.
Manually Call In Script on Any Page
You can manually include any JS file loaded under JavaScript Resources using the head item. Note: the head tag must first be assigned to the page, however it is assigned to all front end pages by default.
Example:
This code will include the JS Resource into the page regardless of whether it is marked as Global or assigned to the specific page. However the JS Resource must be active to be included in the page.