ProductOrderMatrix

Order several variants at once: a quantity per cell of a two-dimension grid, such as colour by storage, with each cell's stock. The total and its tier price sit under the grid, then the add button. A sold-out cell takes no quantity.

import { ProductOrderMatrix } from "@evolve-storefront/feature-product/product-business";

Renders inside ProductListingProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The contract price excluding VAT leads; incl. VAT and the struck list price follow.

<ProductContractPrice
  price={variant.price}
  listPrice={variant.listPrice}
  company={businessUnit.name}
/>;

Props

Prop	Type	Description
variants	readonly OrderMatrixVariant[]	Every variant of the product, as ProductOrderMatrix in ./queries reads them.
rows	string	The dimension key down the side, such as color.
renderAction	(lineItems: OrderMatrixLine[], label: string) => ReactNode	The button that adds the lines, given its label: typically feature-cart's CartAddLinesButton, whose drawer then sums up what was added.
columns?	string	The dimension key across the top, such as storage. One column without it.
tiers?	readonly PriceTier[]	Unit prices by quantity; the tier applies to the total across variants.
unit?	string | null	What one is sold as, such as "box", in place of "piece".

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to ProductOrderMatrix to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-product/product-business.

ProductOrderMatrixSheet"Order several variants at once": a button in the buy box that opens the matrix in a sheet.

Prop	Type	Description
children	ReactNode	The ProductOrderMatrix.
className?	string

Examples

At List PriceA contract price at list price strikes nothing through.

<ProductContractPrice price={variant.price} listPrice={variant.listPrice} />;

Open in Storybook ↗

IdentifiersSKU, MPN and EAN under the title, each copied with its own button.

<ProductIdentifiers sku={variant.sku} mpn={variant.mpn} ean={variant.ean} />;

Open in Storybook ↗

Price TiersEach tier's saving against the first, the current tier marked, and a nudge that raises the quantity to the next one.

<ProductPriceTiers tiers={tiers} quantity={quantity} onQuantityChange={setQuantity} />;

Open in Storybook ↗

Best Price TierAt the top tier there is no next one to reach, so it says the best price is reached.

<ProductPriceTiers tiers={tiers} quantity={60} onQuantityChange={setQuantity} />;

Open in Storybook ↗