Script handling

script-handling.js are hosted in /SystemScripts/ and are used to dynamically load the required depenencies (scripts & css-files) needed per environment.

The script will detect if the site is visited in stage or production, and choose the appropriate folder to load dependencies from.

An array containing the needed script are defined before loading the script-handling.js script.

This script is used while the site is under development, and should be replaced with standard includes when the site is set in production.

Working example for a default Responsive Base installation:

<script>
    var fileList = [
        {
            fileName: "font-awesome.min.css"
        },
        {
            fileName: "responsive-base.css"
        },
        {
            fileName: "responsive-base-libraries.js"
        },
        {
            fileName: "responsive-base-core.js"
        },
        {
            fileName: "responsive-base-views.js"
        },
        {
            fileName: "responsive-base-modules.js"
        },
        {
            fileName: "client.js"
        }
    ];
</script>
<script src="/SystemScripts/script-handling-v1.js"></script>

The fle client.js should always be renamed to reflect customer name

When site is in production

Script-handling must be removed after development and replaced with standard includes:

<link href="/M1/production/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/M1/production/css/responsive-base.css" rel="stylesheet" type="text/css"/>
<script src="/M1/production/scripts/responsive-base-libraries.js"></script>
<script src="/M1/production/scripts/responsive-base-core.js"></script>
<script src="/M1/production/scripts/responsive-base-views.js"></script>
<script src="/M1/production/scripts/responsive-base-modules.js"></script>
<script src="/M1/production/scripts/client.js"></script>

Arguments

The original code with annotation can he found here: http://responsive-base.jetshop.se/systemscripts/script-handling-v1.js

filename

fileName string (required)

If fileName is simple file name, i will be loaded from stage, production or localhost depending on environment. If fileName contains double slashes (//) it is assumed that the name is an absolute path, and will be inserted as is without additions or modifications.

version

version int (optional)

If version is 0, nonexistent or not an integer, it is ignored. Any other integer will be added as a querystring ?v=X to the url to avoid client caching of assets after important updates. Increment the version number after publishing the updated asset to the production environment.

channelLoad

channelLoad object (optional)

Without this optional object, an asset will always load from channel 1 (m1) when in stage or production. Through the channelLoad object it is possible to define from what channel to load the asset, with regard to the channel the visitor is currently in. Template & example:

channelLoad: {
    ch1: "m1",
    ch2: "m1",
    ch3: "m3",
    ch5: "m3"
}

If the visitor is currently in channel 1 or 2, the asset will be loaded from channel 1 (m1). If the visitor is currently in channel 3 or 5, the asset will be loaded from channel 3. If the visitor is currently in channel 4, this asset will be ignored and will not be loaded.

excludeInProduction

excludeInProduction bool (optional)

Do not include this file if environment is production

excludeInStage

excludeInStage bool (optional)

Do not include this file if environment is stage

Local access

Through the querystring ?local=true (which can be added to any store url), the assets will load from http://localhost:[localPort]/stage/css|scripts/[fileName] The localhost server root folder should be set to the repository root (customer-clientName). The default local port is 8081. This can be changed by simply declaring a localPort variable before this script is initiated (i.e. var localPort = 1234).

Working with script handling active on localhost

To easier work with script handling from localhost we use the Node package http-server and has a preconfigured npm script called local.

To start the local server you simply run npm run local and then you need to use another terminal window/tab to run grunt / gulp without pushing to the ftp, for example you can run gulp noftp

Environment

The object scriptHandling.environment contains information on files included and current environment