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

navbar cart buttons

5 files changed, 97 insertions, 29 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>
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 48cae11..e2d970d 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -24,6 +24,13 @@ export default new Vuex.Store({
             .includes(state.searchTerm.toLowerCase());
         })
         .sort(state.compare);
+    },
+    cartTotal(state) {
+      let cents = state.products
+        .filter(p => state.cart[p.id])
+        .map(p => p.cents * state.cart[p.id])
+        .reduce((acc, cur) => acc + cur, 0);
+      return "$ " + (cents / 100).toFixed(2);
     }
   },
   mutations: {
@@ -34,22 +41,38 @@ export default new Vuex.Store({
       state.productDetailId = id;
     },
     cartItem(state, { id, by }) {
+      let newCount = 1;
       if (state.cart[id]) {
-        let newCount = (state.cart[id] += by);
-        if (newCount <= 0) {
-          // remove from cart entirely
-          delete state.cart[id];
-          return;
-        }
-        state.cart = {
-          ...state.cart,
-          [id]: newCount
-        };
+        newCount = state.cart[id] += by;
+        //if (newCount <= 0) {
+        //  // remove from cart entirely
+        //  delete state.cart[id];
+        //  return;
+        //}
+        //state.cart = {
+        //  ...state.cart,
+        //  [id]: newCount
+      }
+
+      let cart = {
+        ...state.cart
+      };
+
+      if (newCount) {
+        cart[id] = newCount;
       } else {
-        state.cart = {
-          ...state.cart,
-          [id]: 1
+        // remove entirely
+        delete cart[id];
+      }
+      state.cart = cart;
+    },
+    removeItemFromCart(state, id) {
+      if (state.cart[id]) {
+        let cart = {
+          ...state.cart
         };
+        delete cart[id];
+        state.cart = cart;
       }
     },
     compare(state, compare) {
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>