Explore Pages, Components, and Development Elements
Learning Objectives
After completing this unit, you’ll be able to:
- 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.
Discover Page Designer
As a B2C Commerce developer using the Storefront Reference Architecture (SFRA), you know how to add content slots to a storefront page. Your manager wants you to implement Page Designer instead, which creates reusable page elements. Your up-front work gives merchandisers the power to customize pages on their own and frees you for other tasks.
With Page Designer, merchandisers create storefront experiences quickly. They design, schedule, and publish pages through a drag interface in Business Manager by using reusable components you build. Page Designer pages load faster than comparable pages built with content blocks.
The SFRA includes built-in Page Designer pages and prebuilt components, such as headers, carousels, and product tiles. You can customize the visual styling of the components to fit your brand or create your own page and component types by using code examples from SFRA.
Plan Your Implementation
Start by discussing your implementation plan with your merchandiser. Here’s a typical workflow.
Step | Task | Owner | Description |
|---|---|---|---|
1 | Plan pages | Merchandiser and developer | Create a requirements document that details required pages, components, layouts, and assets. |
2 | Get ready | Developer | Build the development environment. |
3 | Explore | Developer | Use sample pages and components to understand how Page Designer works. |
4 | Develop | Developer | Adapt the sample component and page types. |
5 | Create | Merchandiser | Use Page Designer in Business Manager to design, schedule, and publish custom pages. |
Combine Pages, Components, and Regions
Every Page Designer page follows the same structural pattern. Once you understand it, the canvas becomes predictable.
- Pages: Contain one or more regions and act as the outermost container of structured content.
- Regions: Contain components that you can structure hierarchically. Regions can contain other regions.
- Components: Contain attributes that define the content. Components can also be layouts that contain multiple regions.
- Attributes: Reference UI controls such as dropdown lists, text fields, or checkboxes.
You create page types and component types in a cartridge. Merchandisers use your page types and component types to build storefront pages in Page Designer. Their pages and components are instances of the types that you create.
To learn how a merchandiser creates a page with Page Designer, see Salesforce B2C Commerce Page Designer for Merchandisers.
Explore Development Elements
As an SFRA developer, you focus on these Page Designer elements.
Element | Description |
|---|---|
Controllers | Server-side scripts that handle storefront requests. When a shopper selects a category menu item or enters a search term, a controller renders a page. Write controllers in JavaScript and B2C Commerce script. |
JSON files | Meta definition files describe page types and component types. Each page type and component type requires one .json file. Page type files describe regions where you place components. Component type files describe attributes and can also define regions. |
Script files | Include business and view logic. Each page and component type requires a .js file with the same name as its meta definition file. Script files typically call ISML templates. |
ISML templates | Define how data and page information transforms into HTML-based web pages. Rendered in the browser, these pages use CSS for layout and styling. |
Properties files | Store text strings that show on the storefront, such as button names and error messages. Create a custom cartridge that includes resource bundles for localization and thumbnail image files to localize page types and component types or show thumbnail images in the visual editor. |
Work with Components in Business Manager
Merchandisers use the Page Designer visual editor in Business Manager to build pages. The visual editor displays a canvas where merchandisers drag components from a components menu into regions on the page. After adding a component, merchandisers configure its attributes by using UI controls in the right panel.
Components are the building blocks merchandisers use to create storefront experiences. When you develop component types, you define attributes that merchandisers configure—like image file, alt text, and size for a banner component. Merchandisers select values by using UI controls you specify in the component meta definition file.
SFRA provides prebuilt component types in three groups: Commerce Assets (product tiles, category tiles, and banners), Commerce Layouts (grid layouts and carousels), and Content (images, text blocks, and video players).
When merchandisers create a page, they select a page layout that defines the regions for component placement. You define these regions in the page type meta definition file. Some regions accept any component type, while others restrict which component types merchandisers can use.
Bind Data with Dynamic Attributes
Page Designer supports dynamic pages that use dynamic attributes passed at run time to determine storefront content. Dynamic pages use context, such as the displayed category or product, to populate component attributes.
For dynamic pages, create an aspect type that defines required attributes for a business use case. Aspect types support Product List and Product Detail page templates.
Component attributes can include a dynamic_lookup property that specifies an aspect attribute. At runtime, the component attribute gets its value from the specified aspect attribute. For example, a banner component on a Product List page automatically displays the banner image and text that Business Manager configures for the active category.
Merchandisers can override dynamic attribute values when configuring components. If a dynamic banner component uses the page’s category by default, merchandisers can select a different category or specify custom image and text values.
SFRA includes reference components for product list and product detail pages that demonstrate dynamic attribute binding. The product listing component displays products from the current category, while the dynamic banner component displays category-specific images and text.
Compare Page Designer Data and Content Assets
B2C Commerce persists pages and components in the database as content assets, but the content asset list in Business Manager doesn’t show pages and components. You can’t edit them directly from Business Manager. Replication and indexing processes generally treat pages and components the same way they treat content assets. The content library stores all of these items.
Pages use the format page.{page_type_id} for the type attribute. Components use the format component.{component_type_id} for the type attribute. This format distinguishes pages and components from other content assets in the library.
Make Pages Searchable
Page Designer pages and components are content assets that are not assigned to folders. To make them searchable, extend the ContentSearchModel to remove the folder filter. In the SFRA searchHelpers.js file, add this line to the setupContentSearch function.
apiContentSearchModel.setFilteredByFolder(false);.
Similarly, update the SuggestModel in the SearchServices.js file.
suggestions.setFilteredByFolder(false);.
These changes make Page Designer pages discoverable through storefront search and search suggestions.
Up Next
In this unit, you learned how Page Designer pages, components, and regions fit together. You discovered how merchandisers use the visual editor in Business Manager to build pages from component types you create. You explored dynamic attributes that bind component data to runtime context like categories and products.
In the next unit, you set up an environment where you can build and customize Page Designer pages and components for SFRA.