Product Detail Page
Learn how to build a product detail page, fetch product data, display images, format prices, and add items to the order.
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:
- Product name
- Product description
- Available product variants
- Images of the product and its variants
- Price information
- Stock information
- Add to cart button
Fetching product data
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.
query GetProductDetail($slug: String!) {
product(slug: $slug) {
id
name
description
featuredAsset {
id
preview
}
assets {
id
preview
}
variants {
id
name
sku
stockLevel
currencyCode
price
priceWithTax
featuredAsset {
id
preview
}
assets {
id
preview
}
}
}
}{
"slug": "laptop"
}{
"data": {
"product": {
"id": "1",
"name": "Laptop",
"description": "Now equipped with seventh-generation Intel Core processors, Laptop is snappier than ever. From daily tasks like launching apps and opening files to more advanced computing, you can power through your day thanks to faster SSDs and Turbo Boost processing up to 3.6GHz.",
"featuredAsset": {
"id": "1",
"preview": "https://demo.deenruv.com/assets/preview/71/derick-david-409858-unsplash__preview.jpg"
},
"assets": [
{
"id": "1",
"preview": "https://demo.deenruv.com/assets/preview/71/derick-david-409858-unsplash__preview.jpg"
}
],
"variants": [
{
"id": "1",
"name": "Laptop 13 inch 8GB",
"sku": "L2201308",
"stockLevel": "IN_STOCK",
"currencyCode": "USD",
"price": 129900,
"priceWithTax": 155880,
"featuredAsset": null,
"assets": []
},
{
"id": "2",
"name": "Laptop 15 inch 8GB",
"sku": "L2201508",
"stockLevel": "IN_STOCK",
"currencyCode": "USD",
"price": 139900,
"priceWithTax": 167880,
"featuredAsset": null,
"assets": []
},
{
"id": "3",
"name": "Laptop 13 inch 16GB",
"sku": "L2201316",
"stockLevel": "IN_STOCK",
"currencyCode": "USD",
"price": 219900,
"priceWithTax": 263880,
"featuredAsset": null,
"assets": []
},
{
"id": "4",
"name": "Laptop 15 inch 16GB",
"sku": "L2201516",
"stockLevel": "IN_STOCK",
"currencyCode": "USD",
"price": 229900,
"priceWithTax": 275880,
"featuredAsset": null,
"assets": []
}
]
}
}
}This single query provides all the data we need to display our PDP.
Formatting prices
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.
Displaying images
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:
<img src={product.featuredAsset.preview + '?preset=large&format=webp'} />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:
interface VendureAssetProps {
preview: string;
preset: 'tiny' | 'thumb' | 'small' | 'medium' | 'large';
alt: string;
}
export function VendureAsset({ preview, preset, alt }: VendureAssetProps) {
return (
<picture>
<source type="image/avif" srcSet={preview + `?preset=${preset}&format=avif`} />
<source type="image/webp" srcSet={preview + `?preset=${preset}&format=webp`} />
<img src={preview + `?preset=${preset}&format=jpg`} alt={alt} />
</picture>
);
}Adding to the order
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.
mutation AddItemToOrder($variantId: ID!, $quantity: Int!) {
addItemToOrder(productVariantId: $variantId, quantity: $quantity) {
__typename
...UpdatedOrder
... on ErrorResult {
errorCode
message
}
... on InsufficientStockError {
quantityAvailable
order {
...UpdatedOrder
}
}
}
}
fragment UpdatedOrder on Order {
id
code
state
totalQuantity
totalWithTax
currencyCode
lines {
id
unitPriceWithTax
quantity
linePriceWithTax
productVariant {
id
name
}
}
}{
"variantId": "4",
"quantity": 1
}{
"data": {
"addItemToOrder": {
"__typename": "Order",
"id": "5",
"code": "KE5FJPVV3Y3LX134",
"state": "AddingItems",
"totalQuantity": 1,
"totalWithTax": 275880,
"lines": [
{
"id": "14",
"unitPriceWithTax": 275880,
"quantity": 1,
"linePriceWithTax": 275880
}
]
}
}
}There are some important things to note about this mutation:
- Because the
addItemToOrdermutation 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 calledUpdatedOrderwhich contains the fields we are interested in. - If any expected errors occur, the mutation will return an
ErrorResultobject. We'll be able to see theerrorCodeandmessagefields in the response, so that we can display a meaningful error message to the user. - In the special case of the
InsufficientStockError, in addition to theerrorCodeandmessagefields, we also get thequantityAvailablefield 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. TheInsufficientStockErrorobject also embeds the updatedOrderobject, which we can use to update the UI. - The
__typenamefield 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.