Search documentation v1.0.0

Product Details

Display a list of images with animations

Source Report Issue

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

img
Unlock code
How to use the ProductDetails component in Astro
<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:

Customize Ratings

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

img
Unlock code
How to customize ratings
<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:

img
Unlock code
How to customize the quantity input
<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
How to add options to the product
---
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:

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
CTA button types
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
How to handle user actions in Astro
<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
How to handle user actions in Svelte & React
<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
Callback information when adding products to cart
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:

img
Unlock code
How to display additional information
<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

Unlock code
Component API reference
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.
PropDefaultPurpose
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 PropPurpose
onAddToCart Callback function that runs when the "Add to Cart" button is clicked.
onAddToFavorite Callback function that runs when the favorite button is clicked.