Customizing Page Designer for Salesforce Commerce Cloud

      
          <your_cartridge>/cartridges/<your_cartridge>/hooks.json

{
    "Hooks": [
        {
            "name": "app.experience.editmode",
            "script": "./cartridge/experience/hooks.js"
        }
    ]
}



<your_cartridge>/cartridges/<your_cartridge>/cartridge/experience/hooks.js

function editmode() {
    session.privacy.consent = true; // eslint-disable-line no-undef
}

exports.editmode = editmode;
        

      
          <your_cartridge>/cartridges/<your_cartridge>/cartridge/experience/breakpoints.json

{
    "mobile"  : 768,
    "tablet"  : 1024,
    "desktop" : 1440
}
        

      
          <iscontent type="text/html" charset="UTF-8" compact="true" />
<div class="storepage" id="${pdict.page.ID}">

    <isdecorate template="common/layout/pdStorePage">
        <isscript>
            var assets = require('*/cartridge/scripts/assets.js');
            assets.addCss('/css/experience/storePage.css');
        </isscript>

        <div class="storepage">
            <div class="container">
                <div class="row">
                    <isprint value="${pdict.regions.main
                          .setClassName(" col-12").render()}" encoding="off" />
                </div>
            </div>
        </div>
    </isdecorate>
</div>
        

      
          {
    "name": "Practice",
    "description": "A Practice Page Type",
    "region_definitions": [
        {
            "id": "headerbanner",
            "name": "Header Banner Region",
            "max_components": 1,
            "component_type_exclusions": [
                {
                    "type_id": "commerce_assets.categorytile"
                }
            ]
        },
        {
            "id": "main",
            "name": "Main Region",
            "component_type_exclusions": [
                {
                    "type_id": "commerce_assets.campaignBanner"
                }
            ]
        }
    ]
}
        

      
          'use strict';

const Template = require('dw/util/Template');
const HashMap = require('dw/util/HashMap');
const PageRenderHelper = require('*/cartridge/experience/utilities/PageRenderHelper.js');
const RegionModelRegistry = require('*/cartridge/experience/utilities/RegionModelRegistry.js');

/**
 * Render logic for the practice page.
 * @param {dw.experience.PageScriptContext} context The page script context object.
 * @returns {string} The template text
*/
module.exports.render = function (context) {
    const model = new HashMap();
    const page = context.page;
    model.page = page;     // automatically register configured regions
    const metaDefinition = require('*/cartridge/experience/pages/practicePage.json');
    model.regions = new RegionModelRegistry(page, metaDefinition);

    // Determine seo meta data.
    // Used in htmlHead.isml via common/layout/page.isml decorator.
    model.CurrentPageMetaData = {};
    model.CurrentPageMetaData.title = page.pageTitle;
    model.CurrentPageMetaData.description = page.pageDescription;
    model.CurrentPageMetaData.keywords = page.pageKeywords;
    if (PageRenderHelper.isInEditMode()) {
        const HookManager = require('dw/system/HookMgr');
        HookManager.callHook('app.experience.editmode', 'editmode');
        model.resetEditPDMode = true;
    }

    // render the page
    return new Template('experience/pages/practicePage').render(model).text;
};
        

      
          {
    "name": "Custom Banner",
    "description": "This is a banner component.",
    "group": "commerce_assets",
    "attribute_definition_groups": [
        {
            "id": "bannerSpec",
            "name": "BannerSpecification",
            "description": "Specification of the banner to be displayed in editor.",
            "attribute_definitions": [
                {
                    "id": "image",
                    "name": "Banner Image",
                    "description": "The image shown by the banner.",
                    "type": "file",
                    "required": true
                },
                {
                    "id": "alt",
                    "name": "Banner Image Alt Text",
                    "description": "The image alt text shown by the banner.",
                    "type": "string",
                    "required": false
                },
                {
                    "id": "product",
                    "name": "Product ID",
                    "description": "The ID of the product to be linked in text below banner.",
                    "type": "product",
                    "required": true
                }
            ]
        }
    ],
    "region_definitions": []
}
        

      
          <div>
    <img src="${pdict.imgUrl}" alt="${pdict.imgAlt}">
    <a href="${pdict.productUrl}">${pdict.productName}</a>
</div>
        

      
          'use strict';

const Template = require('dw/util/Template');
const HashMap = require('dw/util/HashMap');
const URLUtils = require('dw/web/URLUtils');

/**
 * Render logic for storefront.productBannerStrip component.
 * @param {dw.experience.ComponentScriptContext} context The Component script context object.
 * @returns {string} The template to be displayed
 */

module.exports.render = function (context) {
    const content = context.content;
    const model = new HashMap();
    model.imgUrl = content.image ? content.image.absURL : null;
    model.imgAlt = content.alt;
    model.productUrl = URLUtils.url('Product-Show', 'pid', content.product.ID);
    model.productName = content.product.name;

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