Skip to main content

Product Detail Page

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
      }
    }
  }
}

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:

src/components/VendureAsset.tsx
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
    }
  }
}

There are some important things to note about this mutation:

  • Because the 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.
  • If any expected errors occur, the mutation will return an 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.
  • In the special case of the 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.
  • The __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.

Live example​

Here's an example that brings together all of the above concepts: