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:

• context.page—Currently rendered page
• context.renderParameters—Parameters passed to PageMgr.renderPage(pageID, parameters)
• context.content—Attributes set in the custom logic (not defined by the merchant)

         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:

• context.component—The currently rendered component.
• context.componentRenderSettings—Render settings provided by the hosting region. You can optionally override these render settings that are passed in from the region with settings specific to the component.
• context.content—Attributes as defined in the meta definition file for the component and then configured by the merchant in the Page Designer visual editor, or as defined in the custom logic.

         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;
};