Skip to content

CSS/JS Resources#

CSS Resources#

CSS Resources displays the batch list of all CSS records for the branch.

In order for the CSS resource to be output, all three of the following criteria must be met. The CSS resource must be:

  1. Either global, or assigned to a page that you expect to be output;
  2. Assigned to a resource group, and
  3. That resource group must be output in a template that gets rendered on the page.

When creating a new CSS resources you will find the following settings:

  • Code – Used to uniquely identify each CSS Resource
  • Type – There are three Resource Types supported:
    • Local File – Points to a file stored locally on the Miva server
    • External File – References a path to a CSS file hosted externally, typically from a CDN
    • Inline CSS – Outputs an inline CSS tag (there is no need to add the <style> tag to the template)
  • File Path – The relative path to the local file or the absolute path to the external file. “N/A” for inline CSS tags.
  • Tag Attributes – Preview of the CSS output including custom tag attributes that you have added.
  • Edit Attributes – Allows you to add HTML attributes and values to the resource tag.
  • Global – Toggle button determines whether the CSS resource appears on all pages. If the resource is not global, you can select which pages you want it to appear on by selecting the record and choosing pages in the three dots more menu.
  • Active – Toggle button determines whether the resource is active or not. A resource must be active to be output to the page.

JavaScript Resources#

JavaScript Resources displays the batch list of all JavaScript records for the branch. This section the same way the CSS resources are managed.

In order for the JavaScript resource to be output, all three of the following criteria must be met. The JavaScript resource must be:

  1. Either global, or assigned to a page that you expect to be output;
  2. Assigned to a resource group; and
  3. That resource group must be output in a template that gets rendered on the page.

When creating a new JavaScript resources you will find the following settings:

  • Code – Used to uniquely identify each JavaScript Resource.
  • Type – There are three Resource Types supported:
    • Local File – Points to a file stored locally on the Miva server.
    • External File – References a path to a JavaScript file hosted externally, typically from a CDN.
    • Inline Script – Outputs an inline Script tag (no need to include the <script> tag in the template).
  • File Path – The relative path to the local file or the absolute path to the external file. “N/A” for inline script tags.
  • Tag Attributes – Preview of the script output, including custom tag attributes that you have added.
  • Global – Toggle button determines whether the script appears on all pages. If the script is not global, you can select which pages you want it to appear on.
  • Active – Toggle button determines whether the JavaScript Resource is active or not. A script must be active to be output to the page.

Resource Groups#

Resource Groups allows developers to organize and manage CSS and JavaScript resources into customizable groups. These groups enable structured inclusion of resources on specific parts of the site, enhancing both maintainability and flexibility.Resource Groups serve as containers for CSS and JavaScript resources, which can then be referenced in templates using specific tags.

Template Code 

<mvt:item name="head" param="{{RESOURCE_GROUP_CODE}}" />

Warning

It is important to note that Resource groups are NOT Branch Specific. If deleted it will be deleted across all branches on the store.

Example Implementation#

Use Case: Adding Tracking Scripts to the Footer

Imagine you want to include a collection of third-party tracking scripts (like Facebook Pixel) in the global footer.

  1. Create the Resource Group:
    • Name: footer_tracking_scripts
  2. Add JavaScript Files:
    • Add Facebook Pixel scripts as resources.
    • Assign resource to footer_tracking_scripts.
  3. Update the Footer Template:
    • Add the group to the footer: 
      <mvt:item name="head" param="footer_tracking_scripts" />
  4. Save and Test:
    • Ensure the scripts load correctly on the site.