Appearance
useCartItem
Definition
Composable to manage specific cart item
Basic usage
ts
const {
itemRegularPrice,
itemSpecialPrice,
itemTotalPrice,
itemImageThumbnailUrl,
itemOptions,
itemType,
isProduct,
isPromotion,
itemStock,
itemQuantity,
changeItemQuantity,
removeItem,
getProductItemSeoUrlData
} = useCartItem(cartItem);
Signature
ts
export function useCartItem(cartItem: Ref<LineItem>): UseCartItemReturn
Parameters
| Name | Type | Description |
|---|---|---|
| cartItem | Ref<LineItem> |
Return type
See UseCartItemReturn
ts
export type UseCartItemReturn = {
/**
* Calculated price {number} for the current item
*/
itemRegularPrice: ComputedRef<number | undefined>;
/**
* Calculated price {number} for the current item if list price is set
*/
itemSpecialPrice: ComputedRef<number | undefined>;
/**
* Total price for the current item of given quantity in the cart
*/
itemTotalPrice: ComputedRef<number | undefined>;
/**
* Thumbnail url for the current item's entity
*/
itemImageThumbnailUrl: ComputedRef<string>;
/**
* Options (of variation) for the current item
*/
itemOptions: ComputedRef<PropertyGroupOptionCart[]>;
/**
* Type of the current item: "product" or "promotion"
*/
itemType: ComputedRef<LineItemType | undefined>;
/**
* Determines if the current item is a product
*/
isProduct: ComputedRef<boolean>;
/**
* Determines if the current item is a promotion
*/
isPromotion: ComputedRef<boolean>;
/**
* Stock information for the current item
*/
itemStock: ComputedRef<number | undefined>;
/**
* Quantity of the current item in the cart
*/
itemQuantity: ComputedRef<number | undefined>;
/**
* Changes the current item quantity in the cart
*/
changeItemQuantity(quantity: number): Promise<void>;
/**
* Removes the current item from the cart
*/
removeItem(): Promise<void>;
/**
* Get SEO data for the current item
*
* @deprecated
*/
getProductItemSeoUrlData(): Promise<ProductResponse | undefined>;
};
Properties
| Name | Type | Description |
|---|---|---|
| itemRegularPrice | ComputedRef<number | undefined> | Calculated price {number} for the current item |
| itemSpecialPrice | ComputedRef<number | undefined> | Calculated price {number} for the current item if list price is set |
| itemTotalPrice | ComputedRef<number | undefined> | Total price for the current item of given quantity in the cart |
| itemImageThumbnailUrl | ComputedRef<string> | Thumbnail url for the current item's entity |
| itemOptions | ComputedRef<Array<PropertyGroupOptionCart>> | Options (of variation) for the current item |
| itemType | ComputedRef<LineItemType | undefined> | Type of the current item: "product" or "promotion" |
| isProduct | ComputedRef<boolean> | Determines if the current item is a product |
| isPromotion | ComputedRef<boolean> | Determines if the current item is a promotion |
| itemStock | ComputedRef<number | undefined> | Stock information for the current item |
| itemQuantity | ComputedRef<number | undefined> | Quantity of the current item in the cart |
Methods
| Name | Type | Description |
|---|---|---|
| changeItemQuantity | Promise<void> | Changes the current item quantity in the cart |
| removeItem | Promise<void> | Removes the current item from the cart |
| getProductItemSeoUrlData | Promise<ProductResponse | undefined> | Get SEO data for the current item |
Usage
Display and manage single cart item in your cart.
ts
const { cartItem } = toRefs(props);
const {
itemOptions,
removeItem,
itemRegularPrice,
itemQuantity,
isPromotion,
itemStock,
changeItemQuantity,
} = useCartItem(cartItem);