AddToCartScope

One pending state for every add in its subtree. While any useAddToCart inside is in flight, all of them report isPending, so a PDP's buy box, its sticky mobile bar and any CartAddProductButton disable together. Each add keeps its own onAdded and error. Two adds sent at once race on the cart's version, which is what this prevents.

import { AddToCartScope } from "@evolve-storefront/feature-cart/add-to-cart-scope";

Renders inside CartProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The buy box and the sticky bar share a scope; the carousel below does not.

<AddToCartScope>
  <ProductForm sku={variant.sku} />
  <MobileProductForm sku={variant.sku} />
</AddToCartScope>

// Inside either form: `isPending` covers every add in the scope.
const add = useAddToCart();
<Button type="submit" disabled={add.isPending}>Add to cart</Button>;

Props

Prop	Type	Description
children	ReactNode