1 min read
Get Started
Last Updated - Platform 22.0.0 - SDK 17.0.0The 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
- Ensure the SDK and Platform are set up following the PoqSDK set up steps.
- 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.
- Hardcoding the setting
- Using the Info.plist
This is the better solution as you could set the value dynamically, and it is more visible to developers.
- Open your
AppModule
to thesetUpDependencies
function. - 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
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.
- Open your
AppModule
to thedidAddToPlatform
orsetUpProductDetails
function. - Inject the
PoqInlineProductViewDataSource
to replace the default.
Container.shared.dataSources.productViewDataSource.replace { PoqInlineProductViewDataSource() }
Use the Sticky Cart Button
- Open your
AppModule
to thedidAddToPlatform
orsetUpProductDetails
function. - Inject the
StickyAddToCartProductView
to replace the default.
Container.shared.views.productView.replace { StickyAddToCartProductView() }