Explore Pages, Components, and Development Elements
Learning Objectives
- Explain the benefits of using Page Designer over content slots.
- List three steps of a typical Page Designer implementation plan.
- Describe how the Page Designer pages and component type JSON and script files relate to each other.
- Explain how Page Designer data differs from content asset data in the content database.
Introduction
Vijay Lahiri is a developer who works for Cloud Kicks Corporation, a company that specializes in high-end custom sneakers. One of his tasks is to work with his marketing and merchandising organizations to customize the storefront. Ecommerce moves fast with changes happening in an instant, and he’s eager to help his company shine in that world.
He knows how to add Salesforce B2C Commerce content slots to a storefront page and is always happy to make code changes for his merchandising colleagues. His marketing director wants him to use Page Designer for B2C Commerce instead to create reusable page elements. His up-front work will enable the merchandisers to customize pages on their own, freeing him for other important assignments.
With Page Designer, merchandisers can create beautiful and impactful storefront experiences fast. They design, schedule, and publish pages in an easy drag-and-drop interface, with reusable components built by developers like Vijay.
Plus, Page Designer pages load faster than comparable pages built using content slots. It’s a win for shoppers, too!
You build Page Designer pages and components using open web standards, framework components, and a reference solution kit. You can use the Storefront Reference Architecture (SFRA) as a base, which reduces development dependencies and quality assurance time, and improves speed to market. SFRA comes with a simple built-in Page Designer pages and prebuilt components such as headers, carousels, and product tiles.
You can skin and customize the components to fit the Cloud Kicks brand and user experience requirements.
You can also create your own page and component types, and just pull code examples from SFRA. It’s your choice!
Pages, Components, and Regions
In their first meeting, Vijay and the marketing director discuss their overall implementation plan. Here’s what they decide.
| Step | Task | Assigned to | Description |
| 1 | Plan pages | Marketing director and Vijay | Create a requirements document that details the required pages, components, layouts, and assets. |
| 2 | Get ready | Vijay | Build the development environment, including all systems and tools. |
| 3 | Explore | Vijay | Use the sample pages and components to gain an understanding of how Page Designer works and review the requirements. |
| 4 | Develop | Vijay | Adapt the sample component and page types. |
| 5 | Create | Brandon Wilson, merchandiser | Use Page Designer in Business Manager to design, schedule, and publish custom pages in the storefront by dragging the page and component types. |
Pages, Components, and Regions
Vijay starts with key Page Designer terms.
- Pages are the outermost container of structured content and contain regions.
- Regions contain components that you can structure hierarchically. Regions can also contain other regions.
- Components contain attributes that define the content asset.
- Components can also be layouts, which can contain multiple regions to which merchants can add more components.
- Attributes reference UI controls for configuring component attributes. Merchandisers use the UI control when setting a value for the component attribute in Page Designer. A drop-down list, text field, or true/false checkbox are all UI controls.
This diagram illustrates how you can arrange regions and components on a page.
Vijay creates the page types and component types in a cartridge, a mechanism for packaging and deploying program code and data for B2C Commerce storefronts.
Brandon Wilson, the Cloud Kicks merchandiser, uses the page types and component types to build his storefront pages in Page Designer. His pages and components are instances of the page and component types that Vijay creates.
You can follow along with Brandon as he creates a page in the Salesforce B2C Commerce Page Designer for Merchandisers Pages Trailhead module.
What Are the Development Elements
As an experienced B2C Commerce developer, Vijay focuses on these Page Designer components.
| Element | Description |
| Controllers | Controllers are server-side scripts that handle storefront requests. For example, when a shopper clicks a category menu item or enters a search term, it triggers a controller that renders a page. Controllers are written in JavaScript and Salesforce B2C Commerce script. |
| JSON files | JSON (JavaScript Object Notation) meta definition files describe the page types and component types. Each page type and component type requires one meta definition file with a .json extension.
|
| Script files | Script files include business and view logic. Each page and component type requires a script file. For a Page Designer page or component type, the script file must have the same name as the meta definition file, but with a .js extension. Typically, a script file calls an ISML template. |
| ISML templates | ISML templates define how data and page information is transformed into HTML-based web pages. These pages are rendered on the browser using CSS for page layout and styling and B2C Commerce form definitions for data display and verification. Templates are coded in the Internet Store Markup Language (ISML) that dynamically generates HTML. |
| Properties files | Properties files are where you store the text strings that appear on the storefront such as button names and error messages. To localize page types and component types, or to display thumbnail images for them in the visual editor, Vijay creates a custom cartridge that includes resource bundles for localization and thumbnail image files. Then he uploads the custom cartridge to the Business Manager site. When he adds his new page and component types, or modifies existing files, he updates the properties files accordingly. |
Page Designer and Content Assets
Content assets highlight products and discounts as part of the shopper experience.
This page contains content assets such as the photo of a hiker and the promotion text. The page is separated into regions such as the header and the main content.
Pages and components are persisted in the B2C Commerce database as content assets. But the content asset list in Business Manager doesn’t show pages and components, 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, and they are all stored in the content library (database).
Searchable Pages
Page Designer pages and components are content assets, but they're not assigned to folders. To make them searchable, extend the ContentSearchModel to remove the folder filter.
Next Steps
In this unit, you followed Vijay Lahiri as he learned how the B2C Commerce Page Designer pages, components, and regions fit together. You also learned about the key development elements that Vijay used to create Page Designer page and components types.
In the next unit, Vijay sets up an environment where he can build and customize Page Designer pages and components.
