Product Details

Display product information

Use the ProductDetails component to present key information about a product to help users understand features, pricing, and options before making a purchase.

Unlock code

<ProductDetails
    images={[{
        src: '/img/product.png',
        alt: 'main image',
        width: 250,
        height: 450
    }, { ... }]}
    title="Product Details"
    badge={{
        text: 'In stock',
        theme: 'success',
        icon: 'home'
    }}
    rating={{
        score: 4
    }}
    price="$99"
    disclaimer="Add an optional disclaimer text under your CTA for further information."
    options={[{
        name: 'Size',
        values: ['XS', 'S', 'M', 'L']
    }, {
        name: 'Color',
        values: ['Red', 'Green', 'Blue']
    }]}
    seller={{
        href: '/sellers/john'
    }}
/>

The ProductDetails component comes with various props that can help you fully customize your product details pages. The only required props for the component are:

images: Sets a set of images for the product. The gallery is only displayed if there are more than 1 image.
title: Sets a title for the product page.
price: Sets the price of the product.

Customize Ratings

The ratings on your page can be customized with the rating prop that accepts the same properties as a Rating component:

Unlock code

<ProductDetails
    ...
    rating={{
        score: 3,
        color: "#F7AA61",
        showEmpty: false,
        reviewCount: 123,
        reviewLink: '/product/reviews'
    }}
/>

Quantity

The quantity input can be customized using the quantity prop that can take the following fields:

show: Whether to show or hide the quantity input. By default, the input is shown.
label: Sets the label of the input field. Defaults to “Quantity”.
min: Sets the minimum possible value, set to 1 by default.
max: Sets the maximum possible value, set to 999 by default.

Unlock code

<ProductDetails
    ...
    quantity={{
        label: 'Amount:',
        min: 5,
        max: 10
    }}
/>

Options

Additional options can be listed in the sidebar by specifying the options prop. You can use this to fully customize product selection and let users choose from a variety of options.

Unlock code

---
const options = [{
    name: 'Size',
    values: ['XS', 'S', 'M', 'L']
}, {
    name: 'Color',
    values: ['Red', 'Green', 'Blue']
}]
---

<ProductDetails
    ...
    options={options}
/>

The options prop expects an array of objects in the following format:

name: Each group must have a name that is used to identify the option.
values: Values must be an array of strings that displays the possible options.

CTA Buttons

The component comes with 3 CTA buttons built-in: “Buy Now” as the main CTA, “Add to Cart” as as secondary CTA, and an “Add to Favorite” button. To customize them you can use the following props:

Unlock code

type ProductDetailsProps = {
    buyNowButton?: ({
        text?: string
        icon?: string
    } & ButtonProps)
    addToCartButton?: ({
        show?: boolean
        text?: string
        icon?: string
    } & ButtonProps)
    showFavoriteButton?: boolean
}

All buttons are shown by default. If you need to hide one of them, set the show attribute to false. You can find details about ButtonProps under the Button component documentation. To customize icons, you can pass an SVG string, or an icon type that is listed in the documentation of our Icon component.

Callbacks

When the user clicks on one of the buttons, the following events are fired that you can hook into to get access to the select values on the product page:

Unlock code

<script>
    import { listen } from 'webcoreui'

    // eslint-disable-next-line no-console
    listen('addToCart', event => console.log(event))

    // eslint-disable-next-line no-console
    listen('addToFavorite', event => console.log(event))
</script>

Unlock code

<ProductDetails
    ...
    onAddToCart={event => console.log(event)}
    onAddToFavorite={event => console.log(event)}
/>

Clicking on the “Favorite” button will report the name of the product, while clicking on the “Add to Cart” button will yield the following information:

Unlock code

type AddToCartCallback = {
    title: string
    price: string
    quantity: number
    options?: {
        name: string
        value: string
    }[]
}

You can customize this behavior in the dispatch events inside your ProductDetails component.

Disclaimer and Seller Information

To display further information with the component, you can use the disclaimer and seller props:

Unlock code

<ProductDetails
    ...
    disclaimer="Add an optional disclaimer text under your CTA..."
    seller={{
        href: '/sellers/john',
        text: 'Other products by John',
    }}
/>

Note that for the seller information to show up, you must define seller.href that links to your seller’s page. By default, this will show up as “Seller information” that you can customize through seller.text. You can also hide the icon by setting seller.showIcon to false.

Additional Content

You can display additional content with the component by passing child elements. This way, you can easily extend the page and customize your product details in many different ways.

See an example template that uses this component with additional child elements ->

API

Unlock code

type ProductDetailsProps = {
    images: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }[]
    title: string
    badge?: {
        text: string
        icon?: string
    } & BadgeProps
    rating?: RatingProps,
    price: string
    quantity?: {
        show?: string
        label?: string
        min?: number
        max?: number
    }
    buyNowButton?: ({
        text?: string
        icon?: string
    } & ButtonProps)
    addToCartButton?: ({
        show?: boolean
        text?: string
        icon?: string
    } & ButtonProps)
    showFavoriteButton?: boolean
    disclaimer?: string
    options?: {
        name: string
        values: string[]
    }[]
    seller?: {
        text?: string
        href: string
        showIcon?: boolean
    }
    className?: string
    sidebarClassName?: string
}

type AddToCartCallback = {
    title: string
    price: string
    quantity: number
    options?: {
        name: string
        value: string
    }[]
}

type SvelteProductDetailsProps = {
    onAddToCart?: (args: AddToCartCallback) => void
    onAddToFavorite?: (args: string) => void
} & ProductDetailsProps

type ReactProductDetailsProps = {
    onAddToCart?: (args: AddToCartCallback) => void
    onAddToFavorite?: (args: string) => void
} & ProductDetailsProps

Please see the documentation of additional prop types below.

Prop	Default	Purpose
`images`	`-`	Sets the images for the gallery.
`images.src`	`-`	Sets the path for the image.
`images.alt`	`-`	Sets an alternate text for the image.
`images.width`	`-`	Sets the width of the image.
`images.height`	`-`	Sets the height of the image.
`images.lazy`	`-`	Set to `true` to enable lazy loading for the image.
`title`	`-`	Sets a title for the product.
`badge.text`	`-`	Sets a badge under the title.
`badge.icon`	`-`	Sets an icon for the badge. You can pass an SVG string here or an icon type.
`rating`	`-`	Sets star rating next to the badge.
`price`	`-`	Sets the price of the product.
`quantity.show`	`true`	Set to `false` to hide the quantity input.
`quantity.label`	`Quantity`	Sets the label for the quantity input.
`quantity.min`	`1`	Sets the minimum valid value for the input.
`quantity.max`	`999`	Sets the maximum valid value for the input.
`buyNowButton.text`	`Buy Now`	Sets the text for the main CTA.
`buyNowButton.icon`	`-`	Sets an icon for the main CTA.
`addToCartButton.show`	`true`	Set to `false` to hide the secondary CTA.
`addToCartButton.text`	`Add to cart`	Sets the text of the secondary CTA.
`addToCartButton.icon`	`-`	Sets an icon for the secondary CTA.
`showFavoriteButton`	`true`	Show a favorite button next to the secondary CTA.
`disclaimer`	`-`	Display additional text under the CTA buttons.
`options.name`	`-`	Sets a name for an option group.
`options.values`	`[]`	Pass an array of strings to set options for the group.
`seller.text`	`-`	Sets the text for seller information.
`seller.showIcon`	`true`	Set to `false` to hide icon for seller information.
`seller.href`	`-`	Sets a link for the seller.
`className`	`-`	Pass additional CSS classes for the component.
`sidebarClassName`	`-`	Pass additional CSS classes for the sidebar, next to the gallery and main content.

Svelte & React Prop	Purpose
`onAddToCart`	Callback function that runs when the "Add to Cart" button is clicked.
`onAddToFavorite`	Callback function that runs when the favorite button is clicked.