Skip to content

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

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.