1 min read

Get Started

Last Updated - Platform 22.0.0 - SDK 17.0.0

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 made from the Variations of those Forms. It's easiest to see this with an example:

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.

Set up the Product Details screen

  1. Ensure the SDK and Platform are set up following the PoqSDK set up steps.
  2. Add the PoqProductDetails framework to your project following these steps.

That's it! No code required.

Set the product image ratio

We set a default image ratio out of the box to cover most of our apps. However, this may not cater perfectly to the size of your images which can lead to the image viewer resizing or adding bars.

This is the better solution as you could set the value dynamically, and it is more visible to developers.

  1. Open your AppModule to the setUpDependencies function.
  2. Set the value to your tallest image ratio using the calculation for best accuracy.
Settings.Catalogue.imageRatio = 207 / 250

The image ratio can be calculated as ImageRatio = ImageWidth / ImageHeight.

Show the inline form pickers

ProductDetails InlineFormPickers

The PDP only presents preselected form switchers by default (e.g. the color switcher). You may want to show all the forms to allow the user to see all the available sizes and select a SKU.

If you are using a variant level Wishlist this is done automatically as the user must be able to select the SKU to add to the Wishlist.

  1. Open your AppModule to the didAddToPlatform or setUpProductDetails function.
  2. Inject the PoqInlineProductViewDataSource to replace the default.
Container.shared.dataSources.productViewDataSource.replace { PoqInlineProductViewDataSource() }

Use the Sticky Cart Button

ProductDetails StickyCartButton

  1. Open your AppModule to the didAddToPlatform or setUpProductDetails function.
  2. Inject the StickyAddToCartProductView to replace the default.
Container.shared.views.productView.replace { StickyAddToCartProductView() }

Next steps