Page Designer Script Files

Each page type or component type requires a corresponding script file. The script file must have the same name as the type's meta definition file, but with a .js extension. For example, if the meta definition file for a promotions page type is promopage.json, the script file is named promopage.js.

The script file name can include only alphanumeric or underscore characters. Put the script file at the same location as its corresponding meta definition file. For example, for a component type named headlinebanner, you could include the meta definition file and the script file at the following locations :

mycartridge/cartridge/experience/components/assets/headlinebanner.json

mycartridge/cartridge/experience/components/assets/headlinebanner.js

The script file must include a render function that returns the markup for the page. You can assemble the markup using any process you want, as long as the result is a string. In many cases, the render function calls an ISML template to which it passes information about the page or component type and its content. If you use an ISML template, you must use the dw.util.Template API to render the markup from the template. Do not use dw.template.ISML because it doesn't return a string, and it writes the markup to the response stream right away.

In this promotion page script file, named promopage.js, the context object that is passed to the render function is of type dw.experience.PageScriptContext. It provides access to:

promopage.js
'use strict';
var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');

/**
 * Render logic for the page.
 */
module.exports.render = function (context) {
    var model = new HashMap();
    // add paramters to model as required for rendering based on the given context (dw.experience.PageScriptContext):
    //   * context.page (dw.experience.Page)
    //   * context.renderParameters (String)
    //   * context.content (dw.util.Map)

    return new Template('experience/pages/promopage').render(model).text;
};

In this banner script file, named banner.js, the context object that is passed to the render function is of type dw.experience.ComponentScriptContext. It provides access to:

banner.js
'use strict';
var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');

/**
 * Render logic for the component.
 */
module.exports.render = function (context) {    
    var model = new HashMap();
    // add paramters to model as required for rendering based on the given context (dw.experience.ComponentScriptContext):
    //   * context.component (dw.experience.Component)
    //   * context.content (dw.util.Map)

    return new Template('experience/assets/banner').render(model).text;
};

X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used and to tailor advertising. By continuing to use this site you are giving us your consent to do this.