Skip to content

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

NameTypeDescription
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

NameTypeDescription
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

NameTypeDescription
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);
useCartItem has loaded