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 - Implement anchor tags on your Page Designer pages.For example, to build a page and anchor to each respective section of the page, or potentially a component at the top with images or links that would anchor below them, do the following:
- In each component use a string attribute that is used to define a
tag.
<a name="string_attribute_value"/>
- When creating the links, reference the tag.
<a href="#string_attribute_value">Link to the string_attribute_value section</a>
- In each component use a string attribute that is used to define a
tag.
- Dynamically pull a profile attribute into a Page Designer component.
For example, to display
firstName
orcompanyName
in a component on the homepage after a customer logs in, such as "Welcome back, {firstName}", use:Request.getSession().getCustomer()
.Note: Be sure it isn't cached. - Duplicate a Page Designer page to a new library.
Using the Shared Library Page Designer, pages are automatically duplicated within the shared library. Theyβre also created offline allowing the merchandiser to determine if the page is available within the other locations.
- Caching for Page Designer pages is similar to other pages. For more information, see Page Caching..
- Check the Page Designer page cache time to live.
Thereβs no Page Designer-owned cache time to live, only what the customer developers set in their scripts. Use the "cache information" tool in SFTK to check how long a given page is cached. Select the top or page level cache icon, and look for a remote include of the pipeline "Internal - Page Designer".