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

• Create and manage pages: Business Users can design, schedule and publish pages quickly.
• Drag and drop content: A powerful visual editor makes content and layout changes easy.
• Preview across all touchpoints: Ensure beautiful experiences with preview by device type, customer group, schedule and locale.
• Build with reusable components: Developers leverage open web standards and provided solution kit to easily create reusable components.

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:

• Easy visual & responsive design without developer involvement
• Easy integration of commerce features into content
• Simple image & media handling

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:

• Inline editing, WYSIWYG and preview
• Batch upload and easy media management
• Personalization with targeting/segmentation and scheduling

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

Objectives

• Obtain reference source code for Page Designer
• Install Page Designer on SiteGenesis
• Install Page Designer on SFRA
• Locate Page Designer documentation
• Locate resources in Partner Community

Common tasks to install Page Designer

• Clone page-designer-reference repo from GitHub:
  • You need access to GitHub SalesforceCommerceCloud library
  • Browse https://github.com/SalesforceCommerceCloud/page-designer-reference
  • View Readme to understand the basic process
  • Clone the repo: git clone git@github.com:SalesforceCommerceCloud/page-designer-reference.git
• Enable the Page Designer feature in your SB:
  • Administration > Global Preferences > Feature Switches
  • Check Enable the Page Designer Feature
• Upload the 4 cartridges from the repo to your 19.5 sandbox (or newer)
• Install 1 cartridge on the Business Manager cartridge path:
  • bm_pagedesigner:bm_custom_plugin

Tasks to install Page Designer on SiteGenesis

• Install 2 cartridges on SiteGenesis cartridge path:
  • app_pagedesigner_sg:app_storefront_controllers:app_storefront_core:module_pagedesigner
• Import the site data for SiteGenesis (a sample page and associated images):
  • Administration > Site Development > Site Import & Export
  • Upload page-designer-reference /site-template /site_template_sitegenesis.zip
  • Import that site
• Open Page Designer on your SB:
  • Merchant Tools > Content > Page Designer
  • Click the Finished Sample Page link:
    • If you get a warning, try recycling the versions on your SB: from version1 to another, and back again
    • You should see a page with assets, similar to a homepage
• Test Page Designer in your storefront:
  • Disable Storefront URLs: Merchant Tools > Site Preferences > Storefront URL (so you can invoke controllers directly)
  • Browse the SiteGenesis storefront, About Us page
  • Change the content id to point to the sample page: Page-Show?cid=fixed-layout-sample-page

Tasks to install Page Designer on Storefront Reference Architecture

• Install 2 cartridges on the RefApp cartridge path (assumes you already imported SFRA)
  • plugin_pagedesigner_sfra:app_storefront_base:module_pagedesigner
• Import the site data for SFRA (a sample page and associated images):
  • Administration > Site Development > Site Import & Export
  • Upload page-designer-reference /site-template /site_template_sfra.zip
  • Import that site
• Open Page Designer on your SB:
  • Merchant Tools > Content > Page Designer
  • Click the Finished Sample Page link:
    • If you get a warning, try recycling the versions on your SB: from version1 to another, and back again
    • You should see a page with assets, similar to a homepage
• Test Page Designer in your storefront:
  • Disable Storefront URLs: Merchant Tools > Site Preferences > Storefront URL (so you can invoke controllers directly)
  • Browse the RefAch storefront, About Us page
  • Change the content id to point to the sample page: Page-Show?cid=fixed-layout-sample-page

Architectural overview

Objectives

• Understand Pages
• Understand Components
• Page Types
• Component types
• Relationship between pages, components and their types
• Directory structure
• Rendering

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

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:

• They also configure a set of attributes required to render the component, for example, entering text and selecting an image to be displayed on a banner component.
• They can use the same page types and component types to create multiple new pages and won't have to go back to development until they need changes or new page types and component types.

Page and component storage

• A Page:
  • Is part of the dw.experience package
  • Contains regions, which can contain components
  • Has a property type that defines the PageType to be used
• A Component:
  • Is part of the dw.experience package
  • Can also contain regions: called a layout component
  • Has a property type defines the ComponentType to be used
• All the above are stored as content assets:
  • Not visible under Merchant Tools > Content Assets
  • But part of the content library, which can be exported (and imported into any site)
  • Use a shared library if you intend to reuse Pages and Components in multiple sites
• A Region component assignment is of type ContentLink

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

• The long way:
  • Open Business Manager
  • Navigate to Merchant Tools > Content > Import > Export, export the RefArchSharedLibrary
  • Search for the page you browsed before in Page Designer
• The short way:
  • Navigate to the page-designer-reference/site-template /.../ RefArchSharedLibrary
  • Open the single page definition
• Answer these questions three:
  • On the fixed-layout-sample-page:
    • What does it contain?
    • What is the PageType?
  • On the component headlinebanner_newarrivals-womens:
    • How does it relate to a region on the page above?
    • What data does the component contain?
    • What is the ComponentType?
  • If you change the name of a PageType, is the page still visible in Page Designer? Try it!

Relationship between pages, components and their types

Each page and component has a type:

• PageTypes and ComponentTypes are defined in a cartridge
• Cartridge must be on the site's cartridge path
• A page is an instance of a PageType
• A component is an instance of a ComponentType

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 Class Diagram: Geeking out

How are Types defined?

• Meta Definition: region definitions: Specifying the drop zones into which the merchant can place components. attribute definitions: Specifying what content is to be provided by the merchants. ➡️ JSON
• Behavior: business logic: Gathering and preparing merchant defined attributes for presentation, e.g. search queries. ➡️ JS
• Front End: markup generation: Producing the actual HTML by laying out the regions and rendering the merchant defined attributes ➡️ ISML, CSS and resource files

📝 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?

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.