Appearance
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<Product>): UseAddToCartReturn
Parameters
| Name | Type | Description |
|---|---|---|
| product | Ref<Product> |
Return type
See UseAddToCartReturn
ts
export type UseAddToCartReturn = {
/**
* Add to cart method
* @type {function}
*/
addToCart(): Promise<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 | null>;
/**
* Flag if product is already in cart
*/
isInCart: ComputedRef<boolean>;
/**
* count of the product quantity already in the cart
*/
count: ComputedRef<number>;
};
Properties
| Name | Type | Description |
|---|---|---|
| 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 | null> | 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
| Name | Type | Description |
|---|---|---|
| addToCart | Promise<Cart> | Add to cart method |