Skip to content

useAddToCart ​

Usage ​

Provided product object in the argument should be in a Ref<Product> type.

vue
<script setup lang="ts">
const { isInCart, quantity, addToCart, getStock } = useAddToCart({ product });
</script>

Definition ​

Composable to manage adding product to cart

Basic usage ​

ts
const { 
 quantity,
 getStock,
 getAvailableStock,
 isInCart,
 count,
 addToCart 
} = useAddToCart(product);

Signature ​

ts
export function useAddToCart(
  product: Ref<Schemas["Product"] | undefined>,
): UseAddToCartReturn 

Parameters ​

NameTypeDescription
product
Ref< | undefined>

Return type ​

See UseAddToCartReturn
ts
export type UseAddToCartReturn = {
  /**
   * Add to cart method
   * @type {function}
   */
  addToCart(): Promise<Schemas["Cart"]>;
  /**
   * If you want to add more that 1 product set quantity before invoking `addToCart`
   */
  quantity: Ref<number>;
  /**
   * Returns product count in stock
   */
  getStock: ComputedRef<number | undefined>;
  /**
   * Returns product count in available stock
   */
  getAvailableStock: ComputedRef<number | undefined>;
  /**
   * Flag if product is already in cart
   */
  isInCart: ComputedRef<boolean>;
  /**
   * count of the product quantity already in the cart
   */
  count: ComputedRef<number>;
};

Properties ​

NameTypeDescription
quantity
Ref<number>
If you want to add more that 1 product set quantity before invoking `addToCart`
getStock
ComputedRef<number | undefined>
Returns product count in stock
getAvailableStock
ComputedRef<number | undefined>
Returns product count in available stock
isInCart
ComputedRef<boolean>
Flag if product is already in cart
count
ComputedRef<number>
count of the product quantity already in the cart

Methods ​

NameTypeDescription
addToCart
Promise<>
Add to cart method

Live example ​

useAddToCart has loaded