Skip to content

useCartItem ​

Definition ​

Composable to manage specific cart item

Basic usage ​

ts
const { 
 itemRegularPrice,
 itemSpecialPrice,
 itemTotalPrice,
 itemImageThumbnailUrl,
 itemOptions,
 itemType,
 isProduct,
 isPromotion,
 isRemovable,
 itemStock,
 itemQuantity,
 changeItemQuantity,
 removeItem,
 getProductItemSeoUrlData 
} = useCartItem(cartItem);

Signature ​

ts
export function useCartItem(
  cartItem: Ref<Schemas["LineItem"]>,
): UseCartItemReturn 

Parameters ​

NameTypeDescription
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>;
  /**
   * Determines if the current item can be removed from cart
   */
  isRemovable: 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 ​

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<>
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
isRemovable
ComputedRef<boolean>
Determines if the current item can be removed from cart
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<>
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);
useCartItem has loaded