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<Schemas["Product"]>,
): UseAddToCartReturn
Parameters ​
| Name | Type | Description |
|---|---|---|
| product | Ref<> |
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 ​
| 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 | 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 ​
| Name | Type | Description |
|---|---|---|
| addToCart | Promise<> | Add to cart method |