Sometimes certain JavaScript files of a theme are meant to be included on a page without loading the whole theme. This section describes a possible solution that is supported in our theme build.

First of all you need a script that is meant to be embedded on another page. For simplicity the goal for now is to write something to the console. The script could be located at src/console-message.js and could look like this:

console.log("Standalone feature loaded!");

In order to include this script into your theme build you need to define a script entry in your theme.config.json and configure it in a special way:

{
  "name": "your-theme",
  ...
  "scripts": [
    {
      "type": "webpack",
      "src": "src/js/your-theme.js"
    },
    ...
    {
      "type": "webpack",
      "src": "src/js/console-message.js",
      "runtime": "console-message",
      "include": false,
      "smartImport": "console-message"
    }
  ]
  ...
}

In addition to the default script src/your-theme.js we have defined a new script entry for src/console-message.js. The script makes use of a couple of configuration options:

The theme can now be build and uploaded to the studio. When inspecting the generated content for the theme there will be a CMJavaScript document named console-message.js in the theme's js folder. As it contains a standalone script you can directly link the content to any page regardless of its currently selected theme.