Merge branch 'feature/add-checkout-page'

sentry-demos · Nov 13, 2024 · 75af4e6 · 75af4e6
2 parents 4082b48 + 0df3e28
commit 75af4e6
Show file tree

Hide file tree

Showing 5 changed files with 369 additions and 37 deletions.
diff --git a/vue/src/App.vue b/vue/src/App.vue
@@ -13,6 +13,7 @@ import { RouterLink, RouterView } from "vue-router";
       <nav class="nav">
         <RouterLink to="/about">About</RouterLink>
         <RouterLink to="/products">Products</RouterLink>
+        <RouterLink to="/checkout">Cart</RouterLink>
         <RouterLink to="/subscribe">Subscribe</RouterLink>
       </nav>
     </header>

diff --git a/vue/src/router/index.js b/vue/src/router/index.js
@@ -6,6 +6,7 @@ import SubscribeView from '../views/SubscribeView.vue'
 import ErrorView from '../views/ErrorView.vue'
 import HomePage from "../components/HomePage.vue";
 import ProductsView from "../views/ProductsView.vue";
+import CheckoutView from "../views/CheckoutView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,6 +45,11 @@ const router = createRouter({
       name: "trigger",
       component: ManualView,
     },
+    {
+      path: "/checkout",
+      name: "checkout",
+      component: CheckoutView
+    }
   ],
 });
 

diff --git a/vue/src/stores/cart.js b/vue/src/stores/cart.js
@@ -10,20 +10,47 @@ export const useCounterStore = defineStore({
     updatePrice(val = 1) {
       this.counter += val;
     },
+    getQuantities(){
+      let quantities = {}
+      for (let item in this.cart) {
+        quantities[this.cart[item].id] = this.cart[item].count
+      }
+      return quantities;
+    },
+    getTotalPrice(){
+      let total = 0;
+      for (let item in this.cart) {
+        total += this.cart[item].totalPrice
+      }
+      return total;
+    },
     updateCart(product) {
-      this.cart.push(product);
-      console.log("cart", this.cart);
-      // if (this.cart.length() > 0) {
-      //   this.cart.forEach((eachCartItem) => {
-      //     if (eachCartItem.id === product.id) {
-      //       return;
-      //     } else {
-      //       this.cart.push(product);
-      //     }
-      //   });
-      // } else {
-      //   this.cart.push(product);
-      // }
+      let index = this.cart.findIndex( item => item.id === product.id);
+      if (index === -1) {
+        product.count = 1
+        product.totalPrice = product.price;
+        this.cart.push(product);
+      } else {
+        this.cart[index].totalPrice += product.price;
+        this.cart[index].count += 1;
+      }
+    },
+    getCartItems() {
+      return this.cart
+    },
+    decreaseQuantity(item){
+      const index = this.cart.findIndex(cartItem => cartItem.id === item.id);
+      if (index !== -1) {
+        this.cart[index].count--;
+        this.cart[index].totalPrice -= this.cart[index].price;
+      }
     },
+    increaseQuantity(item){
+      const index = this.cart.findIndex(cartItem => cartItem.id === item.id);
+      if (index !== -1) {
+        this.cart[index].count++;
+        this.cart[index].totalPrice += this.cart[index].price;
+      }
+    }
   },
 });