CartAddedSheet
The add-to-cart confirmation: mount it once beside CartProvider and every add
opens it, on a pending row until the cart answers. A single add shows the product,
quantity and price, with its add-ons and a bundle's extras; a bulk add shows the
count, units and amount. Refused lines are listed with the reason either way. It
never closes on its own; Escape, the backdrop and both actions close it.
import { CartAddedSheet } from "@evolve-storefront/feature-cart/cart-added-sheet";Renders inside CartProvider.
Preview
Usage
A consumer's single add: the product, the quantity added, its price, and two suggestions. Escape closes it and puts focus back on the button.
// Once, inside CartProvider: every add on every page opens it.<CartAddedSheet renderCartLink={(children) => <Link href="/cart">{children}</Link>} renderCrossSell={(line) => <RelatedProducts slug={line.productSlug} limit={2} />}/>;Props
| Prop | Type | Description |
|---|---|---|
renderCartLink | (children: ReactNode) => ReactNode | Wrap the "Go to cart" label in the app's link to the cart page. The sheet styles it as its primary button and closes on click. More |
side? | "right" | "left" | "top" | "bottom" | null | |
hideCloseButton? | boolean | Hide the built-in top-right close button. |
closeIcon? | ReactNode | Replace the close glyph (rung 3). Defaults to the |
overlayClassName? | string | |
renderLink? | CartLineLinkRenderer | Link the added product's image and name to its page. Omit for no link. |
renderItem? | CartAddedLineRenderer | Replace the whole row of a single add, such as with the site's line card. |
renderCrossSell? | ((line: CartLineItem) => ReactNode) | Products to suggest beside a consumer's single add, two by convention. Never called for a bulk add or a business buyer. |
Any other props go to the root element, like on a plain HTML element.
Examples
Single Add With Add OnAn add with an add-on, such as a warranty: the add-on is listed under the product with its own price.
// The PDP passes the ticked add-ons to the button; the sheet needs nothing.<CartAddProductButton sku={variant.sku} addOns={selection.selected} />;Single Add With BundleA bundle is a single add: the product's row, with the extras bought with it listed under it at the bundle's price, never the bulk summary.
// The PDP passes the ticked extras to the button; the sheet needs nothing.<CartAddBundleButton sku={variant.sku} extras={selection.extras} />;Business Single AddA business buyer's single add confirms the product and suggests nothing.
// The same mount: the sheet leaves renderCrossSell uncalled for a business buyer.<CartAddedSheet renderCartLink={renderCartLink} renderCrossSell={renderCrossSell} />;Bulk AddA bulk add from an order matrix, a shopping list or a reorder: the count, the units and the amount, and each refused line with its reason.
// More than one line makes it a bulk add; no cross-sell there.<CartAddLinesButton lineItems={orderLinesToAdd(order)} />;Nothing AddedNothing could be added: the sheet says so and lists why.
// A refused line arrives in `failed` on the result, not as an error.<CartAddProductButton sku={variant.sku} />;LoadingThe sheet opens as the add is sent, on a pending row in the shape of the product's row, and the cart's answer replaces it.
// Nothing to wire: every add opens the sheet before the cart answers.<CartAddedSheet renderCartLink={(children) => <Link href="/cart">{children}</Link>} />;