Product Card

Карточка товара. Pro · Магазин и платежи › Каталог

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add product-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ProductCard } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	`vertical`: image on top with a full-width add button; `horizontal`: a compact row with a small thumbnail.
`swatch`	`string`		Selected swatch value.
`defaultSwatch`	`string`		Initial `swatch` when uncontrolled.
`onSwatchChange`	`(value: string) => void`		Called with the new `swatch` when it changes.
`wishlisted`	`boolean`		Controlled `wishlisted`; use with `onWishlistedChange`.
`defaultWishlisted`	`boolean`	`false`	Initial `wishlisted` when uncontrolled.
`onWishlistedChange`	`(wishlisted: boolean) => void`		Called with the new `wishlisted` when it changes.
`onAddToCart`	`() => void \| Promise<void>`		May return a promise: the button shows a spinner until it settles, then "Added".
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProductCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`title` *	`string`
`price` *	`number`
`compareAtPrice`	`number`		Original price; shows a strikethrough and a "Sale −N%" badge.
`currency`	`string`	`'USD'`
`isNew`	`boolean`
`soldOut`	`boolean`		Out of stock: the add-to-cart button is disabled and a badge says so.
`rating`	`number`		0–5.
`reviewCount`	`number`
`swatches`	`ProductSwatch[]`	`[]`
`imageSrc`	`string`		Product photo URL; falls back to a generated placeholder.
`hoverImageSrc`	`string`		Second photo revealed on hover.
`imageSeed`	`string`		Seed for the generated product image (defaults to the title).
`hoverImageSeed`	`string`		Seed for a generated second image revealed on hover; without any hover image the photo zooms instead.
`imageIcon`	`ReactNode`	`<ShoppingBagIcon />`

Product Card

Установка

Пропсы

Похожие компоненты