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 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 studio.

When your project is set up within the Frontastic studio, you'll automatically have a dynamic 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 builder and Frontastic components as you would on any other page. It will then use the Product API data source 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 hub 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

2. 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

3. 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.

4. 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 components, 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 FECL. To do this:

1. Click + New rule next to the Dynamic page rules header and input a name

2. Select Entity Criterion as the Filter type

3. Input your criteria then click Save

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

4. 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>")

Avoiding product clashes

Say we want to have a product slider on all our product details pages, but we want to make sure that the product that's been selected isn't shown in our product slider.

To do that, we'd need to create a component for our product slider which includes a related products section:

{
    "tasticType": "demo/customProductSliderPDP",
    "name": "Product Slider on PDP",
    "category": "General",
    "icon": "image",
    "schema": [
        {
            "name": "Data source",
            "fields": [
                {
                    "label": "Related products",
                    "field": "relatedProductList",
                    "type": "stream",
                    "streamType": "product-list",
                    "default": null
                },
                {
                    "text": "",
                    "type": "stream",
                    "label": "PDP product",
                    "field": "pdpProduct",
                    "streamType": "product",
                    "default": null
                }
            ]
        }
    ]

}

Once it's uploaded to the studio, you'll need to add it to your product details dynamic page and select a data source for each.

For our tastic.jsx, we'll filter out the product on the page the customer is viewing by iterating over the field name-related product list, and checking is that the product is a PDP product, if it is, then not rendering it based on product ID:

import React from 'react'
import ProductSlider from '../../../../../paas/themes/frontastic/boost/src/js/patterns/organisms/Slider'

function customProductSliderPDP({ data }) {
    const filteredArray = data.relatedProductList.items.filter(
        (product) => product.productId !== data.pdpProduct.productId
    )
    return (
        <div>
            <p className='font-bold'>Related products no repeat:</p>
            <ProductSlider
                products={filteredArray}
            />
        </div>
    )
}

export default customProductSliderPDP

Then you'll need to register the new Frontastic component in the tastics.js file as usual, like:

import productSliderOnPDPTastic from './product-slider-pdp/tastic'

export default (() => {
    return Object.assign(
        {},
        {
            'demo/productSliderOnPDP': productSliderOnPDPTastic
        }
    )
})()