docs: useAddToCart composable (SWF-194)

shopware · Dec 22, 2022 · 4fc1cd8 · 4fc1cd8
1 parent 71b7cf9
commit 4fc1cd8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/.changeset/rare-bags-remain.md b/.changeset/rare-bags-remain.md
@@ -0,0 +1,6 @@
+---
+"docs": patch
+"@shopware-pwa/composables-next": patch
+---
+
+Explains an usage of useAddToCart composable
diff --git a/apps/docs/src/packages/composables/useAddToCart.md b/apps/docs/src/packages/composables/useAddToCart.md
@@ -2,16 +2,26 @@
 category: CMS
 ---
 
+<script setup>
+import StackBlitzLiveExample from '../../components/StackBlitzLiveExample.vue'
+</script>
+
 # useAddToCart
 
 Add product to cart.
 
+[[toc]]
+
 ## Usage
 
-```ts
-const { isInCart, quantity, addToCart } = useAddToCart({ product });
-if (!isInCart.value) {
-  quantity.value = 5;
-  await addToCart();
-}
+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>
 ```
+
+## Live example
+
+<StackBlitzLiveExample projectId="mkucmus/frontends-examples" example="UseAddToCart" />
diff --git a/packages/composables/src/useAddToCart.ts b/packages/composables/src/useAddToCart.ts
@@ -28,7 +28,7 @@ export type UseAddToCartReturn = {
 export function useAddToCart(product: Ref<Product>): UseAddToCartReturn {
   const _product = computed(() => unref(product));
 
-  const { addProduct, cartItems } = useCart();
+  const { addProduct, cartItems, refreshCart } = useCart();
   const quantity: Ref<number> = ref(1);
 
   async function addToCart(): Promise<Cart> {
@@ -38,6 +38,7 @@ export function useAddToCart(product: Ref<Product>): UseAddToCartReturn {
       quantity: quantity.value,
     });
     quantity.value = 1;
+    refreshCart();
     return addToCartResponse;
   }