0% found this document useful (0 votes)

139 views

06 Page Designer

Uploaded by

Rajesh Naidu

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

139 views

06 Page Designer

Uploaded by

Rajesh Naidu

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 23

11/10/21, 12:08 PM Page Designer

Page Designer
Contents
1. Developing for Page Designer
1.1. What Is Page Designer?
1.2. Get the Page Designer Reference Examples
1.3. Page Designer Development Best Practices
1.4. Page Designer Developer Resources
2. Create Page and Component Types
2.1. Page Designer Meta Definition Files
2.2. Page-Level Custom Attributes
2.3. Initialize a Region with a Component Already Populated
2.4. Page Designer Script Files
2.5. Component Attribute Types and UI Controls
2.6. Component Attribute Types and Resolved Value Objects
2.7. Page Designer HTML
2.8. Page Type, Component Type, and Custom Attribute Editor IDs
2.9. Using Decorators with Page Designer Pages
2.10. Develop a Dynamic Page
2.10.1. Aspect Types
2.10.2. Components with Dynamic Attributes
2.10.3. Render a Dynamic Page
2.10.4. Best Practices for Developing a Dynamic Page
3. Create a Custom Cartridge for Page Designer UI Artifacts
3.1. Create Page Designer Localization Resource Bundles
3.2. Page Designer Thumbnail Images
4. Use Salesforce CMS Content with Page Designer
4.1. Get Access to Salesforce CMS
4.2. Connect Salesforce CMS to Page Designer
4.3. Develop a Component Type to Use CMS Content
4.4. Use Salesforce CMS Content to Configure a Component Attribute
5. Develop a Custom Attribute Editor
5.1. Why Implement a Custom Attribute Editor?
5.2. How Does a Custom Attribute Editor Work?
5.3. Custom Attribute in the Component Meta Definition File
5.4. Custom Attribute Editor Meta Definition File
5.5. Custom Attribute Editor Script File
5.6. Client-Side JavaScript and CSS for a Custom Attribute Editor
5.7. Custom Attribute Editor Events
5.8. Create a Breakout Custom Attribute Editor that Displays in a Modal Window
5.8.1. What Is a Breakout Editor?
5.8.2. Trigger Editor Meta Definition and Script Files
5.8.3. Breakout Editor Meta Definition and Script Files
5.8.4. Open and Close a Breakout Editor
5.8.5. Enable and Disable the Breakout Editor Apply Button
5.8.6. Trigger and Breakout Editor Client-Side UI Code
5.9. Use a Prebuilt Editor in a Custom Attribute Editor
6. Search Configuration for Page Designer Pages
6.1. Enable Search and Search Suggestions for Page Designer Pages
6.2. Enable Indexing for Attribute Content
6.3. Use SEO Page Meta Tag Rules for Dynamic Pages
7. Pages and Components as Content Assets
7.1. Pages and Components and OCAPI SHOP and DATA API
7.2. Page and Component Content Asset Attributes
7.3. Import and Export for Page Designer Pages and Components
8. Page Designer Caching
8.1. Page Caching
8.2. Page Type, Component Type, and Custom Attribute Editor Cache Times
9. Publish a Page Designer Page
9.1. Render Page Designer Pages from a Controller
9.2. Incorporate a Page Designer Page into the Storefront
9.3. Mock Component Placeholders
9.4. Render a JSON View of a Page Designer Page

Page Designer
Before merchants create Page Designer pages in the visual editor in Business Manager,
developers must create page types and component types for them to work
with.

Developing for Page Designer

Developers play an important role in implementing Page Designer. Developers work with the ecommerce marketing director to determine the pages, components, layouts, and assets required for the
storefront. The developer then creates and uploads custom cartridges that contain reusable page types, component types, and artifacts for the visual editor that help merchants quickly create and implement
custom pages.

Create Page and Component Types

To implement page types and component types, you must include a meta definition file and a script file for each page type and component type in a custom cartridge.

Create a Custom Cartridge for Page Designer UI Artifacts

To localize page types and component types, or to display thumbnail images for them in the visual editor, create a custom cartridge that includes resource bundles for localization and thumbnail image files.
Upload the custom cartridge to the Business Manager site.

Use Salesforce CMS Content with Page Designer

Use Salesforce CMS to manage all your content in a single repository. Merchants can use the CMS content on a Page Designer page. For example, you develop a component type that displays a headline
banner. You can create and manage different options for the content of the headline banner in Salesforce CMS. When merchants add the component type to a page, they select which content to use for the
headline banner from Salesforce CMS.

Develop a Custom Attribute Editor

You can create a custom attribute editor for configuring component attributes. Merchants use the custom attribute editor when setting a value for the component attribute in the Business Manager visual
editor.

Search Configuration for Page Designer Pages

Configure searching for Page Designer pages and attribute content.

Pages and Components as Content Assets

Pages and components are persisted in the database as content assets, but they aren't displayed in the content asset list in Business Manager and you can't edit them directly from Business Manager.
Generally, processes like replication and indexing work the same for pages and components as they do for content assets. But pages and components are different from content assets in some ways.

Page Designer Caching

It’s important to understand how page caching works with Page Designer pages and the cache times for pages, components, and custom attribute editors.

Publish a Page Designer Page

Page Designer pages are rendered from a controller and incorporated into the storefront.

1. Developing for Page Designer

Developers play an important role in implementing Page Designer. Developers work with
the ecommerce marketing director to determine the pages, components, layouts, and assets
required for the storefront. The developer then creates and uploads custom cartridges that
contain reusable page types, component types, and artifacts for the visual editor that help
merchants quickly create and implement custom pages.

What Is Page Designer?

Page Designer is a B2C Commerce feature that supports standard development processes and tools for creating reusable page types and component types. Merchants can use a visual editor in Business
Manager to design, schedule, and publish custom pages in the storefront by dragging the page and component types. Merchants can use the same page and component types to create a variety of pages
independently, without going back to the developer for updates.

Get the Page Designer Reference Examples

We provide example page types and component types to help you quickly get started using Page Designer.

Page Designer Development Best Practices

In addition to following standard best practices for B2C Commerce development, follow these best practices that are specific to Page Designer.

Page Designer Developer Resources

The Commerce Cloud Developer Center (CCDC) includes webinars, demos, and details about features and functionality for Page Designer developers.

1.1. What Is Page Designer?

Page Designer is a B2C Commerce feature that supports standard development processes
and tools for creating reusable page types and component types. Merchants can use a
visual
editor in Business Manager to design, schedule, and publish custom pages in the storefront
by dragging the page and component types. Merchants can use the same page and
component
types to create a variety of pages independently, without going back to the developer for
updates.

The typical Page Designer implementation process includes these steps.

1. The ecommerce marketing director meets with the developer to discuss the pages,
components, layouts, and assets required for the storefront.

2. The developer creates the reusable page types and component types that support the
ecommerce marketing director's requirements.

3. The developer uploads the custom cartridge that contains the page and component
types and another custom cartridge that contains supporting UI artifacts to a site.

4. The merchant uses the Page Designer visual editor in Business Manager to build
storefront pages using the page and component types that the developer has
implemented.

Related tasks

Create a Page Using the Page Designer Visual Editor

1.2. Get the Page Designer Reference Examples

We provide example page types and component types to help you quickly get started
using Page Designer.

1. If you don’t have a GitHub account, create one at Github

2. Enable two-factor authentication for your GitHub account.

Follow the directions at Configuring Two-Factor
Authentication.

3. Navigate to Salesforce Commerce Cloud SSO Signup, and

4. Search for the storefront-reference-architecture or

page-designer-reference repository.

Storefront Reference Architecture (SFRA) includes Page Designer page types and
component types optimized for use with SFRA. The latest version of SFRA is in
the
SFRA repository.

Page Designer reference cartridges for Site Genesis are in the SiteGenesis repository.

5. Click Clone or download to copy the repository to your local system.

6. If you downloaded the repository, expand the .zip file.

Note: On macOS, you can use the command-line unzip utility to expand the
files.

For information about how to get started with the SiteGenesis

page-designer-reference repository, see Site Genesis README.
For details about the Page Designer example pages and components for the
SiteGenesis page-designer-reference repository, see Site Genesis Implementation
Guide.

1.3. Page Designer Development Best Practices

In addition to following standard best practices for B2C Commerce development, follow
these best practices that are specific to Page Designer.

Do as much planning and gathering of requirements upfront as you can with the
merchant and ecommerce director before developing page types and component
types.

Create components that are self-contained so that any region where they are placed
can handle them as “black boxes.” To support self-containment, give each component
its
own default styling, although at times you might need to adjust the styling by
specifying custom render settings.

If you need to change the meta definition for a page or component type after the
merchant has already created instances of pages and components, be careful not to
make
incompatible changes. For example, if you change the type
value for a component attibute, you create an inconsistency between the component
type meta definition and the
component data in the database. In this case, it's
better to create a new component type and deprecate the old one.

For sites that share libraries, assign the same data and the same set of cartridges
with the same set of page and component types to each site. Sharing data and code
ensures
that there aren’t inconsistencies between meta definitions and data. For
example, you could have a page that was known in one site but not another, or two
sites that use the
same ID for different component types with different sets of
attributes, which would result in validation errors. Keep in mind that data and code
are shared using different
mechanisms that might have multiple relationships to
sites, as follows:

Table 1.

Entity Can Be Assigned To

Cartridge 1...n sites

Library 1...n sites

Conent Asset 1 library

Page 1 library

Component 1 library

Catalog 1...n sites

1.4. Page Designer Developer Resources

The Commerce Cloud Developer Center (CCDC) includes webinars, demos, and details
about features and functionality for Page Designer developers.

Refer to the Page Designer CCDC Page for links to the Page
Designer resources.

2. Create Page and Component Types

To implement page types and component types, you must include a meta definition file
and a script file for each page type and component type in a custom cartridge.

Page Designer Meta Definition Files

Each page type and component type requires a JSON meta defintion file. A meta definition file for a page type describes the regions of the page where a merchant can place components. A meta defintion
file for a component type describes the attributes that a merchant defines when using the component type and can also define regions within the component type.

Page-Level Custom Attributes

You can define custom page-level attributes for a page type. For example, you can define custom attributes for title, Image, and Description. Merchants can use those attributes to specify the image and text
that appears in the search results for a page.

Initialize a Region with a Component Already Populated

Prepopulating a region with default components is a best practice that guides a merchant in creating a page. To specify that a region contains specific components by default, use the
default_component_constructors property in the meta definition file for a page type. You can also use this property in the meta definition file for a component type that includes a region. When the
merchant creates a page in the Visual Editor using the page type or component type, the default components are already populated in the region. The merchant can delete the components if necessary.

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.

Component Attribute Types and UI Controls

https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/content/b2c_commerce/t… 3/23
11/10/21, 12:08 PM Page Designer
attribute of type file displays a file selection modal window that the merchant can use to browse the library files. An attribute of type enum displays a single select box where the merchant chooses one of
the allowed values.

Component Attribute Types and Resolved Value Objects

The content attributes available from the context object, also known as the content dictionary, are defined in a map with the attribute IDs as the keys and the resolved values as values. A resolved value is
a value that has been converted to B2C Commerce API objects when necessary. For example, for an attribute of type product, the value of the attribute (the product SKU) is converted to a
dw.catalog.Product object instance. For some attributes, conversion isn't necessary. For example, strings can be stored as is. The following table lists the content attribute types and their
corresponding B2C Commerce API objects.

Page Designer HTML

The render function of a page type creates the page's HTML markup. Typically, the page type's render function calls an ISML template that uses PageMgr.renderRegion() to render each region of
the page.

Page Type, Component Type, and Custom Attribute Editor IDs

A page type, component type, or custom attribute editor ID is a combination of the subdirectory (if any) where the meta definition file and script file are located and the file name without the extension.
Separate the levels of the subdirectory and the file name with periods. For example, for a page type named homepage with a meta definition file and script file located directly under
cartridge/experience/pages, the page type ID is homepage. If the meta definition file and script file for homepage are located in a subdirectory storefront/campaigns under
cartridge/experience/pages, the page type ID is storefront.campaigns.homepage.

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.

Develop a Dynamic Page

A dynamic page uses one or more dynamic attributes passed to the page at runtime to determine what content to display in the storefront. The typical use case is the developer creates an aspect type for a
particular business use, for example a Product List or Product Details page. The developer assigns the aspect type to a page type that defines the layout for the page. The merchant uses the page type to
create a template Product List or Product Detail page and assigns the template page to one or more categories. Whenever a Product List or Product Detail page is required in the storefront for one of the
assigned categories, the template page is displayed. The content of the template page is populated based on the category dynamic attribute.

2.1. Page Designer Meta Definition Files

Each page type and component type requires a JSON meta defintion file. A meta
definition file for a page type describes the regions of the page where a merchant can place
components. A meta defintion file for a component type describes the attributes that a merchant
defines when using the component type and can also define regions within the
component
type.

Put the meta definition file in one of the following directories of the custom cartridge, or
any arbitrary subdirectory within these directories:

Page types:
<your_cartridge>/cartridge/experience/pages

Component types:
<your_cartridge>/cartridge/experience/components

The meta definition file name can include only alphanumeric or underscore characters. If you
put the meta definition file into a subdirectory within the
/experience/pages or
/experience/components
directories, the names of the levels in the subdirectory must also use only alphanumeric or
underscore characters.

To view schema files that describe the JSON formatting for the meta definition file, see
Page Designer
JSON Schemas.

This example promotion page type meta definition file, named

promopage.json, defines three regions for the promotions page: header,
main, and footer. The header and footer
regions can display only one component at a time, as
specified by max_components = 1. The region_definition for
the main region does not include a max_components
value, indicating that the
main region can display any number of components. The main region uses
component_type_exclusion to specify that components of type banner are not
allowed in the main region.

The max_components value restricts the number of components rendered

for a region at a time, but the region can contain any number of components. You can therefore
display
different components for different customers or on different schedules. For example,
you could have a banner region that displays one component in winter and a different component
in summer.

promopage.json

"name":"Promopage",

"description":"A promotional page.",

"region_definitions":[

"id":"header",

"name":"Name",

"description":"Header of the promopage",

"max_components":1

"id":"main",

"name":"Main",

"description":"Main area of the promopage",

"component_type_exclusions":[

{"type_id":"banner"}

"id":"footer",

"name":"Footer",

"description":"Footer of the promopage",

"max_components":1

https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/content/b2c_commerce/t… 4/23
11/10/21, 12:08 PM Page Designer
This example banner component type meta definition file, named
banner.json, defines four attributes that the merchant can set: the
image file, its alt text, its size, and an attribute
named Magic Unicorns that lets the
merchant select which unicorn to display on the banner. The Magic Unicorns attribute is
configured using a custom UI control,
com.sfcc.magical. In the Page Designer
visual editor, the attributes appear in groups. For example, the four attributes defined in
this file appear in the visual editor in a group
labeled Banner Image
Configuration.

The default_value setting for an attribute is used only for rendering the
page in the storefront or previewing in the visual editor. The default_value
is not shown as preselected
in the visual editor that the merchant uses to configure the
component. Rendering behavior based on settings for required and
default_value is as follows:

Required is true and a default_value is

configured: The default_value is assigned to the attribute for
rendering the page, but is not shown as preselected in the
visual editor. If the merchant
does not configure a value for the attribute and saves the component, no error message is
presented.

Required is false and a default_value is

Required is true and no default_value is

configured: If the merchant does not configure a value for the attribute and saves the
component, an error message is
presented.

Required is false and no default_value is

configured: If the merchant does not configure a value for the attribute and saves the
component, no error message is
presented.

banner.json

"name": "Banner",

"description": "A banner.",

"group": "content",

"attribute_definition_groups": [

"id": "image",

"name": "Banner Image Configuration",

"description": "You can define the image file, size and alt text for the banner image.",

"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": "size",

"name": "Size",

"description": "The banner size.",

"type": "enum",

"values": [

"small",

"medium",

"large"

"required": true,

"default_value": "medium"

"id": "magic",

"name": "Magic Unicorns",

"type": "custom",

"required": true,

"editor_definition": {

"type": "com.sfcc.magical",

"configuration": {

"options": {

"config": [

"Auris",

"Chant",

"Elmas",

"Majesty",

"Moriba",

"Mystery",

"Mystic",

"Snowflake",

"Solstice",

"Sunshine"

"region_definitions": []

The 3column.json meta definition file is for a component type that

represents a layout of three columns. Each column is a region in the meta definition file.

3column.json

"name": "1 Row, 3 Column, Landscape",

"group": "layouts",

"attribute_definition_groups": [],

"region_definitions": [

"id":"column1",

"name":"Column 1",

"max_components":1

"id":"column2",

"name":"Column 2",

"max_components":1

"id":"column3",

"name":"Column 3",

"max_components":1

Related concepts

Page Designer Script Files

Custom Attribute in the Component Meta Definition File
Why Implement a Custom Attribute Editor?
Initialize a Region with a Component Already Populated
Page-Level Custom Attributes

Related reference

Page Type, Component Type, and Custom Attribute Editor IDs

Component Attribute Types and UI Controls
Component Attribute Types and Resolved Value Objects

2.2. Page-Level Custom Attributes

You can define custom page-level attributes for a page type. For example, you can
define custom attributes for title, Image, and Description. Merchants can use those
attributes to
specify the image and text that appears in the search results for a
page.

Define the page-level attributes in the meta definition file for the page type. This
example shows three attributes defined for a Search Results Title, Search Results Image,
and Search
Results Description.

promopage.json

"name": "Promopage",

"description": "A promotional page.",

"attribute_definition_groups": [{

"id": "search",

"name": "Search Results Display",

"description": "Define the title, image, and description returned in search results for the page.",

"attribute_definitions": [{

"id": "title",

"name": "Search Results Title",

"description": "The page title displayed in search results.",

"type": "text",

"required": false

"id": "image",

"name": "Search Results Image",

"description": "The image displayed in search results.",

"type": "file",

"required": false

"id": "description",

"name": "Search Results Description",

"description": "The page description displayed in search results.",

"type": "text",

"required": false,

"region_definitions": [{

"id": "header",

"name": "Name",

"description": "Header of the promopage",

"max_components": 1

"id": "main",

"name": "Main",

"description": "Main area of the promopage"

"component_type_exclusions": [{

"type_id": "banner"

}]

"id": "footer",

"name": "Footer",

"description": "Footer of the promopage",

"max_components": 1

}]

Related concepts

Enable Indexing for Attribute Content

Page Designer Meta Definition Files

Related tasks

Configure Custom Page Attributes

2.3. Initialize a Region with a Component Already Populated

Prepopulating a region with default components is a best practice that guides a
merchant in creating a page. To specify that a region contains specific components by default,
use the
default_component_constructors property in the meta definition file for
a page type. You can also use this property in the meta definition file for a component type
that includes
a region. When the merchant creates a page in the Visual Editor using the page
type or component type, the default components are already populated in the region. The merchant
can delete the components if necessary.

The following example specifies that the main region of the page is prepopulated with a
default component. The component has id commerce_layouts.productDetail and
name
Product Detail Layout.

"name":"Product Detail Page",

"description":"Product detail page with 3 regions",

"region_definitions":[

"id":"top",

"name":"Top Region",

"component_type_exclusions": [{ "type_id": "commerce_assets.campaignBanner" }]

"id":"main",

"name":"Main Region",

"default_component_constructors": [

{ "type_id": "commerce_layouts.productDetail", "name": "Product Detail Layout"}

"component_type_exclusions": [{ "type_id": "commerce_assets.campaignBanner" }]

"id":"bottom",

"name":"Bottom Region",

"component_type_exclusions": [{ "type_id": "commerce_assets.campaignBanner" }]

"supported_aspect_types": ["pdp"]

Related concepts

Best Practices for Developing a Dynamic Page

Page Designer Meta Definition Files

2.4. 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;

};

Related concepts

Page Designer Meta Definition Files

Page Designer HTML
Using Decorators with Page Designer Pages

Related reference

Page Type, Component Type, and Custom Attribute Editor IDs

2.5. Component Attribute Types and UI Controls

Each attribute in the meta definition file for a component type has a type assigned
to it. The attribute's type determines how the merchant sets its value in the Page Designer
visual
editor. For example, an attribute of type file displays a file
selection modal window that the merchant can use to browse the library files. An attribute
of type enum displays a single
select box where the merchant chooses one of
the allowed values.

This table describes the type options for component attributes and how those options
are displayed in the Page Designer visual editor.

Table 1. Component Attribute Types and UI Controls

Component Attribute Semantics Visual Editor UI Control

Attribute
Type

boolean Boolean Check box

category String representing a catalog Category picker

category ID

cms_record Record from the Salesforce CMS User is presented with a modal window to select the CMS record. After
the user selects the CMS record, the edit panel
(Content Management System) displays the UI controls
necessary to configure the attributes of the slected CMS record.

custom String enclosed in curly brackets {} Text area or custom UI control

that represents a JSON
object

Component Attribute Semantics Visual Editor UI Control

Attribute
Type

enum Enumeration of either string or Select box (single select)

integer values.

file String representing a file path File picker

within a library

image String representing a configurable Image picker that lets users select an image and specify a focal
point on that image. The image dimensions are also
image JSON stored and can be
accessed, along with the image name and focal point, using the Image API

integer Integer Input field

markup String representing HTML markup A rich text editor that allows semantic formatting options to produce
HTML markup

page String representing a page ID Page picker

product String representing a product SKU Product picker

string String Input field

text String Text area

url String representing a URL URL picker

Related concepts

Page Designer Meta Definition Files

Why Implement a Custom Attribute Editor?

2.6. Component Attribute Types and Resolved Value Objects

The content attributes available from the context object, also known
as the content dictionary, are defined in a map with the attribute IDs as the keys and the
resolved values as
values. A resolved value is a value that has been converted to B2C
Commerce API objects when necessary. For example, for an attribute of type product, the
value of the attribute (the
product SKU) is converted to a
dw.catalog.Product object instance. For some attributes, conversion
isn't necessary. For example, strings can be stored as is. The following table
lists the
content attribute types and their corresponding B2C Commerce API objects.

Table 1. Content Attribute Types and Resolved Value Objects

Content Attribute Type B2C Commerce API Value

category dw.catalog.Category

cms_record dw.experience.CMSRecord

custom dw.util.Map

file dw.content.MediaFile

image dw.experience.image.Image

page dw.experience.Page

product dw.catalog.Product

Related concepts

Page Designer Meta Definition Files

2.7. Page Designer HTML

The render function of a page type creates the page's HTML markup.
Typically, the page type's render function calls an ISML template that uses
PageMgr.renderRegion() to
render each region of the page.

In this example, a page calls an ISML template. This ISML template renders three regions:
header, main, and footer.

promopage.isml

<html>

...

<isprint value="${PageMgr.renderRegion( pdict.page.getRegion('header') )}" encoding="off"/>

...

<isprint value="${PageMgr.renderRegion( pdict.page.getRegion('main') )}" encoding="off"/>

<isprint value="${PageMgr.renderRegion( pdict.page.getRegion('footer') )}" encoding="off"/>

...

</html>

Each PageMgr.renderRegion() function in the page ISML finds all assigned

and visible components in each region and calls each component’s render
function, which in turn
calls its own ISML template, as in the following example:

banner.isml

...

<img width="" src="../topic/com.demandware.dochelp/con
<!--

// if the 'assets.banner' component type had a region 'foobar' we could render it here

<isprint value="${PageMgr.renderRegion( pdict.component.getRegion('foobar') )}" encoding="off"/>

-->

...

As each region and component is rendered, Page Designer creates an HTML element to wrap
the content. You can specify which HTML element to use as the wrapper and which
attributes to assign to the wrapper using the
dw.experience.RegionRenderSettings and
dw.experience.ComponentRenderSettings APIs. For more information,
see:

RegionRenderSettings API

ComponentRenderSettings API

By default, the HTML wrapper for regions and components is div. The
default CSS class for regions is experience-region
experience-<region_definition_id>. The
default
CSS class for components is experience-component
experience-<componenttype_id>.

Note: Component type ID values include dots, for example,

assets.productile. When used in the CSS class name, the dot is
replaced with a hyphen, for example,
experience-component
experience-assets-productile.

For example, for a region with id my_region and three components, two of type
my_component_type_1 and one of type my_component_type_2, the default HTML wrapper is:

Default Render Settings

<div class="experience-region experience-my_region">

<div class="experience-component experience-my_component_type_1">

content of first component (type my_component_type_1) goes here

</div>

<div class="experience-component experience-my_component_type_1">

content of second component (type my_component_type_1) goes here

</div>

<div class="experience-component experience-my_component_type_2">

content of third component (type my_component_type_2) goes here

</div>

In some cases, you want a component to have a different style depending on which region
contains the component. For example, you define a component type for a product tile that
uses default render settings. You define another component type for a carousel, which is
a one-region component that scrolls through a number of other components. When the
product tile component appears in the carousel, you want it to use different styling
specific to the carousel.

You could specify that the HTML wrapper for the carousel uses a custom CSS class called
item for the first and second components. Then specify a
different CSS class, item
active, for the third component, to
distinguish it as the active component in the carousel. Here's the HTML wrapper for the
carousel.

content of first component (type my_component_type_1) goes here

</div>

content of second component (type my_component_type_1) goes here

</div>

<div class="item active">

content of third component (type my_component_type_2) goes here

</div>

Here's the code to set the custom render settings for the carousel. You could include
this code in the render function of the script file for the component.

Note: The Page Designer reference implementation available in GitHub includes helper
functionality to streamline this code.

var carousel = component.getRegion('carousel');

// set styling for carousel region

var carouselRenderSettings = new dw.experience.RegionRenderSettings();

carouselRenderSettings.setTagName("div");

carouselRenderSettings.setAttributes({"class" : "carousel-inner"});

// set carousel item styling (default)

var defaultCarouselComponentRenderSettings = new dw.experience.ComponentRenderSettings();

defaultCarouselComponentRenderSettings.setTagName("div");

defaultCarouselComponentRenderSettings.setAttributes({"class" : "item"});

carouselRenderSettings.setDefaultComponentRenderSettings(defaultCarouselComponentRenderSettings);

// set carousel item styling (active one)

var activeCarouselComponent = carousel.visibleComponents[0]; // init the first one as being active

var activeCarouselComponentRenderSettings = new dw.experience.ComponentRenderSettings();

activeCarouselComponentRenderSettings.setAttributes({"class" : "item active"});

carouselRenderSettings.setComponentRenderSettings(activeCarouselComponent, activeCarouselComponentRenderSettings);

// render the carousel region

return dw.experience.PageMgr.renderRegion(carousel, carouselRenderSettings);

Related concepts

Page Designer Script Files

2.8. Page Type, Component Type, and Custom Attribute Editor IDs
A page type, component type, or custom attribute editor ID is a combination of the
subdirectory (if any) where the meta definition file and script file are located and the
file name without
the extension. Separate the levels of the subdirectory and the file name
with periods. For example, for a page type named homepage with a meta
definition file and script file located
directly under
cartridge/experience/pages, the page type ID is
homepage. If the meta definition file and script file for
homepage are located in a subdirectory
storefront/campaigns under
cartridge/experience/pages, the page type ID is
storefront.campaigns.homepage.

Length Restrictions for Page Type and Component Type IDs

When component types and page types are persisted in the database, their IDs are
prepended with the prefixes page. or component..
Those prefixes, plus the IDs of the page types
and component types, cannot exceed
256 characters, or else errors will occur. Adjust the file names or move the meta
definition file and script file to a higher level in the directory
structure to
shorten the ID.

Table 1. Example IDs

Location of Page Type, Component Type, or Custom Control ID

mycartridge/cartridge/experience/components/assets/headlinebanner.json assets.headlinebanner

mycartridge/cartridge/experience/components/assets/banners/headlinebanner.json assets.banners.headlinebanner

mycartridge/cartridge/experience/pages/promopage.json promopage

mycartridge/cartridge/experience/pages/promotions/promopage.json promotions.promopage

mycartridge/cartridge/experience/editors/com/sfcc/magical.json com.sfcc.magical

Related concepts

Page Designer Meta Definition Files

Page Designer Script Files
Import and Export for Page Designer Pages and Components
Custom Attribute in the Component Meta Definition File

2.9. 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)));

...

Related concepts

Page Designer Script Files

Render Page Designer Pages from a Controller

2.10. Develop a Dynamic Page

A dynamic page uses one or more dynamic attributes passed to the page at runtime to
determine what content to display in the storefront. The typical use case is the developer
creates an aspect type for a particular business use, for example a Product List or Product
Details page. The developer assigns the aspect type to a page type that defines the layout
for the page. The merchant uses the page type to create a template Product List or Product
Detail page and assigns the template page to one or more categories. Whenever a Product
List
or Product Detail page is required in the storefront for one of the assigned categories, the
template page is displayed. The content of the template page is populated based on the
category dynamic attribute.

For an example of how a merchant implements a Product List or Product Details template,
see Create a Product List or Product Detail Page Template.

Aspect Types

To implement a dynamic page, create an aspect type meta definition file that defines the attributes required for a particular business use. The aspect type meta definition file also defines the business object
type that the merchant can bind to the page when the page is created. In the meta definition file for the page type, specify which aspect types are supported for the page type.

Components with Dynamic Attributes

A component attribute can include a dynamic_lookup property. The dynamic_lookup property specifies an attribute of the aspect. The component attribute gets its value from the aspect attribute
specified.

Render a Dynamic Page

Aspect attributes are passed to the page through the Page.renderPage() method that takes aspectAttributes.

Best Practices for Developing a Dynamic Page

Follow best practices when developing a dynamic page.

2.10.1. Aspect Types

To implement a dynamic page, create an aspect type meta definition file that defines
the attributes required for a particular business use. The aspect type meta definition file
also
defines the business object type that the merchant can bind to the page when the page
is created. In the meta definition file for the page type, specify which aspect types are
supported
for the page type.

To view the schema file that describes the JSON formatting for the aspect type meta
definition file, see Page Designer JSON Schemas.

Put the aspect type meta definition file in the following directory of the custom
cartridge, or any arbitrary subdirectory within this directory:

<your_cartridge>/cartridge/experience/aspects

Currently, category is the only supported value for object_types. You

can also create an aspect type with no supported object type declared. For example, you
could implement a
Product List page that depends on the results of a query, not the
assignment of a category, to determine which products to display on the page.

The following examples show aspect meta definition files for a Product List page and a
Product Detail page. The Product List page aspect type has one attribute for category
and
supports the object type category, which the merchant assigns during page creation.
The Product Detail page aspect type has two attributes, one for product and one for
category. The
Product Detail page also supports the object type category, which the
merchant assigns during page creation. All products in the assigned categories use the
Product Detail page.

plp.json

"name": "Product List Page",

"description": "The product list page for a given category.",

"attribute_definitions": [

"id": "category",

"name": "Category",

"type": "category"

"supported_object_types": [

"category"

pdp.json

"name": "Product Details Page",

"description": "The product details page for a given product.",

"attribute_definitions": [

"id": "product",

"name": "Product",

"description": "The product to render the pdp for.",

"type": "product",
https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/content/b2c_commerce… 12/23
11/10/21, 12:08 PM Page Designer
type : product ,

"required": true

"id": "breadcrumb_category",

"name": "Breadcrumb Category",

"description": "The optional category context of the pdp, for breadcrumb purposes.",

"type": "category",

"required": false

"supported_object_types": [

"category"

Specify the supported aspect types in the page definition file for the page type, as in
the following example. Because this page type declares support for the
plp aspect type, the page
requires the category attribute defined
in the plp.json meta definition file. Category is the dynamic attribute
that the controller or script uses to render the page in the storefront.

plplayout.json

"name": "Product List Page Layout",

"description": "A layout for a product list page with a region to contain a product grid component.",

"supported_aspect_types": [

"plp"

"region_definitions": [{

"id": "main",

"name": "Main Region"

}]

You can create a page type that supports more than one aspect type. During page creation,
the merchant selects which aspect type to use for the page by selecting a Page Purpose
in
the page creation wizard.

dynamiclayout.json

"name": "Dynamic Layout",

"description": "A generic layout whose region can use any kind of component.",

"supported_aspect_types": [

"plp",

"pdp"

"region_definitions": [{

"id": "main",

"name": "Main Region"

}]

Related concepts

Components with Dynamic Attributes

Render a Dynamic Page

Related tasks

Create a Product List or Product Detail Page Template

2.10.2. Components with Dynamic Attributes

A component attribute can include a dynamic_lookup property. The
dynamic_lookup property specifies an attribute of the aspect. The component
attribute gets its value from the
aspect attribute specified.

In the following example, the component attribute named Category includes

adynamic_lookup property. The dynamic_lookup property
specifies the aspect attribute category.
At runtime, component attribute
Category gets its value from aspect attribute
category.

productgrid.json

"name": "Product Listing Layout",

"description": "Product Listing Grid Layout",

"group": "commerce_layouts",

"attribute_definition_groups": [

"id": "productList",

"name": "Settings",

"description": "Product List Settings",

"attribute_definitions": [

"id": "category",

"name": "Category",

"type": "category",

"required": false,

"dynamic_lookup":{

"aspect_attribute_alias": "category"

"region_definitions": [...]

In the Visual Editor, the merchant can override the category that the page is using and
assign a different category to the component. For example, in the SFRA reference
implementation, the dynamic banner component uses the category value assigned to the page by
default. The component uses the banner image and banner text assigned in
Business Manager for
the category assigned to the page.

The merchant can edit the category value and assign it to something other than the value the
page is using. For example, the merchant can specify that the banner component uses
the
category mens-clothing regardless of the category assigned to the page.

As the SFRA reference component is implemented, the merchant can also override attributes of
the component separately from the dynamic category attribute. For example, the
merchant can
specify that regardless of the category, the banner always displays an image for women's shoes
and handbags.

Related concepts

Aspect Types
Render a Dynamic Page

Related tasks

Create a Product List or Product Detail Page Template

2.10.3. Render a Dynamic Page

Aspect attributes are passed to the page through the
Page.renderPage() method that takes
aspectAttributes.

The following code snippet passes aspect attributes to the page during rendering:

var aspectAttributes = new HashMap();

aspectAttributes.put("category", category);

res.print(PageMgr.renderPage(page.ID, aspectAttributes, ""));

The following code snippet checks to see if a page is assigned to the given category for
a given aspect type and returns that page. If there is no page assigned, the code walks
up the
category hierarchy until it either finds a category with the page assigned or it
reaches root. If no page is found even for root, it returns null.

var ignoreInvisiblePages = true;

var anAspectTypeID = "plp";

PageMgr.getPage(aCategory, ignoreInvisiblePages, anAspectTypeID);

Related concepts

Components with Dynamic Attributes

Aspect Types

Related tasks

Create a Product List or Product Detail Page Template

2.10.4. Best Practices for Developing a Dynamic Page

Follow best practices when developing a dynamic page.

Use the default_component_constructors property in the page meta

definition file to populate a region on the page with a component. For example,
specify that the main
region of a Product List page contains a Product List grid
component. When the merchant creates a Product List page in the Visual Editor, the
main region is already populated
with the Product List grid component. This approach
helps the merchant to quickly create pages that use the appropriate components.

Be specific when naming a component, clearly indicating what kind of page the
component is intended for. For example, name a component intended for a Product
Detail page,
Product Detail Grid. If the merchant uses a component
that has attributes not specified by the aspect type assigned to the page, the
component doesn't render correctly.
By naming the components carefully, you can help
merchants create pages with the appropriate components.

Be careful when creating a page type that supports more than one aspect type.
Merchants must complete the extra and potentially confusing step of selecting a page
type
purpose during creation. Also, a page type generic enough to accommodate more
than one aspect type can make only limited use of prepopulated components, providing
the
merchant less guidance during page design.

Related concepts

Initialize a Region with a Component Already Populated

Develop a Dynamic Page

3. Create a Custom Cartridge for Page Designer UI Artifacts

To localize page types and component types, or to display thumbnail images for them
in the visual editor, create a custom cartridge that includes resource bundles for
localization and
thumbnail image files. Upload the custom cartridge to the Business Manager
site.

Create Page Designer Localization Resource Bundles

A resource bundle contains the localized names and descriptions for each page type, component type, and component type group that you want to localize. Including a resource bundle is optional. If you
don’t provide them, the visual editor uses information in the meta definition files.

Page Designer Thumbnail Images

In the Page Designer visual editor, thumbnail images assist the merchant in determining which page or component to select. If you don't provide thumbnail images, generic images are displayed.

3.1. Create Page Designer Localization Resource Bundles

A resource bundle contains the localized names and descriptions for each page type,
component type, and component type group that you want to localize. Including a resource
bundle is optional. If you don’t provide them, the visual editor uses information in the
meta definition files.

Each page type, component type group, and component type requires a separate resource
bundle.

Name the resource bundle files using this pattern:

<componenttype/pagetype/componenttypegroup>
_<locale>.properties

Put the resource bundles for page types and component types in this location in the
cartridge:

<your_cartridge>/cartridge/templates/resources/experience/pages

<your_cartridge>/cartridge/templates/resources/experience/components

Put resource bundles for component type groups within a componentgroup subdirectory:
<your_cartridge>/cartridge/templates/resources/experience/componentgroups

If the page type and component type files are located in a subdirectory of the
../experience/pages or
../experience/components directories, the resource bundles must
be
located in a corresponding subdirectory of the resources
directory.

Table 1.

Page Type, Component Type, Component Group Resource Bundle in Cartridge

mycartridge/cartridge/experience/components/banners/headlinebanner.json myBMcartridge/cartridge/templates/resources/experience/compone

mycartridge/cartridge/experience/pages/promopage.json myBMcartridge/cartridge/templates/resources/experience/pages/p

mycartridge/cartridge/experience/pages/promotions/promopage.json myBMcartridge/cartridge/templates/resources/experience/pages/p

content myBMcartrige/cartridge/templates/resources/experience/componen

Example Resource Bundle for a Page Type

promopage_en.properties

name=Promotional Page

description=A promotional page with header, main area and footer.

region.header.name=Header

region.main.name=Main

region.footer.name=Footer

Example Resource Bundle for a Component Type

banner_en.properties

name=Banner

description=A banner that allows to configure which image to show in a sizable manner.

attribute_definition_group.image.name=Banner Image Configuration

attribute_definition_group.image.description=You can define the image file, size and alt text for the banner image.

attribute_definition.image.name=Image

attribute_definition.image.description=The image shown by the banner.

attribute_definition.alt.name=Image Alt Text

attribute_definition.alt.description=The image alt text.

attribute_definition.size.name=Size

attribute_definition.size.description=The banner size.

Example Resource Bundle for a Component Type Group

The resource bundle for a component type group contains only the
name value of the group.

content_en.properties

name=Content

Related concepts

Page Designer Thumbnail Images

3.2. Page Designer Thumbnail Images

In the Page Designer visual editor, thumbnail images assist the merchant in
determining which page or component to select. If you don't provide thumbnail images,
generic images are
displayed.

The file name for a thumbnail images (without the extension) must match the
name of the respective page type or component type, for example,
promopage.png or
promopage.svg. Page
Designer doesn't support a different thumbnail image for different locales.

Thumbnail Images for Pages

Put
thumbnail images for page types in this location.

<your_cartridge>/cartridge/static/default/images/experience/pages/<subdirectory>/<id>

The
optional <subdirectory> must match the subdirectory where the
pages are in the ../experience/pages directory.

For example
if the page type is located in
mycartridge/cartridge/experience/pages/promotions/promopage.json,
the image file must be located
here:

myBMcartridge/cartridge/static/default/images/experience/pages/promotions/promopage.png

Thumbnail Images for Components

Put thumbnail images for component types at this location in your
cartridge:

<your_cartridge>/cartridge/static/default/experience/components/<sudirectory>/<id>

The optional <subdirectory> must match the subdirectory where

the component types are in the ../experience/components
directory.

For example if the component type is located in

mycartridge/cartridge/experience/components/banners/headlinebanner.json,
the image file must be located here:

mycartridge/cartridge/static/default/experience/components/banners/headlinebanner.png

Related concepts

Create Page Designer Localization Resource Bundles

4. Use Salesforce CMS Content with Page Designer

Use Salesforce CMS to manage all your content in a single repository. Merchants can
use the CMS content on a Page Designer page. For example, you develop a component type
that
displays a headline banner. You can create and manage different options for the content of
the headline banner in Salesforce CMS. When merchants add the component type to a
page, they
select which content to use for the headline banner from Salesforce CMS.

Get Access to Salesforce CMS

To use CMS content with Page Designer components, make sure your Salesforce org includes Salesforce CMS.

Connect Salesforce CMS to Page Designer

Connect your B2C Commerce instance to a CMS channel and assign the channel to your site library.

Develop a Component Type to Use CMS Content

Define a component type with an attribute assigned to Salesforce CMS content.

Use Salesforce CMS Content to Configure a Component Attribute

Configure the component attribute by selecting the Salesforce CMS content and then configuring the attributes for that content.

4.1. Get Access to Salesforce CMS

To use CMS content with Page Designer components, make sure your Salesforce org
includes Salesforce CMS.

Contact your Salesforce Account Executive or Salesforce Commerce Cloud Success

Manager for information about pricing and packaging. For information about Salesforce
CMS, see
Salesforce Content Management System
(CMS).

Related tasks

Connect Salesforce CMS to Page Designer

Use Salesforce CMS Content to Configure a Component Attribute
Develop a Component Type to Use CMS Content

4.2. Connect Salesforce CMS to Page Designer

Connect your B2C Commerce instance to a CMS channel and assign the channel to your
site library.

1. Open a support ticket and request a trust relationship between your Salesforce
org and your B2C Commerce instance.

2. In Salesforce CMS, add a CMS workspace to host the Page Designer content or use
an existing CMS workspace.
For information about creating CMS workspaces, see Create a CMS Workspace in
Salesforce CMS.

3. In Salesforce CMS, create a Commerce Cloud channel.

For information about creating a CMS channel, see Create a CMS
Channel.

4. In the CMS workspace, add the Commerce Cloud channel.

For information about adding CMS channels, see Add a Channel to a CMS
Workspace.

5. In B2C Commerce Business Manager, go to Administration > Sites > Content Libraries > site
> General. Scroll to the bottom and assign the CMS channel to your site
library.

Related tasks

Get Access to Salesforce CMS

Use Salesforce CMS Content to Configure a Component Attribute
Develop a Component Type to Use CMS Content

4.3. Develop a Component Type to Use CMS Content

Define a component type with an attribute assigned to Salesforce CMS content.

1. Determine the content required to configure the compontent type

attribute.
For example, you want merchants to be able to include a headline banner on
their Page Designer page by selecting a CMS record. You can use the news content
type, which
already exists in Salesforce CMS, to create and manage the content
for the headline banner.
If the content type you want to use in the Page Designer page doesn't already
exist in the CMS, create it. See Create Custom Content
Types for Salesforce CMS.

2. Create a component type that includes attibutes assigned to type

cms_record, with the content_type
specified in the editor_definition element.

For example, the following meta defintion file and script files for component
type CMS Headline Banner use a Headline Content attribute of type
cms_record, with
content_type news.

cmsheadlinebanner.json

"name": "CMS Headline Banner",

"description": "Image, text overlay from CMS that links user to a B2C target using the markup editor",

"group": "assets",

"attribute_definition_groups": [{

"id": "headlineContent",

"name": "Headline Content",

"description": "The presentation of the headline",

"attribute_definitions": [{

"id": "cmsItem",

"name": "Headline Content",

"type": "cms_record",

"required": true,

"editor_definition": {

"content_type": "news"

}]

"id": "calltoaction",

"name": "Call to Action Button",

"description": "Label and target for the call to cation button",

"attribute_definitions": [{

"id": "ctaTitle",

"name": "Button Title",

"type": "string",

"required": true

"id": "ctaLink",

"name": "Button Link",

"type": "url",

"required": true

"region_definitions": []

cmsheadlinebanner.js

'use strict';

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

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

var ImageTransformation = require('~/cartridge/experience/utilities/ImageTransformation.js');

/**

* Render logic for the assets.headlinebanner.

module.exports.render = function(context) {

var model = new HashMap();

var content = context.content;

if (content.cmsItem) {

model.bannerTitle = content.cmsItem.attributes.title;

model.bannerCopy = content.cmsItem.attributes.body;

if (content.cmsItem.attributes.bannerImage) {

model.bannerImg = {

src: {

mobile: ImageTransformation.url(content.cmsItem.attributes.bannerImage, { device: 'mobile' }),

desktop: ImageTransformation.url(content.cmsItem.attributes.bannerImage, { device: 'desktop' })

alt: content.cmsItem.attributes.excerpt

};

model.callToAction = {

title: content.ctaTitle,

link: content.ctaLink

return new Template('experience/components/assets/headlinebanner').render(model).text;

};

Related tasks

Get Access to Salesforce CMS

Connect Salesforce CMS to Page Designer
Use Salesforce CMS Content to Configure a Component Attribute

4.4. Use Salesforce CMS Content to Configure a Component Attribute

Configure the component attribute by selecting the Salesforce CMS content and then
configuring the attributes for that content.

https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/content/b2c_commerce… 20/23
11/10/21, 12:08 PM Page Designer
When you select CMS content for a component attribute, the CMS content is copied
into the page. If the original content in the CMS is updated, the changes don't
automatically appear
in the component. You must reconfigure the component attribute and
select the content again to get the updated content.

The default locale for the Page

Designer page is not necessarily the same as the default locale for the CMS
content.

1. Add the component that uses Salesforce CMS content to the page.
In this example, the CMS Headline Banner component type uses CMS content to
configure the Headline Content attribute.

2. In the attribute editor window, click Select CMS

Content.

A list of the CMS content available to configure the attribute is

displayed.

3. Choose the CMS content you want to use and click Select.

The CMS content is copied to the page. Any attributes for the CMS
content that require configuration are presented in the editing pane. The CMS
content for the Headline
Banner in the example requires that you enter a Title,
Body, and Banner Image.

4. Configure at least the required attributes for the component click

Save or Save &
Close.

Related tasks

Get Access to Salesforce CMS

Connect Salesforce CMS to Page Designer
Develop a Component Type to Use CMS Content

5. Develop a Custom Attribute Editor

You can create a custom attribute editor for configuring component attributes.
Merchants use the custom attribute editor when setting a value for the component attribute
in the
Business Manager visual editor.

Why Implement a Custom Attribute Editor?

When you create a component type for Page Designer, you specify attributes that the merchant can set. For example, you could create a headline banner component type with an attribute named Image.
When merchants use the headline banner component type on a page, they must configure the Image attribute to select the image to display. The type value that you assign to the attribute in the
component’s meta definition file determines the UI control (for example, a check box or file picker) that the merchant uses to configure the attribute.

How Does a Custom Attribute Editor Work?

A custom attribute editor uses a meta definition file, script, and JavaScript and CSS resources to implement an editor that operates within a self-contained environment on the client side. The merchant uses
the custom attribute editor in the Page Designer visual editor to configure a value for the attribute.

Custom Attribute in the Component Meta Definition File

In the meta definition file for any standard component type, set the type of the attribute for which you want to use a custom attribute editor to custom and include an editor_definition element for the
attribute. The editor_definition includes the custom attribute editor ID and optionally any configuration information that you want to pass to the custom attribute editor.

Custom Attribute Editor Meta Definition File

The meta definition file for a custom attribute editor references the JavaScript and CSS resources that the custom attribute editor requires.

Custom Attribute Editor Script File

Each custom attribute editor requires a script file. The script file has the same name as the corresponding meta definition file but with a .js extension. For example, if the meta definition file for the control is
magical.json, name the script magical.js.

Client-Side JavaScript and CSS for a Custom Attribute Editor

Put the client-side JavaScript files and CSS resources required to run the custom attribute editor in the static/default directory of the custom cartridge at a location that corresponds to the location of
the meta definition file and script file for the editor.

Custom Attribute Editor Events

Each custom attribute editor is wrapped in a host component that contains an HTML iframe element. The iframe encapsulates the code and styling of the editor and represents a self-contained sandbox
environment in which the editor runs so that different custom attribute editors on the same page don't interfere with each other. The host and the custom attribute editor in the iframe communicate by
passing events back and forth on a special messaging channel.

Create a Breakout Custom Attribute Editor that Displays in a Modal Window

Create a custom attribute editor sized to fit your content with the breakout custom attribute feature.

Use a Prebuilt Editor in a Custom Attribute Editor

Create custom attribute editors faster and more efficiently with prebuilt attribute editors. You can use the prebuilt editors as building blocks when you create custom attribute editors.

5.1. Why Implement a Custom Attribute Editor?

When you create a component type for Page Designer, you specify attributes that the
merchant can set. For example, you could create a headline banner component type with an
attribute named Image. When merchants use the headline banner component type on a page, they
must configure the Image attribute to select the image to display. The type value
that you
assign to the attribute in the component’s meta definition file determines the UI control
(for example, a check box or file picker) that the merchant uses to configure the
attribute.

Page Designer provides some preconfigured options for type. For example,
if you assign the type file to an attribute, the Page Designer Visual
Editor presents the merchant with a
file picker UI control for selecting which file to
use. If you assign the type boolean, the merchant is presented with a
checkbox to configure the attribute. The type enum presents the
merchant with a list to select a value from.

If none of the preconfigured Page Designer UI controls are appropriate for your
situation, you can create your own custom attribute editor. For example, you might want
a custom
attribute editor to let merchants select store locations on a map or choose a
color for the text or background. Or, you want to let merchants place a Favorite icon on
a product tile or
select which Shop Now button to use.

A custom attribute editor doesn’t conflict with the platform code for Page Designer, and
you can create more than one custom attribute editor for a single component type.

Related concepts

Page Designer Meta Definition Files

Use a Prebuilt Editor in a Custom Attribute Editor

Related reference

Component Attribute Types and UI Controls

5.2. How Does a Custom Attribute Editor Work?

A custom attribute editor uses a meta definition file, script, and JavaScript and CSS
resources to implement an editor that operates within a self-contained environment on the
client
side. The merchant uses the custom attribute editor in the Page Designer visual
editor to configure a value for the attribute.

In the meta definition file for the component type, define the attribute's type as
custom. If information is passed to the custom attribute editor,
include that information in an
editor_definition element for the
attribute. In the meta definition file for the custom attribute editor, list the CSS and
JavaScript resources that the custom attribute editor requires.
You can optionally add
server-side logic or resources to initialize the custom attribute editor in the script
file for the custom attribute editor. You include the meta definition file and script
file for the custom attribute editor, along with the JavaScript and CSS resources, in a
custom cartridge assigned to the Business Manager site.

On the client side, each custom attribute editor is wrapped in a host component that
contains an HTML <iframe> element. The iframe encapsulates the code
and style of the editor
and represents a self-contained sandbox environment in which the
editor runs so that different custom attribute editors on the same page don't interfere
with each other.

The host and the custom attribute editor in the iframe communicate with each other on a
dedicated communication channel. Page Designer adds some management code to the iframe
that includes a subscribe method and an emit method
that send predefined events with serializable payloads back and forth between the host
and the editor.

For information about the messaging channel implemented for Page Designer custom
attribute editors, see Channel Messaging.

Related concepts

Custom Attribute in the Component Meta Definition File

Custom Attribute Editor Meta Definition File
Custom Attribute Editor Script File
Client-Side JavaScript and CSS for a Custom Attribute Editor

Related reference

Custom Attribute Editor Events

https://documentation.b2c.commercecloud.salesforce.com/DOC1/advanced/print.jsp?topic=/com.demandware.dochelp/content/b2c_commerce… 23/23

Web Design For Dummies
From Everand
Web Design For Dummies
Lisa Lopuck
4/5 (12)
Web Development Design Foundations html5 8th Edition Felke Morris Test Bank PDF
No ratings yet
Web Development Design Foundations html5 8th Edition Felke Morris Test Bank PDF
9 pages
Building Websites All-in-One For Dummies
From Everand
Building Websites All-in-One For Dummies
David Karlins
4.5/5 (6)
Mastering Magento Theme Design
From Everand
Mastering Magento Theme Design
Andrea Saccà
No ratings yet
Web Design and Development: Website Technologies Fundamentals
From Everand
Web Design and Development: Website Technologies Fundamentals
Steven Bright
No ratings yet
WordPress 2.8 Theme Design
From Everand
WordPress 2.8 Theme Design
Tessa Blakeley Silver
No ratings yet
HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site
From Everand
HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site
Olga Maria Stefania Cucaro
4/5 (1)
Responsive Web Design with HTML5 and CSS3
From Everand
Responsive Web Design with HTML5 and CSS3
Ben Frain
3.5/5 (12)
The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer
From Everand
The HTML and CSS Workshop: Learn to build your own websites and kickstart your career as a web designer or developer
Lewis Coulson
5/5 (1)
Library Management System
92% (13)
Library Management System
58 pages
Getting Started - Page Designer GA 081319
No ratings yet
Getting Started - Page Designer GA 081319
79 pages
Mastering Adobe Commerce Frontend: Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity
From Everand
Mastering Adobe Commerce Frontend: Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity
Jakub Winkler
No ratings yet
Tech SEO Guide: SEO Checklist for Developers
From Everand
Tech SEO Guide: SEO Checklist for Developers
Andrea Fuller
No ratings yet
Microsoft SharePoint 2010 Business Application Blueprints
From Everand
Microsoft SharePoint 2010 Business Application Blueprints
Mike Oryszak
No ratings yet
Building Websites with Microsoft Content Management Server
From Everand
Building Websites with Microsoft Content Management Server
Lim Mei Ying
3/5 (2)
A Journey of Web Development With AI
From Everand
A Journey of Web Development With AI
Robiul Karim
No ratings yet
WordPress Web Application Development - Second Edition
From Everand
WordPress Web Application Development - Second Edition
Rakhitha Nimesh Ratnayake
No ratings yet
How to Create a Website in Dreamweaver
From Everand
How to Create a Website in Dreamweaver
Robert Lasky-Davison
No ratings yet
Web Design All-in-One For Dummies
From Everand
Web Design All-in-One For Dummies
Sue Jenkins
3/5 (12)
Bootstrap 4 Site Blueprints
From Everand
Bootstrap 4 Site Blueprints
Bass Jobsen
5/5 (2)
Fast Path To B2C Commerce Developer Certification - Module 5 - Page Designer and Jobs Framework
No ratings yet
Fast Path To B2C Commerce Developer Certification - Module 5 - Page Designer and Jobs Framework
19 pages
Enhancing Microsoft Content Management Server with ASP.NET 2.0
From Everand
Enhancing Microsoft Content Management Server with ASP.NET 2.0
Lim Mei Ying
No ratings yet
SharePoint Designer Tutorial: Working with SharePoint Websites
From Everand
SharePoint Designer Tutorial: Working with SharePoint Websites
Mike Poole
1/5 (1)
Exploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition)
From Everand
Exploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition)
Andrea Chiarelli
No ratings yet
WordPress Web Application Development
From Everand
WordPress Web Application Development
Rakhitha Nimesh Ratnayake
5/5 (1)
IBM Lotus Domino: Classic Web Application Development Techniques
From Everand
IBM Lotus Domino: Classic Web Application Development Techniques
Richard G. Ellis
No ratings yet
Hybris Accelerator Feature List
No ratings yet
Hybris Accelerator Feature List
11 pages
Domino 7 Lotus Notes Application Development
From Everand
Domino 7 Lotus Notes Application Development
Dick McCarrick
No ratings yet
AngularJS Web Application Development Blueprints
From Everand
AngularJS Web Application Development Blueprints
Vinci Rufus
No ratings yet
Microsoft Dynamics CRM 2011 New Features
From Everand
Microsoft Dynamics CRM 2011 New Features
Jim Wang
No ratings yet
Mastering Ext JS - Second Edition
From Everand
Mastering Ext JS - Second Edition
Loiane Groner
No ratings yet
Getting Started with SharePoint Framework (SPFx): Design and Build Engaging Intelligent Applications Using SharePoint Framework
From Everand
Getting Started with SharePoint Framework (SPFx): Design and Build Engaging Intelligent Applications Using SharePoint Framework
Vipul Jain
No ratings yet
Magento 2 Developer's Guide
From Everand
Magento 2 Developer's Guide
Branko Ajzele
No ratings yet
Developing Microsoft Dynamics GP Business Applications
From Everand
Developing Microsoft Dynamics GP Business Applications
Leslie Vail
No ratings yet
I Built My FREE Travel Empire with ZERO Experience—Learn How I Made Money with No Investment!
From Everand
I Built My FREE Travel Empire with ZERO Experience—Learn How I Made Money with No Investment!
Mr Bradley
No ratings yet
Team Foundation Server 2015 Customization
From Everand
Team Foundation Server 2015 Customization
Beeming Gordon
No ratings yet
Wordpress: A Step-by-Step Beginners Guide
From Everand
Wordpress: A Step-by-Step Beginners Guide
Phil Gilberts
No ratings yet
Dreamweaver CS6 For Dummies
From Everand
Dreamweaver CS6 For Dummies
Janine Warner
5/5 (1)
Ultimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)
From Everand
Ultimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)
Lau Tiam Kok
No ratings yet
Ultimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)
From Everand
Ultimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)
Lau Kok
No ratings yet
SilverStripe: The Complete Guide to CMS Development
From Everand
SilverStripe: The Complete Guide to CMS Development
Ingo Schommer
No ratings yet
Mastering Sharepoint Framework
From Everand
Mastering Sharepoint Framework
Nanddeep Nachan
No ratings yet
Microsoft Power Pages in Action: Accelerate your low-code journey with functional-rich web apps using Power Pages
From Everand
Microsoft Power Pages in Action: Accelerate your low-code journey with functional-rich web apps using Power Pages
Faisal Hussona
No ratings yet
Microsoft SharePoint 2010 Developer’s Compendium: The Best of Packt for Extending SharePoint
From Everand
Microsoft SharePoint 2010 Developer’s Compendium: The Best of Packt for Extending SharePoint
Yaroslav Pentsarskyy
No ratings yet
Mastering HTML and CSS for Modern Development
From Everand
Mastering HTML and CSS for Modern Development
THE NORTHERN HIMALAYAS
No ratings yet
SFCC v1
No ratings yet
SFCC v1
14 pages
Real-World Web Development with .NET 9: Build websites and services using mature and proven ASP.NET Core MVC, Web API, and Umbraco CMS
From Everand
Real-World Web Development with .NET 9: Build websites and services using mature and proven ASP.NET Core MVC, Web API, and Umbraco CMS
Mark J. Price
No ratings yet
Axure Prototyping Blueprints
From Everand
Axure Prototyping Blueprints
John Henry Krahenbuhl
No ratings yet
Project Proposal Digital Content Development
No ratings yet
Project Proposal Digital Content Development
13 pages
The Evolution of Web Development
From Everand
The Evolution of Web Development
Thandazani Mbutho
No ratings yet
Salesforce Commerce Cloud Interview Questions 1720855239
No ratings yet
Salesforce Commerce Cloud Interview Questions 1720855239
24 pages
CSS3 Foundations
From Everand
CSS3 Foundations
Ian Lunn
4/5 (5)
Legacy Developer Documentation
No ratings yet
Legacy Developer Documentation
158 pages
MediaWiki Skins Design
From Everand
MediaWiki Skins Design
Richard Carter
No ratings yet
IBM Cognos Business Intelligence 10.1 Dashboarding Cookbook
From Everand
IBM Cognos Business Intelligence 10.1 Dashboarding Cookbook
Ankit Garg
No ratings yet
Axure RP 6 Prototyping Essentials
From Everand
Axure RP 6 Prototyping Essentials
Ezra Schwartz
2/5 (1)
PrimeFaces Theme Development
From Everand
PrimeFaces Theme Development
Bailey Andy
No ratings yet
Bootstrap for ASP.NET MVC - Second Edition
From Everand
Bootstrap for ASP.NET MVC - Second Edition
Pieter van der Westhuizen
5/5 (1)
Symfony 1.3 Web Application Development
From Everand
Symfony 1.3 Web Application Development
Wojciech Bancer
No ratings yet
Exploring Autodesk Navisworks 2024, 11th Edition
From Everand
Exploring Autodesk Navisworks 2024, 11th Edition
Prof. Sham Tickoo
No ratings yet
Master Web Design with HTML, CSS, JavaScript, and jQuery
From Everand
Master Web Design with HTML, CSS, JavaScript, and jQuery
Kameron Hussain
No ratings yet
Building Websites with VB.NET and DotNetNuke 3.0
From Everand
Building Websites with VB.NET and DotNetNuke 3.0
Daniel N. Egan
1/5 (1)
Jisc Techwatch Report: Content Management Systems: Paul Browning & Mike Lowndes
No ratings yet
Jisc Techwatch Report: Content Management Systems: Paul Browning & Mike Lowndes
25 pages
SLM - Unit 13
No ratings yet
SLM - Unit 13
20 pages
Task 2 Web Developement
No ratings yet
Task 2 Web Developement
4 pages
Eal Estate Project With Source Code
No ratings yet
Eal Estate Project With Source Code
2 pages
Media Room Presentation
No ratings yet
Media Room Presentation
68 pages
ICT Theory 0417-Chapter 21
No ratings yet
ICT Theory 0417-Chapter 21
24 pages
Multimedia Web Design and Development
No ratings yet
Multimedia Web Design and Development
281 pages
Cantaib Computer Class 9 Keybook Short Chapter 3 C-01
No ratings yet
Cantaib Computer Class 9 Keybook Short Chapter 3 C-01
2 pages
Vac MCQ 08.09.2023
100% (1)
Vac MCQ 08.09.2023
20 pages
Practicals (2)
No ratings yet
Practicals (2)
27 pages
IV SEM
No ratings yet
IV SEM
24 pages
WebView With Examples
No ratings yet
WebView With Examples
4 pages
HTML & DHTML
No ratings yet
HTML & DHTML
187 pages
Istri Tetangga
No ratings yet
Istri Tetangga
5 pages
HTML HTTP
No ratings yet
HTML HTTP
3 pages
Ionicons v2.0.0 Cheatsheet
No ratings yet
Ionicons v2.0.0 Cheatsheet
123 pages
Online Shopping Report
No ratings yet
Online Shopping Report
50 pages
Web Designing Sessional
No ratings yet
Web Designing Sessional
15 pages
Web Scraping Presentation With Images
No ratings yet
Web Scraping Presentation With Images
4 pages
Webpage and PowerPoint
No ratings yet
Webpage and PowerPoint
7 pages
Learning AngularJS - PDFG
No ratings yet
Learning AngularJS - PDFG
58 pages
D7 DevelopersGuide (0834-1043)
No ratings yet
D7 DevelopersGuide (0834-1043)
210 pages
Desai Mohan
No ratings yet
Desai Mohan
12 pages
Samba Server Installation On Debian 8 (Jessie)
No ratings yet
Samba Server Installation On Debian 8 (Jessie)
12 pages
Xpath Cheat Sheet
No ratings yet
Xpath Cheat Sheet
11 pages
HTML Multiple Choice Questions and Answers
100% (4)
HTML Multiple Choice Questions and Answers
13 pages
Web Super Important
No ratings yet
Web Super Important
5 pages
5.Advanced HTML (1)
No ratings yet
5.Advanced HTML (1)
3 pages