Appearance
useCartItem
Definition
Composable to manage specific cart item
Basic usage
ts
const {
itemRegularPrice,
itemSpecialPrice,
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 = {
itemRegularPrice: ComputedRef<number | undefined>;
itemSpecialPrice: ComputedRef<number | undefined>;
itemImageThumbnailUrl: ComputedRef<string>;
itemOptions: ComputedRef<PropertyGroupOption[] | PropertyGroupOptionCart[]>;
itemType: ComputedRef<LineItemType | undefined>;
isProduct: ComputedRef<boolean>;
isPromotion: ComputedRef<boolean>;
itemStock: ComputedRef<number | undefined>;
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
*/
getProductItemSeoUrlData(): Promise<ProductResponse | undefined>;
};
Properties
| Name | Type | Description |
|---|---|---|
| itemRegularPrice | ComputedRef<number | undefined> | |
| itemSpecialPrice | ComputedRef<number | undefined> | |
| itemImageThumbnailUrl | ComputedRef<string> | |
| itemOptions | ComputedRef<Array<PropertyGroupOption> | Array<PropertyGroupOptionCart>> | |
| itemType | ComputedRef<LineItemType | undefined> | |
| isProduct | ComputedRef<boolean> | |
| isPromotion | ComputedRef<boolean> | |
| itemStock | ComputedRef<number | undefined> | |
| itemQuantity | ComputedRef<number | undefined> |
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);