Using Decorators with Page Designer Pages

You can implement various strategies for using decorators with Page Designer pages. For example, you can write the script file for a page type so that you can pass in a custom decorator as a parameter when the page is rendered, or fall back to a default decorator defined in the script. You can also write the controller that renders the page so that a different decorator is used based on the value of a certain condition.

In the following snippet from a page script file, the constant DEFAULT_DECORATOR defines the location of the default decorator, which the rendering process uses if no other decorator is supplied. If the location of a different decorator is supplied as a parameter when rendering the page, that decorator is used instead. The following line of this example directs the rendering process to use the decorator parameter passed in to the rendering process, if one exists, and if no decorator parameter was passed in, use the DEFAULT_DECORATOR.

model.decorator = renderParameters.decorator || DEFAULT_DECORATOR;

...
const DEFAULT_DECORATOR = 'decoration/styling';
...
module.exports.render = function (context) {
   var model = new HashMap();
   ...
   var renderParameters = getRenderParameters(context.renderParameters);
   model.decorator = renderParameters.decorator || DEFAULT_DECORATOR;
   return new Template('experience/pages/dynamiclayout').render(model).text;
}

When pages are displayed in the visual editor as the merchant is creating them, the default decorator defined in the script file is used. To optimize the experience of creating pages for the merchants, you could define the DEFAULT_DECORATOR constant in the script to point to a lightweight decorator that loads quickly in the visual editor. But then when the controller renders the page in the storefront, you could pass in the location of the full decorator to use to display the pages.

You can also choose which decorator to use based on the state of a condition. For example, in the following snippet from a storefront controller, the decorator at decoration/ajax is used if the format of the page is based on AJAX (Asynchronous Javascript and XML), but the decorator at decoration/full is used if the page is not based on AJAX.

exports.Show = function () {
   var params = request.httpParameterMap;
   var cid = params.cid.stringValue;
   var format = params.format.stringValue;
   ...
   var page = PageMgr.getPage(cid);
   ...
   var params = {
   decorator: format === 'ajax' ? 'decoration/ajax' || 'decoration/full';
   };
   response.writer.print(PageMgr.renderPage(page.ID, JSON.stringify(params)));
...
}