🛒 CartProvider & useCart() Overview

The CartProvider and useCart() hook from @nextshopkit/sdk give you a complete, reactive cart system that works in modern Shopify headless storefronts.

It combines React Context, Shopify Storefront API, and advanced configuration options to manage:

• Persistent cart state
• Line item operations (add, remove, update)
• Discount codes
• Buyer identity
• Custom cart attributes
• Fully typed metafield casting

✅ When to Use This​

• Building a custom cart page
• Adding Add to Cart buttons across your site
• Displaying a mini cart in the header
• Managing cart state globally via React Context
• Working with typed custom attributes and metafields
• Or using standalone cart methods in non-React or SSR environments

🧠 Key Features​

• ⚛️ React Context provider (<CartProvider />)
• 🪝 Hook access via useCart()
• 📦 LocalStorage cart ID persistence
• 🧾 Discount code support
• 🔒 Secure Storefront API integration
• 🎯 Strong TypeScript support
• 🧬 Metafield casting with transform hooks
• 🧰 Optional standalone methods for server use

📦 Exposed Methods​

const {
  cart,
  loading,
  addProducts,
  removeProduct,
  updateQuantity,
  applyDiscountCode,
  removeDiscountCode,
  emptyCart,
  mergeCarts,
  updateBuyerIdentity,
  updateCartAttributes,
  setCartAttribute,
  removeCartAttribute,
  resetCart,
  totalCount,
  totalPrice,
  typedCartAttributes,
} = useCart();

➡️ Learn more in the API Reference →

🚧 Requirements​

• Your Shopify Storefront API token must not be hardcoded into client-side code.
• If calling standalone SDK methods, use a secure environment (like API routes or server components).
• Ensure your Storefront API has the correct permissions enabled for cart access.

🧪 Pro Tip​

Use typed cart attributes to cast metafields into useful frontend shapes, like:

• Tags
• Flags (e.g. custom.isB2B)
• UI-driven personalization

typedCartAttributes.customTagline; // → "Free shipping on orders over €100"

✅ Next: Provider Setup →