Product Details

Display a list of images with animations

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

• 
• 
• 
• 

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

• 
• 
• 
• 

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

• 
• 
• 
• 

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

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

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:

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

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

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:

• 
• 
• 
• 

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

API

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