CartCrossSell

Up to three products that go with what is in the cart, to place below its lines. Each adds to the cart in place, without the added sheet, and stays listed as "Added"; a status line says what was added. Hidden for a business buyer, and renders nothing without suggestions.

import { CartCrossSell } from "@evolve-storefront/feature-cart/cart-cross-sell";

Renders inside CartProvider.

Preview

Added In PlaceOpen in Storybook ↗

Usage

A consumer's cart suggests three of the four complementary products. Adding one keeps it in its place as "Added", and the status line says it is in the cart.

<CartLineItems cart={cart} />
<CartCrossSell
  renderLink={(product, children) => (
    <Link href={`/p/${product.product?.slug}`}>{children}</Link>
  )}
/>;

Props

Prop	Type	Description
headingLevel?	HeadingLevel	The title's level in the page. Defaults to 2.
limit?	number	How many to suggest, from 1 to 3. Defaults to 3.
renderLink?	((product: CartCrossSellProduct, children: ReactNode) => ReactNode)	Link a suggestion's image and name to its page. Omit for no link.
renderItem?	CartCrossSellItemRenderer	A suggestion's markup, such as the site's product card. Defaults to the block's own.

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

Examples

Hidden For BusinessA business buyer's cart suggests nothing: the block renders nothing at all.

// The same mount: nothing renders for a business buyer.
<CartCrossSell />;

Open in Storybook ↗

With Own CardThe site's own card, with the block's add control placed inside it.

<CartCrossSell
  renderItem={(product, { add }) => (
    <ProductCard variant={product} action={add} />
  )}
/>;

Open in Storybook ↗