24/7 Support: 800.608.6482

How To Guides

Try our new AI assistant by clicking the chat icon in the lower right corner.

How To Guides

JavaScript Resources and Resource Groups

1. Overview

2. Edit Source

3. Edit Attributes

4. Default Attributes (Comments)

5. Default File Path & Manually Setting The File Path

6. Adding a JS Resource to a Specific Page

7. JavaScript Resource Groups

8. Resource Group Tab

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:

title-here

title-here

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.

title-here

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.

title-here

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.

title-here

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:

title-here

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.

combined resource

Assign Resources

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.

Subresource Integrity Generation

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

title-here

This will bring up a page to select which pages the script gets output on:

title-here

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:

title-here

Then you can add JavaScript Resources (local files, external files and inline scripts) to be included in this Group

title-here

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)

title-here

title-here

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.

title-here

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.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.