Product Details Page
Note: Spartacus 4.x is no longer maintained. Please upgrade to the latest version.
Note: Spartacus 4.x was tested with SAP Commerce Cloud versions 1905 to 2205. Spartacus 4.x has not been verified to work with (and is not guaranteed to work with) SAP Commerce Cloud 2211 or later releases.
The Product Details Page (PDP) is driven entirely by CMS, and as a result, every Spartacus 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
.
Spartacus renders the tabs found in the container, so tabs can be added, removed, or reordered inside the container, and the changes appear in Spartacus.
Note: The title of each tab is located in the Spartacus translations. As a result, when you add a new tab, you also need to add the title on the Spartacus side. Tab titles should be provided in the tabs
property of the TabPanelContainer
, and should be formatted as follows:
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 Spartacus.
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 Spartacus configurations, the components listed above can be mapped to new, custom components using the method described inCustomizing 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.
Note: When using outlets on the PDP page, it might be necessary to provide custom CSS to align the new elements correctly.