finished up product detail functionality, started checkout and cart

views

1 files changed, 62 insertions, 13 deletions

diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 9802d84..430d78b 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -17,18 +17,56 @@
           </div>
 
           <div class="card-content">
-            <div class="content">
-              <p class="title">
-                {{ product.name }}
-              </p>
-              <p class="subtitle">
-                {{ dollars }}
-              </p>
-              <p class="subtitle">{{ stock }}</p>
-            </div>
-
-            <div class="content">
-              {{ product.description }}
+            <div class="columns">
+              <div class="column">
+                <p class="title">
+                  {{ product.name }}
+                </p>
+                <nav class="breadcrumb">
+                  <ul>
+                    <li v-for="category in categories" :key="category">
+                      {{ category }}
+                    </li>
+                  </ul>
+                </nav>
+                <p>
+                  {{ product.description }}
+                </p>
+              </div>
+              <div class="column is-one-third">
+                <p class="subtitle">{{ dollars }}</p>
+                <p class="subtitle">{{ stock }}</p>
+                <div v-if="inCart" class="field has-addons">
+                  <p class="control is-expanded">
+                    <a class="button is-static is-fullwidth">
+                      {{ inCart }} in cart
+                    </a>
+                  </p>
+                  <div class="control">
+                    <a
+                      @click="incrementCartQuantity(-1)"
+                      class="button is-info is-outlined"
+                    >
+                      -
+                    </a>
+                  </div>
+                  <div class="control">
+                    <a
+                      @click="incrementCartQuantity(1)"
+                      class="button is-info is-outlined"
+                    >
+                      +
+                    </a>
+                  </div>
+                </div>
+                <button
+                  v-else
+                  @click="incrementCartQuantity(1)"
+                  class="button is-primary is-fullwidth"
+                >
+                  Add to Cart
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -42,9 +80,12 @@
 export default {
   name: "ProductDetail",
   computed: {
+    inCart() {
+      return this.$store.state.cart[this.product.id];
+    },
     product() {
       return this.$store.getters.products.find(
-        p => p.id == this.$store.getters.productDetailId
+        p => p.id == this.$store.state.productDetailId
       );
     },
     stock() {
@@ -66,11 +107,19 @@ export default {
       return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
         "/"
       );
+    },
+    categories() {
+      let categories = this.product.category.split("/");
+      categories.splice(0, 1, "All");
+      return categories;
     }
   },
   methods: {
     clearDetailId() {
       this.$store.commit("productDetailId", 0);
+    },
+    incrementCartQuantity(by) {
+      this.$store.commit("cartItem", { id: this.product.id, by });
     }
   }
 };