feat(theme): change product cart quantity

packages/composables/src/hooks/useCart/index.ts

@@ -1,5 +1,5 @@
 import { ref, Ref, computed } from "@vue/composition-api";
-import { getCart, addProductToCart, removeCartItem } from "@shopware-pwa/shopware-6-client";
+import { getCart, addProductToCart, removeCartItem, changeCartItemQuantity } from "@shopware-pwa/shopware-6-client";
 import { getStore } from "../..";
 
 export const useCart = (): any => {
@@ -29,6 +29,11 @@ export const useCart = (): any => {
     const result = await removeCartItem(id);
     vuexStore.commit("SET_CART", result);
   }
+
+  async function changeProductQuantity({ id, quantity }: any) {
+    const result = await changeCartItemQuantity(id, quantity);
+    vuexStore.commit("SET_CART", result);
+  }
 
   const cart = computed(() => {
     return vuexStore.getters.getCart;
@@ -58,6 +63,7 @@ export const useCart = (): any => {
     cartItems,
     addProduct,
     removeProduct,
+    changeProductQuantity,
     loading,
     refreshCart,
     error

packages/default-theme/components/SwCartProduct.vue

@@ -4,7 +4,7 @@
     :title="product.label"
     :regular-price="product.price.unitPrice | price"
     :stock="product.deliveryInformation.stock"
-    v-model="product.quantity"
+    v-model="quantity"
     @click:remove="removeProduct(product)"
     class="collected-product"
   >
@@ -39,6 +39,7 @@ import {
   SfCollectedProduct
 } from "@storefront-ui/vue";
 import { useCart } from "@shopware-pwa/composables";
+import {ref, watch} from "@vue/composition-api"
 
 export default {
   components: {
@@ -54,10 +55,21 @@ export default {
       defult: () => ({})
     }
   },
-  setup () {
-    const { removeProduct } = useCart()
+  setup (props) {
+    const { removeProduct, changeProductQuantity } = useCart()
+
+    const quantity = ref(props.product.quantity)
+
+    watch(quantity, async qty => { // in future we may want to have debounce here
+      if (qty == props.product.quantity) return
+      await changeProductQuantity({id: props.product.id, quantity: qty})
+    })
+    watch(() => props.product.quantity, qty => {
+      quantity.value = qty
+    })
     return {
-      removeProduct
+      removeProduct,
+      quantity
     }
   },
   filters: {