Frontastic for developers

We remove the complexity when building eCommerce websites in a headless world.

Documentation    

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 Master. 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 the Frontastic Editor, you'll automatically have a Master Pages folder created within Master, 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 its 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.

Please note, that these are for products only, and you can't have specific page URLs for variants of a product. For more information, see the Stream URL handling concept article.

Setting Up a Default PDP

  1. Open the Frontastic Editor, go to Master, and select the Product Details Pages folder
  1. Click on Default Page under the Master Page Rules header, click the + icon next to the Assigned Pages header, input a name, and click Save
  1. Add cells and Tastics to your page, be sure to select the Detailed Product stream in the Configuration settings for the Product Details Tastic, Preview your page, and then click Save
  1. Find your page within the Drafts section, click the more icon (three vertical dots), and select Make default

Editing a Default PDP

To edit your Default Product Details Page layout at any time, just click the edit 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.

Click the more icon on the Default version, and select Duplicate version. Then click the more icon on the Draft version and select Schedule. Input the date and time you want it to go live and click Save.

Then you can edit the PDP as normal by clicking the edit 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 Save.

To remove the scheduled time, click the more icon on the scheduled version of your page then click Make Draft.

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:

  1. Click + New rule next to the Master Page Rules header, input a name, select Entity Criterion as the Filter Type, and input your criteria then click Save

In this example, our rule is based on a product type being equal to sunglasses.

  1. Follow the steps from the Default PDP set up at the beginning of this article

That's it! You'll now have a bespoke Product Details Page that'll display based on the rules you've set up. So in our example, all products that have a type of 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"
  • in_array("<category-id>", attributes)
  • categoriescontain(categories, "<category-id>")

Updated 18 days ago


How a Product Details Page works


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.