How a Product Details Page Works
It can be a little confusing as to how a Product Details Page (PDP) works, in this tip, we'll hopefully make it a lot clearer for you.
The template for your PDPs needs to be created within the Master App. It's what we call a Master Page as it can be used for many different Products, but they'll have the same Page Layout.
When your Project is set up within Backstage, you'll automatically have a Master Pages folder created within the Master App, which includes a Product Details Pages folder. Then you'll need to set up a Default layout of your PDPs using the Page editor and Tastics as you would on any other Page. It will then use the Product API Stream so that every unique product on your site has its own Page that follows this structure and each will have it's own URL that follows a structure like
/p/[product-id], for example,
https://mypage.com/p/123456. This is because our Catwalk automatically creates these based on the API stream and the layout you've created.
If you want to, you can change these URLs using Symfony routing but we won't go through that here.
Setting Up a Default PDP
Product Details Pagesfolder
+icon next to the Assigned Pages header, input a name and click
Detailed Productstream in the Configuration settings
Previewto see what your Page will look like and change as you wish to, then click the
Moreicon (three vertical dots) and select
Editing a Default PDP
To edit your Default Product Details Page layout at any time, just click the
pencil icon on the active version of your Page, change it as you'd like to by adding Tastics, removing them or editing the configuration. Click
Save when you've finished making changes, click the
Preview button to make sure it looks good and then
Publish Changes as shown below:
Scheduling a New Version of the Default PDP
You can create a new PDP and make it go live when you want it to.
Then you can edit the PDP as normal by clicking the
pencil icon on the Scheduled version of your Page.
To change the scheduled time, click the
more icon on the Scheduled version of your Page, then click
Edit Schedule and edit the dates and times in the pop up, then click
To remove the Scheduled time, click the
more icon on the Scheduled version of your Page then click
Specific Product PDPs
Aside from the Default PDP, you can also create Multiple PDPs that can be wired to specific products using FECL. To do this:
addicon next to the Master Page Rules header, input a name, select
Entity Criterionas the Filter Type and input your criteria then click
In this example, our rule is based on a
Product Type being equal to
Sunglasses, will have a different PDP than all other product types.
Other options for your Criteria could be:
product.prize > 500 and product.label = "sale"
product.type = "makeup"