Product Details

The Product Details (PDP) screen is a core feature, built using the Products API, which presents a single product. It is built using a stack view and we offer different presets and components to tailor your app.

Deeplinks

# Product Details
products/detail/{id}
products/detail/{id}?listing_id={listing-id}
products/detail/{id}?listing_id={listing-id}&variant_id={variant-id}
products/detail/{id}?variant_id={variant-id}

Replace id with the product identifier. All query parameters are optional, specifying a listing, variant or forms will preselect them on the PDP.

Set up

The Product Details screen is automatically set up when linked to your app.

1. Ensure the SDK and Platform are set up following the PoqSDK set up steps.
2. Add the PoqProductDetail framework to your project following these steps.
3. Configure your product image aspect ratio in your AppModule on didAddToPlatform.

// Use the tallest image ratio calculation for best results.
Settings.Catalogue.imageRatio = 207 / 250

Product Storage

The Product Details (PDP) feature uses the Products API with our Product Storage architecture; where a Product can have any number of Forms (color, size, width...) and Variants (SKUs) made from the Variations of those Forms. It's easiest to see this with an example:

- Product
  - Forms
    - Color
      - Pink
      - Orange
    - Material
      - Satin
      - Cotton
    - Size
      - 8
      - 10
  - Variants (SKUs)
    - Pink, Cotton, 8
    - Pink, Cotton, 10
    - Pink, Satin, 8
    - Pink, Satin, 10
    - Orange, Cotton, 8
    - Orang, Cotton, 10

This is an example of a Product that comes in 2 Colors, 2 Materials and 2 Sizes. It has only 6 physically purchasable SKUs as the Orange SKUs are not made in Satin.

Whilst most apps have Products with only Color and Size Forms, our Product Storage architecture allows us to cater to any sector and the most complex of Products.

Presets

The default preset of the PDP only presents preselected forms (e.g. color). When the user adds to bag the Variant Selector is presented to allow the user to pick the remaining forms (e.g. size).

Container.shared.dataSources.productViewDataSource.replace { PoqProductViewDataSource() }

Inline Forms

We offer an alternate PDP data source to present all the forms on the PDP allowing the user to see and select all available forms (e.g. size, width...).

The form pickers present out of stock as strikethrough but still allow selection. They do not allow the user to select form combinations that have no SKUs (this is shown as greyed out).

1. Open your AppModule to the didAddToPlatform or setUpProductDetails function.
2. Inject the PoqInlineProductViewDataSource to replace the default.

Container.shared.dataSources.productViewDataSource.replace { PoqInlineProductViewDataSource() }

Dynamic Content

Product Details supports the following Dynamic Content slots:

Additional slots are very easy to add via the ProductViewDataSource; use the makeSlotView(for:with:) function.

Cart Widget

The CartWidget is a standalone component that is not related to the PDP but it's worth knowing how it affects the PDP.

From v25, the PDP will receive all of the actions being processed within the CartWidget. This allows the PDP to update the form selection as the user selects a form for any CartWidget operation.

Sticky Add To Cart

The sticky add to cart view is an alternate ProductView that works with the above presets. It moves the CartWidget to the bottom of the screen and always present whilst scrolling.

A developer can use this by injecting the alternate product view.

Shipment Selection

From v25, the CartWidget and PDP (via delegation) support Shipment Levels and stock focus.

When a shipment level is selected the PDP will change to mapping stock for the selected shipment. For example, if the user selects 'BOPIS' the inline form pickers will update to reflect the 'BOPIS' stock instead of the online stock.

Store Availability

From v24, the PDP can present a Store Availability link that will navigate the user to the Store Finder after selecting a SKU for stock check.

1. Open your AppModule to the setUpDependencies function.
2. Enable the isStoreAvailabilityEnabled setting.

Settings.ProductDetails.isStoreAvailabilityEnabled = true

In-Store Mode

From v25, the PDP supports In-Store Mode when Stores is set up. When In-Store Mode is enabled the PDP presents a new stock view showing the In-Store vs Online stock.

History

• v25:
  • Stock focus for BOPIS (shipment levels) and In-Store mode support.
  • Added recommendations Dynamic Content slot.
• v23: Store Availability.
• v22: Major rework for Variant Selection and Inline Forms.
  • This massively simplifies PDP customisations by hiding the complex OOTB selection logic.

Links

• Product List
• Wishlist