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.
Usage
import { useCartItem } from '@vtex/sales-app';
const CartItemDetails = () => { const { item } = useCartItem();
return ( <div> <p>Product: {item.id}</p> <p>Quantity: {item.quantity}</p> <img src={item.imageUrl} alt="Product image" /> </div> );};
Parameters
The useCartItem
hook does not receive any parameters.
Returns
The useCartItem
hook returns an object with the following properties:
item
- type:
CartItem
| undefined
.
itemIndex
- type:
number | undefined
changeItem
- type:
(data: UseCartItemChangeItemData) => Promise<void>
The UseCartItemChangeItemData
type is an object with the following structure:
type UseCartItemChangeItemData = { quantity?: number attachments?: Attachment[]};
changePrice
To use this function, the feature of manual price
must be active. To check if it’s active, use the Get orderForm configuration endpoint. To make it active, use the Update orderForm configuration endpoint, making the allowManualPrice
field true.
- type:
changePrice: (price: number) => Promise<void>
Extension Points
This hook is available in the following extension points:
cart.cart-item.after
For a full list of available extension points, refer to the ExtensionPoints page.