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

navbar cart buttons

3 files changed, 42 insertions, 6 deletions

diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
index 19ad706..cde78d9 100644
--- a/iridescence/src/components/CartCheckout.vue
+++ b/iridescence/src/components/CartCheckout.vue
@@ -1,10 +1,13 @@
 <template>
   <div id="cartCheckout">
-    <div class="buttons">
-      <router-link to="/cart" class="button">Cart ({{ inCart }})</router-link>
-      <router-link to="/checkout" class="button is-primary">
-        Checkout
-      </router-link>
+    <div class="buttons has-addons">
+      <router-link to="/cart" class="button is-primary is-rounded"
+        >🛒</router-link
+      >
+      <button class="button is-static">x{{ inCart }}</button>
+      <button class="button is-static is-rounded">
+        {{ cartTotal }}
+      </button>
     </div>
   </div>
 </template>
@@ -18,6 +21,9 @@ export default {
         (acc, cur) => acc + cur,
         0
       );
+    },
+    cartTotal() {
+      return this.$store.getters.cartTotal;
     }
   }
 };
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index 2c7655a..e31a109 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -19,6 +19,7 @@
           </div>
         </div>
         <div class="level-right">
+          <div class="level-item">Subtotal: {{ dollars }}</div>
           <div class="level-item">
             <div class="field has-addons">
               <p class="control is-expanded">
@@ -44,8 +45,9 @@
               </div>
             </div>
           </div>
+
           <div class="level-item">
-            <button class="button is-outlined is-danger">
+            <button class="button is-outlined is-danger" @click="removeAll">
               Remove
             </button>
           </div>
@@ -78,6 +80,9 @@ export default {
   methods: {
     incrementCartQuantity(by) {
       this.$store.commit("cartItem", { id: this.id, by });
+    },
+    removeAll() {
+      this.$store.commit("removeItemFromCart", this.id);
     }
   }
 };
diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue
new file mode 100644
index 0000000..7b95462
--- /dev/null
+++ b/iridescence/src/components/cart/Totals.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1 class="subtitle has-text-centered">
+      Summary
+    </h1>
+    <h1 class="title has-text-centered">
+      {{ cartTotal }}
+    </h1>
+    <router-link to="/checkout" class="button is-primary">
+      Checkout
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Totals",
+  computed: {
+    cartTotal() {
+      return this.$store.getters.cartTotal;
+    }
+  },
+  methods: {}
+};
+</script>