Remove Items from Cart

This guide explains how to remove product items from a customer's shopping cart.

You can remove standard cart items using the deleteACartItem method, or remove promotion items using the promotion code and the deleteAPromotionViaPromotionCode method.

Using the deleteACartItem SDK Method

The deleteACartItem method provides a simple way to remove items from a cart:

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

// Remove an item from the cart
const removeCartItem = async (itemId) => {
  // Get the current cart ID
  const cartId = getCartId();
  if (!cartId) {
    throw new Error("Cart not found");
  }

  // Delete the cart item
  await deleteACartItem({
    path: {
      cartID: cartId,
      cartitemID: itemId,
    },
  });

  return { success: true };
};

Implementation Considerations

• Single vs. bulk removal: Decide whether to allow removing individual items or multiple at once
• Confirmation dialogs: Consider asking for confirmation before removing items
• Removal feedback: Provide visual feedback when items are successfully removed

Response Handling

The deleteACartItem method returns a minimal response on success:

// Example handling of item removal in a React component
const [isRemoving, setIsRemoving] = useState(false);
const [successMessage, setSuccessMessage] = useState("");
const [errorMessage, setErrorMessage] = useState("");

const handleRemoveItem = async (itemId) => {
  setIsRemoving(true);

  try {
    await removeCartItem(itemId);

    // Show success message
    setSuccessMessage("Item removed from cart");

    // Fetch the updated cart to reflect changes
    await fetchCart();
  } catch (error) {
    setErrorMessage("Failed to remove item");
  } finally {
    setIsRemoving(false);
  }
};

Common UI Patterns

Standard approaches for presenting removal options:

// Example remove button for cart items
<button
  onClick={() => handleRemoveItem(item.id)}
  className="text-red-500 hover:text-red-700"
  disabled={isRemoving}
>
  {isRemoving ? "Removing..." : "Remove"}
</button>

Other common patterns include:

• X icon in mini-cart for quick removal
• Remove button in full cart page
• Clear cart functionality for removing all items at once

Use Cases

• Customer-initiated removal: When a customer decides they no longer want an item
• System-initiated removal: When an item becomes unavailable or out of stock
• Quantity-based removal: Setting an item's quantity to zero often removes it automatically

tip

Check out the SPA Cart Example on GitHub for a complete implementation of cart item removal.