Merge pull request #127 from yennanliu/ShoppingCart-dev-002-fix-Cart-…

…quantity ShoppingCart-dev-002-fix-Cart-quantity 兒fix updateItem make cart update work, fix param fetch
yennanliu · Dec 7, 2023 · d84d2b3 · d84d2b3
2 parents d00ee52 + e56085a
commit d84d2b3
Showing 1 changed file with 28 additions and 20 deletions.
diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
@@ -35,14 +35,17 @@
           <p id="item-price" class="mb-0 font-weight-bold">
             $ {{ cartItem.product.price }} per unit
           </p>
+
           <p id="item-quantity" class="mb-0">
             Quantity :
             <input
               size="1"
               class="p-0 h-25 border-bottom border-top-0 border-left-0 border-right-0"
+              type="number"
               v-model="cartItem.quantity"
             />
           </p>
+
           <p id="item-total-price" class="mb-0">
             Total Price:
             <span class="font-weight-bold">
@@ -53,9 +56,9 @@
             >Remove From Cart</a
           >
           <!-- TODO : add UpdateCart button -->
-          <!-- <br /><a href="#" class="text-right" @click="updateItem(cartItem.id)"
-          >Update Cart</a
-        > -->
+          <br /><a href="#" class="text-right" @click="updateItem(cartItem.id, cartItem.product.id, cartItem.quantity)"
+            >Update Cart</a
+          >
         </div>
       </div>
 
@@ -142,23 +145,28 @@ export default {
         params: { id: productId },
       });
     },
-    updateItem(itemId, quantity) {
-      let i;
-      console.log(">>> (updateItem) this.cartItem = " + JSON.stringify(this.cartItem))
-      for (i = 0; i < this.len; i++) {
-        if (this.cartItem[i].id === itemId) {
-          break;
-        }
-      }
-      this.cartItem[i].pQuantity = quantity;
-      let userId = this.cartItem[i].userId;
-      let productId = this.cartItem[i].pId;
-      axios.put(`${this.baseURL}cart/update/${itemId}/?token=${this.token}`, {
-        id: itemId,
-        userId,
-        productId,
-        quantity,
-      });
+
+    updateItem(itemId, productId, quantity) {
+      console.log(">>> (updateItem) itemId = " + itemId);
+      console.log(">>> (updateItem) productId = " + productId);
+
+      axios
+        .put(`${this.baseURL}cart/update/${itemId}/?token=${this.token}`, {
+          id: itemId,
+          productId: productId, // Replace with the actual product id
+          quantity,
+        })
+        .then(
+          (response) => {
+            if (response.status === 200) {
+              console.log("Item quantity updated successfully");
+              // You may want to update the total cost or perform other actions as needed
+            }
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
     },
   },
   mounted() {