useCartItem

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.

Note

This hook is not available for all extension points. Check the available list here.

Usage

import { useCartItem } from '@vtex/checkout';

const CartItemDetails = () => {
  const cartItem = useCartItem();

  return (
    <div>
      <p>Product: {cartItem.id}</p>
      <p>Quantity: {cartItem.quantity}</p>
      <p>Price: {cartItem.price}</p>
      <img src={cartItem.imageUrl} alt="Product image" />
    </div>
  );
};

Parameters

The useCartItem hook does not receive any parameters.

Returns

The useCartItem returns an object of type CartItem.

Extension Points

This hook is available in the following 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

For a full list of available extension points, refer to the ExtensionPoints page.