From a3614f5fdb7de39d88846a37b7ea7d816b7765cc Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sun, 25 Jul 2021 01:35:36 +0200
Subject: Show number of items that can be checked out.

---
 client/src/App.vue            | 12 ++++++++++--
 client/src/views/Checkout.vue |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

(limited to 'client')

diff --git a/client/src/App.vue b/client/src/App.vue
index 3a66a9e..906716b 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -10,7 +10,10 @@
             <router-link class="nav-link" active-class="active" to="/">Home</router-link>
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" active-class="active" to="/checkout">Checkout</router-link>
+            <router-link class="nav-link" active-class="active" to="/checkout">
+              Checkout
+              <span class="badge bg-light rounded-pill text-dark" v-text="cartSize"></span>
+            </router-link>
           </li>
           <li class="nav-item">
             <router-link class="nav-link" active-class="active" to="/register">Register</router-link>
@@ -29,7 +32,12 @@
 
 <script>
 export default {
-
+  name: 'Checkout',
+  computed: {
+    cartSize() {
+      return this.$store.getters.getCartSize;
+    }
+  }
 }
 </script>
 
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 891597e..83d0940 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -7,6 +7,7 @@
             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>
+              <i>${{ item.price }}</i>
             </div>
             <span class="badge bg-primary rounded-pill">{{ item.quantity }}</span>
           </li>
-- 
cgit v1.2.3