useCartItem hook

Learn how to use the useCartItem hook to access and display details for an individual item within the cart in Checkout extensions.

This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

The useCartItem hook allows you to access detailed information about an individual cart item. This is particularly useful when you need to retrieve or display specific data related to a single item in the cart.

This hook is only available in some extension points.

Usage


_14import { useCartItem } from '@vtex/checkout';
_14
_14const CartItemDetails = () => {
_14  const cartItem = useCartItem();
_14
_14  return (
_14    <div>
_14      <p>Product: {cartItem.id}</p>
_14      <p>Quantity: {cartItem.quantity}</p>
_14      <p>Price: {cartItem.price}</p>
_14      <img src={cartItem.imageUrl} alt="Product image"  />
_14    </div>
_14  );
_14};

Parameters

The useCartItem hook does not accept any parameters.

Returns

The useCartItem returns a CartItem object for the current cart item context.

Extension Points

This hook is available in the following Checkout extension points:

cart.cart-item.after
punchout.cart-item.after
delivery.cart-item.after
review.cart-item.after
payment.cart-item.after
order-placed.cart-item.after