Cart quantity change

Author: w3bdesign

components/Cart/CartContents.vue

@@ -15,6 +15,7 @@
         :key="product.key"
         :product="product"
         @remove="handleRemoveProduct"
+        @update-quantity="handleUpdateQuantity"
       />
     </section>
     <CommonButton v-if="showCheckoutButton" link-to="/checkout" center-button>
@@ -73,6 +74,20 @@ onMounted(async () => {
     isLoading.value = false;
   }
 });
+
+/**
+ * Handles updating the quantity of a cart item.
+ *
+ * @param {{ key: string, quantity: number }} payload
+ */
+const handleUpdateQuantity = async ({ key, quantity }) => {
+  try {
+    await cart.updateCartItemQuantity(key, quantity);
+  } catch (error) {
+    console.error("Error updating cart item quantity:", error);
+    // Optionally, add user notification here
+  }
+};
 </script>
 
 <style scoped>

components/Cart/CartItem.vue

@@ -20,7 +20,12 @@
     <div class="item">
       <span class="block mt-2 font-extrabold">Quantity: <br /></span>
       <span class="item-content">
-        {{ product.quantity }}
+        <QuantityInput
+          :model-value="localQuantity"
+          :min="1"
+          :loading="isUpdating"
+          @update:modelValue="onQuantityChange"
+        />
       </span>
     </div>
     <div class="item">
@@ -46,10 +51,20 @@
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
 
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { formatPrice } from "@/utils/functions";
+import QuantityInput from "@/components/common/QuantityInput.vue";
 
 const isRemoving = ref(false);
+const isUpdating = ref(false);
+const localQuantity = ref(props.product.quantity);
+
+watch(
+  () => props.product.quantity,
+  (newVal) => {
+    localQuantity.value = newVal;
+  }
+);
 
 const props = defineProps({
   product: {
@@ -58,7 +73,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["remove"]);
+const emit = defineEmits(["remove", "update-quantity"]);
 
 /**
  * Emits a "remove" event with the product's key as the payload.
@@ -67,6 +82,16 @@ const emitRemove = () => {
   isRemoving.value = true;
   emit("remove", props.product.key);
 };
+
+const onQuantityChange = (newQuantity) => {
+  if (newQuantity === props.product.quantity || isUpdating.value) return;
+  isUpdating.value = true;
+  emit("update-quantity", { key: props.product.key, quantity: newQuantity });
+  // UI disables controls while updating; parent resets isUpdating via prop or reactivity
+  setTimeout(() => {
+    isUpdating.value = false;
+  }, 1000);
+};
 </script>
 
 <style scoped>

components/common/QuantityInput.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex items-center space-x-2">
+    <button
+      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="loading || value <= min"
+      @click="updateValue(value - 1)"
+      aria-label="Decrease quantity"
+    >
+      -
+    </button>
+    <input
+      type="number"
+      :value="value"
+      :min="min"
+      :max="max"
+      class="w-12 text-center border rounded"
+      :disabled="loading"
+      @input="onInput"
+    />
+    <button
+      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="loading || (max !== null && value >= max)"
+      @click="updateValue(value + 1)"
+      aria-label="Increase quantity"
+    >
+      +
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const value = computed(() => props.modelValue);
+
+function updateValue(newValue) {
+  if (props.loading) return;
+  if (props.max !== null && newValue > props.max) return;
+  if (newValue < props.min) return;
+  emit("update:modelValue", newValue);
+}
+
+function onInput(e) {
+  const newValue = Number(e.target.value);
+  updateValue(newValue);
+}
+</script>