Update Item Quantities

This guide explains how to update the quantities of items already in a customer's shopping cart.

Using the updateACartItem SDK Method

The updateACartItem method allows you to modify existing cart line items:

import { updateACartItem, getCartId } from "@epcc-sdk/sdks-shopper";

// Update item quantity in cart
const updateItemQuantity = async (itemId, newQuantity) => {
  // If quantity is less than 1, consider removing the item instead
  if (newQuantity < 1) {
    // Handle item removal (see the "Remove Items from Cart" guide)
    return;
  }
  // Get the current cart ID
  const cartId = getCartId();
  if (!cartId) {
    throw new Error("Cart not found");
  }

  // Update the item quantity
  const response = await updateACartItem({
    path: {
      cartID: cartId,
      cartitemID: itemId,
    },
    body: {
      data: {
        id: itemId,
        quantity: newQuantity,
      },
    },
  });

  return response.data;
};

Key Functionality

• Increasing quantities: Add more of an item to the cart
• Decreasing quantities: Reduce the number of an item in the cart
• Zero quantity: Setting quantity to zero typically removes the item

Implementation Examples

Common UI patterns for quantity updates include increment/decrement buttons:

<div className="flex items-center border border-gray-300 rounded">
  <button
    onClick={() => updateItemQuantity(item.id, currentQuantity - 1)}
    disabled={isUpdating || currentQuantity <= 1}
    className="px-2 py-1 text-gray-600 hover:bg-gray-100 disabled:opacity-50"
    aria-label="Decrease quantity"
  >
    <svg
      className="w-4 h-4"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M20 12H4"
      />
    </svg>
  </button>
  <span className="px-3 py-1 border-x border-gray-300 min-w-[36px] text-center">
    {isUpdating ? "..." : currentQuantity}
  </span>
  <button
    onClick={() => updateItemQuantity(item.id, currentQuantity + 1)}
    disabled={isUpdating}
    className="px-2 py-1 text-gray-600 hover:bg-gray-100 disabled:opacity-50"
    aria-label="Increase quantity"
  >
    <svg
      className="w-4 h-4"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M12 4v16m8-8H4"
      />
    </svg>
  </button>
</div>

Response Handling

The response contains the updated cart with new quantity information:

// Example component for handling quantity updates
const [updatingItems, setUpdatingItems] = useState({});
const [error, setError] = useState(null);

const handleQuantityUpdate = async (itemId, newQuantity) => {
  // Set updating state for this specific item
  setUpdatingItems((prev) => ({ ...prev, [itemId]: true }));

  try {
    await updateItemQuantity(itemId, newQuantity);

    // Fetch updated cart data to refresh UI
    await fetchCart();
  } catch (error) {
    setError("Failed to update quantity");
  } finally {
    // Clear updating state for this item
    setUpdatingItems((prev) => ({ ...prev, [itemId]: false }));
  }
};

Error Handling

• Maximum quantity limits: Prevent exceeding allowed quantities
• Minimum quantity requirements: Enforce minimum order amounts
• Inventory restrictions: Check available stock before updating

tip

For a working implementation of quantity updates, see the SPA Cart Example on GitHub.