Boilerplate checkout cart.

2 files changed, 33 insertions, 3 deletions

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
+      });
     }
   }
 }