From 2e4678c40a7c92a981bf67845a2888893ea9b758 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 25 Jul 2021 00:55:53 +0200
Subject: Boilerplate checkout cart.

---
 client/src/views/Checkout.vue | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

(limited to 'client/src/views/Checkout.vue')

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>
-- 
cgit v1.2.3