Boilerplate checkout cart.

3 files changed, 60 insertions, 4 deletions

diff --git a/client/src/store/index.js b/client/src/store/index.js
index d2fe9b7..2454977 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -3,16 +3,42 @@ import axios from 'axios';
 
 export default createStore({
   state: {
-    products: []
+    products: [],
+    cart: []
   },
   getters: {
     getProducts(state) {
       return state.products;
+    },
+    getCart(state) {
+      return state.cart;
+    },
+    getCartSize(state) {
+      let sum = 0;
+      state.cart.forEach(x => sum += x.quantity);
+      return sum;
+    },
+    getCartPrice(state) {
+      let sum = 0;
+      state.cart.forEach(x => sum += x.price * x.quantity);
+      return sum;
     }
   },
   mutations: {
     setProducts(state, products) {
       state.products = products;
+    },
+    addToCart(state, product) {
+      let foundProduct = state.cart.find(x => x.id == product._id);
+      if (foundProduct)
+        foundProduct.quantity++;
+      else
+        state.cart.push({
+          id: product._id,
+          name: product.name,
+          price: product.price,
+          quantity: 1
+        });
     }
   },
   actions: {
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 42523ca..891597e 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -1,9 +1,35 @@
 <template>
-  Checkout page
+  <div class="mt-5">
+    <div class="row d-flex justify-content-center">
+      <div class="col-md-6">
+        <ul class="list-group">
+          <li v-for="item in cart" :key="item.id"
+            class="list-group-item d-flex justify-content-between align-items-start">
+            <div class="ms-2 me-auto">
+              <div class="fw-bold">{{ item.name }}</div>
+            </div>
+            <span class="badge bg-primary rounded-pill">{{ item.quantity }}</span>
+          </li>
+        </ul>
+        <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-
+  name: 'Checkout',
+  computed: {
+    cart() {
+      return this.$store.getters.getCart;
+    },
+    cartSize() {
+      return this.$store.getters.getCartSize;
+    },
+    cartPrice() {
+      return this.$store.getters.getCartPrice;
+    }
+  }
 }
 </script>
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 3c35b35..11643c1 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -46,7 +46,11 @@ export default {
   },
   methods: {
     buy() {
-
+      this.$store.commit('addToCart', {
+        _id: this.$route.params.id,
+        name: this.productName,
+        price: this.productPrice
+      });
     }
   }
 }