The product detail page (often abbreviated to PDP) is the page that shows the details of a product and allows the user to add it to their cart.
Typically, the PDP should include:
Let's create a query to fetch the required data. You should have either the product's slug or id available from the
url. We'll use the slug in this example.
This single query provides all the data we need to display our PDP.
As explained in the Money & Currency guide, the prices are returned as integers in the smallest unit of the currency (e.g. cents for USD). Therefore, when we display the price, we need to divide by 100 and format it according to the currency's formatting rules.
In the demo at the end of this guide, we'll use the formatCurrency function
which makes use of the browser's Intl API to format the price according to the user's locale.
If we are using the AssetServerPlugin to serve our product images (as is the default), then we can take advantage
of the dynamic image transformation abilities in order to display the product images in the correct size and in
and optimized format such as WebP.
This is done by appending a query string to the image URL. For example, if we want to use the 'large' size preset (800 x 800)
and convert the format to WebP, we'd use a url like this:
An even more sophisticated approach would be to make use of the HTML <picture> element to provide multiple image sources
so that the browser can select the optimal format. This can be wrapped in a component to make it easier to use. For example:
To add a particular product variant to the order, we need to call the addItemToOrder mutation.
This mutation takes the productVariantId and the quantity as arguments.
There are some important things to note about this mutation:
addItemToOrder mutation returns a union type, we need to use a fragment to specify the fields we want to return.
In this case we have defined a fragment called UpdatedOrder which contains the fields we are interested in.ErrorResult object. We'll be able to
see the errorCode and message fields in the response, so that we can display a meaningful error message to the user.InsufficientStockError, in addition to the errorCode and message fields, we also get the quantityAvailable field
which tells us how many of the requested quantity are available (and have been added to the order). This is useful information to display to the user.
The InsufficientStockError object also embeds the updated Order object, which we can use to update the UI.__typename field can be used by the client to determine which type of object has been returned. Its value will equal the name
of the returned type. This means that we can check whether __typename === 'Order' in order to determine whether the mutation was successful.Here's an example that brings together all of the above concepts:
Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team