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:
    1. In each component use a string attribute that is used to define a tag.

      <a name="string_attribute_value"/>

    2. When creating the links, reference the tag.

      <a href="#string_attribute_value">Link to the string_attribute_value section</a>

  • Dynamically pull a profile attribute into a Page Designer component.

    For example, to display firstName or companyName 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".