Product Grid

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

Установка

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

npm install valyro-ui-pro

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

Пропсы

Prop	Type	Default
`products` *	`ProductGridItem[]`		Products in display order; sorting and paging are up to the caller.
`totalCount`	`number`		Size of the whole result set (defaults to `products.length`).
`currency`	`string`		ISO 4217 code for products without their own `currency`.
`loading`	`boolean`	`false`	Initial load: renders skeleton cards instead of products.
`sortOptions`	`ProductSortOption[]`	`DEFAULT_SORT_OPTIONS`	Choices of the sort menu; an empty list hides it. Without a `sort` value the first one is selected.
`sort`	`string`		Controlled `sort`; use with `onSortChange`.
`defaultSort`	`string`		Initial `sort` when uncontrolled.
`onSortChange`	`(value: string) => void`		Called with the new `sort` when it changes.
`view`	`'grid' \| 'list'`		Controlled `view`; use with `onViewChange`.
`defaultView`	`'grid' \| 'list'`	`'grid'`	Initial `view` when uncontrolled.
`onViewChange`	`(view: ProductGridView) => void`		Called with the new `view` when it changes.
`hasMore`	`boolean`	`false`	Shows the "Load more" button.
`loadingMore`	`boolean`	`false`	The next page is loading: skeleton cards follow the products and Load more shows a spinner.
`onLoadMore`	`() => void`		Called by the Load more button.
`onAddToCart`	`(product: ProductGridItem) => void \| Promise<void>`		Called by a card's add button; a returned promise keeps it loading until it settles.
`onWishlistedChange`	`(product: ProductGridItem, wishlisted: boolean) => void`		Called when a card's wishlist heart is toggled; each card keeps its own state.
`empty`	`ReactNode`		Replaces the default empty state.
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProductGridLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Product Grid

Установка

Пропсы

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