basic cart subtotaling, sidebar with total and checkout controls, better

navbar cart buttons

1 files changed, 19 insertions, 10 deletions

diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
index f1c369c..7d64a65 100644
--- a/iridescence/src/views/Cart.vue
+++ b/iridescence/src/views/Cart.vue
@@ -1,19 +1,26 @@
 <template>
   <div id="cart">
     <div class="container">
-      <div v-if="items" class="section">
-        <CartItem
-          v-for="item in items"
-          :key="item[0]"
-          v-bind:id="item[0] * 1"
-          v-bind:in-cart="item[1]"
-        ></CartItem>
+      <div v-if="items.length" class="section">
+        <div class="columns">
+          <div class="column">
+            <CartItem
+              v-for="item in items"
+              :key="item[0]"
+              v-bind:id="item[0] * 1"
+              v-bind:in-cart="item[1]"
+            ></CartItem>
+          </div>
+          <div class="column is-one-third">
+            <Totals></Totals>
+          </div>
+        </div>
       </div>
       <div v-else class="section">
         <div class="content">
-          <p>
+          <p class="has-text-centered">
             There's nothing in your cart.
-            <a href="/">Go home to start shopping!</a>
+            <a> <router-link to="/">Go home to start shopping!</router-link></a>
           </p>
         </div>
       </div>
@@ -23,6 +30,7 @@
 
 <script>
 import CartItem from "@/components/cart/CartItem.vue";
+import Totals from "@/components/cart/Totals.vue";
 
 export default {
   name: "Cart",
@@ -32,7 +40,8 @@ export default {
     }
   },
   components: {
-    CartItem
+    CartItem,
+    Totals
   }
 };
 </script>