How do I restrict components within a specific page region?

You can use 'component_type_exclusions' or 'component_type_inclusions' within the 'region_definitions' of your page's JSON meta definition.

What is the recommended way to render regions in ISML?

Use the PageRenderHelper utility via 'PageRenderHelper.renderRegion(pdict.page.getRegion('id'))' inside an isprint tag with encoding set to off.

Can I use custom JSON objects as attributes in Page Designer?

Yes, by using the 'custom' attribute type in your component's meta definition, which returns a JSON object to your rendering script.

What files are needed for a new Page Designer component?

A standard component requires three files with matching names: a .json file for metadata, a .js file for the rendering script, and an .isml file for the template.

Salesforce B2C Page Designer

Name: Salesforce B2C Page Designer
Author: SalesforceCommerceCloud

bySalesforceCommerceCloud

•

E-commerce Solutions

Guides the development of custom Page Designer page types and components for Salesforce B2C Commerce.

About

The b2c-page-designer skill is a specialized development assistant for Salesforce Commerce Cloud developers building visual editing experiences. It streamlines the creation of Page Designer assets by providing standardized patterns for metadata definitions, server-side script logic, and ISML templates. Whether you are defining complex page regions or building reusable content components with various attribute types, this skill ensures your implementation follows B2C Commerce best practices for performance, merchant usability, and maintainability within the Storefront Reference Architecture (SFRA).

Key Features

Standardized rendering patterns for JavaScript controllers and ISML templates
Scaffolding for Page and Component type metadata JSON structures
Detailed reference for all supported attribute types like images, products, and markup
4 GitHub stars
Implementation guides for region definitions and component constraints
Best practices for self-contained, merchant-friendly component architecture

Use Cases

Building custom landing page layouts with flexible content regions for merchants
Creating reusable UI components like promotional banners and hero carousels for the visual editor
Extending e-commerce storefronts with dynamic, configurable content blocks

About

Key Features

Standardized rendering patterns for JavaScript controllers and ISML templates
Scaffolding for Page and Component type metadata JSON structures
Detailed reference for all supported attribute types like images, products, and markup
4 GitHub stars
Implementation guides for region definitions and component constraints
Best practices for self-contained, merchant-friendly component architecture

Use Cases

Building custom landing page layouts with flexible content regions for merchants
Creating reusable UI components like promotional banners and hero carousels for the visual editor
Extending e-commerce storefronts with dynamic, configurable content blocks