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.