🔥💣🔥 Salesforce B2C Commerce Developer Certification Exam Practice Test Buy

Page Designer For B2C Commerce

Build commerce experiences faster

  1. Introduction to Page Designer
  2. Install reference implementation
  3. Architectural overview
  4. Overview of component delivery
  5. Collecting component-type requirements
  6. Creating a component-type definition
  7. Building the component-type rendering script
  8. Building the component-type rendering template
  9. Deploying and testing component-types
  10. Creating page-types and layouts
  11. Troubleshooting component and page rendering
  12. Using Page Designer for homepage and category landing pages

Introduction to Page Designer

Page designer was created because after initial site set up, merchants did not have the ability to easily create and manage content driven merchandising. Merchants made requests for a tool that would provide the following:

How does Page Designer address these problems?

Based on merchant feedback, we identified key issues to immediately address. The initial scope focuses on enabling our clients to quickly create and deliver new pages and commerce experiences to their customers:

Because Page Designer will allow their Merchandising and Marketing teams to oversee and implement updates without ongoing developer involvement, they can minimize overhead and save significant time to market with new online experiences for their customers with a high degree of quality.

Install reference implementation


Common tasks to install Page Designer

Tasks to install Page Designer on SiteGenesis

Tasks to install Page Designer on Storefront Reference Architecture

Architectural overview


Page Designer General Terms

Pages are set up in a hierarchical structure:

  • Pages
    • The outermost container of the structured content
    • Contain regions
    • Constrained by customer group and/or date range
  • Regions
    • Allow for a hierarchical structuring of components
    • Contain components
  • Components
    • Have attributes that specify the actual content
    • Constrained by customer group and/or date range
    • Can also be layouts: contain regions that contain other components
Page Designer Terms

Page Designer Types

Developers create page types and component types based on project requirements:

  • Page Types
    • Can also be considered “templates” (promo page, landing page, content page).
    • Contains set regions with specified components available for use in that region.
  • Component Types
    • The type of content available for use in a specific region (banners, product tiles, category tiles, layout, etc).
Page Designer - Promo page type example

Pages and Components

Content managers create the page in Business Manager and place components in regions based on the page type and component types the developer has made available:

Page and component storage

Page Designer - dw.experience package SFCC API

📝 Exercise 1: Understand how Pages, Components and Regions are stored

Relationship between pages, components and their types

Each page and component has a type:

This is the reason why modifying the type attribute on the Page.xml definition breaks the page viewer in Page Designer

How it comes together at design time: At development time the developers create page/component types. At design time the merchants create pages/components.

Page Designer - Roles and responsabilities

Page Designer Class Diagram: Geeking out

Page Designer Class Diagram

How are Types defined?

📝 Exercise 2: Walk-thru of PagesType, ComponentsType and Region implementation

  • In Page Designer:
    • Open Fixed Layout Sample Page
    • View it in Preview mode
    • Look at product tile, its name and click the link
    • Back to Edit mode
    • Locate a Product Tile Component
    • Edit the product name and save it
    • Test again on Preview mode
  • In Eclipse or preferred IDE (VSCode):
    • Locate the producttile.json file
    • What cartridge is it on?
    • What's the file path to it?
    • How many attributes are defined?
    • How come name showed even if not entered?
    • How come the link works even if not entered?
  • Explore producttile.js
    • Explain why the name showed even if not entered in BM
    • Explain why the link works even if not entered in BM
    • Where is the ISML file referenced?
    • In the render function: what does the model contain?
  • Explore producttile.isml:
    • The script passed a model. What is it called in here?
    • Locate the ccs files that supports this ISML template
  • Answer me these questions three:
    • Can you describe the difference between a component and a component type?
    • How come the producttile component shows a product search window in the page designer editor?
    • If you drag a category tile component in the same region as the product tile was, how come only one of the components show?
Page Designer Components

Cartridge Files and Folder Structure

The overall structure of this cartridge looks like this:

  • /experience contains the server side logic and definitions of page and component types
    • .../components/assets contains components that will have configurable attributes and render visible content. We call them Asset Components
    • .../components/layout contains components that can contain child components and will render no or only limited visible content by themselves. We call them Layout Components.
    • .../pages contains the page types
    • .../utilities contains dwscript files for server side logic not related to a single page or component type.
  • /static contains the css for the experience.
  • /templates contains the isml used to render the pages
    • .../default/decoration contains the decorators for pages used in the experience
    • .../default/experience contains the isml used by the page and component types. It mirrors the structure of cartridge/experience.
Page Designer Cartidge structure
🔥💣🔥 Salesforce B2C Commerce Developer Certification Exam Practice Test Buy