Page Designer

A Page Designer component or page type is a pair of files with the same name: a meta JSON that declares its attributes and regions, and a render script. Intellij SFCC connects the two. The render script's context is typed, context.content gets a member for every attribute of the meta JSON, and the meta JSON completes groups, component types and editor types from your cartridges

Meta JSONRender scriptComponent types

STstorefrontSandbox 01version2

heroBanner.jsonheroBanner.js

1'use strict';

2

3var Template = require('dw/util/Template');

4var HashMap = require('dw/util/HashMap');

5var PATH = 'experience/components/commerce_assets/';

6

7module.exports.render = function (context, modelIn) {

8 var model = modelIn || new HashMap();

9 model.heading = context.content.heading;

10 model.image = context.content.

11

12 var template = new Template(PATH + 'heroBanner');

13 return template.render(model).text;

14};

imageImage

headingstring

subheadingstring

categoryLinkCategory

Choose Declaration

heroBanner.json /cartridge/experience/components/commerce_assets/heroBanner.json

heroBanner.js /cartridge/experience/components/commerce_assets/heroBanner.js

CtrlSpaceEnterCmd

app_customcartridgeexperiencecomponentscommerce_assetsheroBanner.jsGlobal scopeLFUTF-8

Before you start

Typed render scripts

The plugin types the parameters of the function named render in a script under experience/components or experience/pages, for example module.exports.render = function (context, modelIn) { ... }

So context.component, context.componentRenderSettings and the other members of the script context complete without a JSDoc comment

context.content

context.content gets one member for each attribute in the attribute_definitions of the meta JSON next to the script, heroBanner.json for heroBanner.js. The member's type comes from the attribute's type

{
  "name": "Hero Banner",
  "group": "commerce_assets",
  "region_definitions": [],
  "attribute_definition_groups": [
    {
      "id": "content",
      "name": "Content",
      "attribute_definitions": [
        { "id": "image", "type": "image" },
        { "id": "heading", "type": "string" },
        { "id": "categoryLink", "type": "category" }
      ]
    }
  ]
}

'use strict';

var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');

module.exports.render = function (context, modelIn) {
    var model = modelIn || new HashMap();

    model.heading = context.content.heading; // string
    model.image = context.content.image; // dw.experience.image.Image
    model.category = context.content.categoryLink; // dw.catalog.Category

    return new Template('experience/components/commerce_assets/heroBanner').render(model).text;
};

A page script reads the attributes of its page type JSON the same way. context.getContent() keeps the dw.util.Map type of the typings, only the content property is typed this way

Complete the meta JSON

Inside a meta JSON, these values complete from the Page Designer files of your cartridges. Press Ctrl+Space in the empty string to open the list

The static files come from every cartridge. With a site scope selected, the cartridges of that site's path are listed first

Go to components and editors

Cmd+Click (Ctrl+Click) on a value in a meta JSON opens what it names

Cmd+Click on type_id works only inside those three arrays. Elsewhere it completes but doesn't navigate

Schemas

Every meta JSON is validated against a Page Designer schema that ships with the plugin, picked by folder: Salesforce B2C Page Designer - Pages, Components, Aspects or Editors. You get completion for keys such as region_definitions and attribute_definition_groups, and a warning for a missing required key. The list of schemas is on XML & JSON Validation

Troubleshooting

Related