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<Schemas["LineItem"]>,
): UseCartItemReturn
Parameters ​
| Name | Type | Description |
|---|---|---|
| cartItem | Ref<> |
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<Schemas["LineItem"]["payload"]["options"]>;
/**
* Type of the current item: "product" or "promotion"
*/
itemType: ComputedRef<Schemas["LineItem"]["type"] | 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<Schemas["Cart"]>;
/**
* Removes the current item from the cart
*/
removeItem(): Promise<void>;
/**
* Get SEO data for the current item
*
* @deprecated
*/
getProductItemSeoUrlData(): Promise<
Schemas["ProductDetailResponse"]["product"] | 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<> | Options (of variation) for the current item |
| itemType | ComputedRef< | 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<> | Changes the current item quantity in the cart |
| removeItem | Promise<void> | Removes the current item from the cart |
| getProductItemSeoUrlData | Promise< | 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);