Product Details Page

The Product Details Page (PDP) of your composable storefront app is fully managed by CMS, allowing for flexible configuration and customization through SmartEdit or Backoffice.

The Product Details Page (PDP) is driven entirely by CMS, and as a result, every composable storefront Angular component on the PDP page is mapped to a CMS component.

The default CMS structure in the electronics-spa content catalog is as follows:

{TopHeaderSlot}

{Summary}
                        |  ProductIntroComponent
ProductImagesComponent  |  ProductSummaryComponent
                        |  ProductVariantSelectorComponent
                        |  ProductAddToCartComponent

{UpSelling}
ProductReferencesComponent

{Tabs}
TabPanelContainer

Tabs

The tabs slot contains the TabPanelContainer component container, which itself contains the ProductDetailsTabComponent, ProductSpecsTabComponent, ProductReviewsTabComponent and deliveryTab.

Composable storefront renders the tabs found in the container, so tabs can be added, removed, or reordered inside the container, and the changes appear in composable storefront.

TabPanelContainer: {
    tabs: {
      NEW_TAB_ID: 'My new Tab',
    },
  },

The NEW_TAB_ID is the id of the new tab, and the string associated with it (in this example, My new Tab) is the title that is displayed in composable storefront.

Configuring the PDP Page

You can configure the PDP page using either SmartEdit or Backoffice, including adding new components, removing existing ones, or reordering the components or slots.

For composable storefront configurations, the components listed above can be mapped to new, custom components using the method described in the Custom Angular CMS Components section of Customizing CMS Components.

In addition to CMS mapping, you can also use outlets to add or replace certain components on the page. The labels of the outlets are the same as the names of the slots and components listed above. For more information, see Using Outlets to Override Page Templates.