How a product details page works

It can be a little confusing as to how a product details page works, this article should hopefully make it a lot clearer for you.

A product details page is what we call a dynamic pagedynamic page - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master page`. as it can be used for many different products, but they'll have the same page layout. The template for your product details page needs to be created within Dynamic pages in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

When your project is set up within the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., you'll automatically have a dynamic pagesdynamic pages - A type of page that creates the default layout of pages that use the same structure but with different data, for example, a Product Details Page, wishlist, cart, search, and so on. Previously known as `master pages`. folder created within Dynamic pages, which includes a Product details pages folder. Then you'll need to set up a default layout of your product details page using the page builderpage builder - An interface you work with to build your pages. and Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. as you would on any other page. It will then use the Product API data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site. 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 API hubAPI hub - The API hub combines our code, your code, and APIs to create the backend of a commerce site. Any backend development or extensions are done here. Known as `Catwalk` in code. automatically creates these based on the API 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.

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 product details page

  1. Open the Frontastic studio, go to Dynamic pages, and select the Product details pages folder
  1. Click on Default Page under the Dynamic page rules header, click + New page version next to the Page versions header, input a name, and click Save
  1. Add layout elements and Frontastic components to your page, be sure to select the Detailed Product data source in the settings for the Product Details component, Preview your page, and then click Save

🚧

If you add a product slider to a product details page, the current product could also appear in the product slider if it matches the filter criteria. To avoid this, you'll need to write it into your component or code.

  1. Find your page within the Draft 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, click the edit icon on the live version of your page, change it as you'd like to by adding Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., removing them, or editing the settings. Click Save when you've finished making changes, click the Preview button to make sure it looks good, and then Publish .

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 FECLFECL - Stands for Frontastic Entity Criterion Language. It's a way to create specific pages that will be shown to customers if that page meets the criteria given.. To do this:

  1. Click + New rule next to the Dynamic page rules header and input a name
  1. Select Entity Criterion as the Filter type
  1. 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. See the Using FECL article for more information.

  • price > 500 and label = "sale"
  • type = "makeup"
  • in_array("<category-id>", attributes)
  • categoriescontain(categories, "<category-id>")

Did this page help you?