Skip to main content

🧪 Cart Usage Examples

Once your app is wrapped in <CartProvider>, you can use the useCart() hook anywhere in the tree to access cart state and actions.

🛒 Add to Cart Button​

"use client";

import { useCart } from "@nextshopkit/sdk/client";

export function AddToCartButton({ merchandiseId }: { merchandiseId: string }) {
  const { addProducts, loading } = useCart();

  const handleClick = () => {
    addProducts([{ merchandiseId, quantity: 1 }]);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? "Adding..." : "Add to Cart"}
    </button>
  );
}

🛍️ Mini Cart in Header​

"use client";

import { useCart } from "@nextshopkit/sdk/client";

export function MiniCart() {
  const { cart, totalCount, totalPrice } = useCart();

  return (
    <div>
      <p>{totalCount} items</p>
      <p>Total: €{totalPrice.toFixed(2)}</p>
      <a href="/cart">View Cart</a>
    </div>
  );
}

🔁 Update Quantity​

const { updateQuantity } = useCart();

const update = () => {
  updateQuantity("gid://shopify/CartLine/123", 3);
};

❌ Remove Item​

const { removeProduct } = useCart();

const remove = () => {
  removeProduct("gid://shopify/CartLine/123");
};

🎟️ Apply Discount​

const { applyDiscountCode } = useCart();

const apply = () => {
  applyDiscountCode("SUMMER10");
};

🔄 Reset Cart​

const { resetCart } = useCart();

const reset = () => {
  resetCart();
};

🧬 Use Typed Custom Attributes​

If you configured customAttributes in your CartProviderConfig, you can access them like this:

const { typedCartAttributes } = useCart();

const isB2B = typedCartAttributes?.customIsB2B;

➡️ See Types Reference → for details.

✅ Next: Advanced Usage →

npm version

npm downloads

GitHub stars

GitHub issues

See FAQs

Description

Common usage patterns for the useCart hook, including Add to Cart buttons, mini carts, and more.