JavaScript Resources

How to Add and Manage JavaScript Resources in Miva

Miva allows you to manage JavaScript resources from the Resources section of the admin. These resources can be global or page-specific, and are organized through Resource Groups so you can control when and where scripts are loaded.

Step 1: Access JavaScript Resources

Path: User Interface > Resources.

Select the JavaScript Resources tab.

Step 2: Add a New JavaScript Resource

1. Click Add JavaScript Resource.
2. Fill out the required fields:

• Code – A short identifier for the resource (e.g., zoom_js).
• Type – Choose one of the following:
  • External File – A JavaScript file hosted outside your store (e.g., CDN).
  • Inline JavaScript – JavaScript added directly into the page.
  • Combined Resource – Group of JavaScript Resources within the store.
• File Path / Content – Either enter the URL for external files, uploaded file path or paste inline JavaScript code.
• Attributes – Add HTML tag attributes (e.g., async, defer)
• Global toggle:

ON = Script loads on all pages.

OFF = Script loads only on assigned pages.

• Active toggle to enable the resource.

6. Click Add.

Step 3: Assign JavaScript Resources to Groups

Resource Groups act like containers for CSS and JavaScript resources.

Path: User Interface > Resources > Resource Groups.

1. Create or edit a group
2. Add your JavaScript resource(s) to the group.
3. Save.

Step 4: Reference Groups in Templates

For a JavaScript resource to output, its group must be included in the template.

1. Open the template for the page you want to update.

2. Insert the Resource Group reference, e.g.:

    

   <mvt:item name="head" param="zoom_js"/>

3. Save and preview.

Example: Adding a Product Zoom Script

1. Add the Resource
   • Code: zoom_js
   • Type: External File
   • File Path: https://cdn.example.com/zoom.js
   • Global: OFF
   • Pages: Product
   • Active: ON
   • Assign to Group: zoom_js
2. Assign to Group
   • Add zoom_js to the Zoom JS group.
3. Update Template
   • Ensure the Product template includes Zoom JS.

Result: The zoom script loads only on product pages.

Shadows Framework Resource Groups

The Shadows framework includes three preconfigured Resource Groups, these default groups are placed within the framework templates. The resource groups can be used to hold newly added resources (custom JavaScript). 

• css_list = Outputs within the Head tag on each page template and typically holds CSS Resources.
• footer_js = Outputs within the Global Footer template and typically holds JavaScript Resources.
• head_tag = Outputs within the Head tag on each page template and typically holds JavaScript Resources. 

Best Practices

• Use Global only for scripts needed on every page.
• Group related scripts together using combined resource groups for better optimization.
• Keep inline JavaScript minimal; prefer external files for maintainability.
• Regularly audit inactive or unused scripts to keep your site lean.

By managing JavaScript resources through the Resources interface, you gain full control over when and where scripts are loaded, improving performance and maintainability of your store.