you can now see cart items on cart page

2 files changed, 69 insertions, 31 deletions

diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index 8c2de16..c39ab13 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -1,39 +1,59 @@
 <template>
-  <section class="section" id="cartItem">
-    <div class="media">
-      <figure class="media-left image is-square">
-        <img :src="thumbnail" :title="name" />
-      </figure>
-      <div class="media-content">
-        <div class="field">
-          <p class="control">
-            <textarea
-              class="textarea"
-              placeholder="Add a comment..."
-            ></textarea>
-          </p>
-        </div>
-        <nav class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <a class="button is-info">Submit</a>
+  <article class="media" id="cartItem">
+    <figure class="media-left">
+      <p class="image is-64x64">
+        <img :src="thumbnail" :title="product.name" />
+      </p>
+    </figure>
+    <div class="media-content">
+      <nav class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <div class="content">
+              <strong>
+                <p>
+                  {{ product.name }}
+                </p>
+              </strong>
             </div>
           </div>
-          <div class="level-right">
-            <div class="level-item">
-              <label class="checkbox">
-                <input type="checkbox" /> Press enter to submit
-              </label>
-            </div>
+          <div class="level-item">
+            <button class="button is-static">
+              {{ inCart }}
+            </button>
           </div>
-        </nav>
-      </div>
+        </div>
+        <div class="level-right">
+          <div class="level-item">
+            <button class="button is-outlined is-danger">
+              Remove
+            </button>
+          </div>
+        </div>
+      </nav>
     </div>
-  </section>
+  </article>
 </template>
 
 <script>
 export default {
-  name: "CartItem"
+  name: "CartItem",
+  props: {
+    id: Number,
+    inCart: Number
+  },
+  computed: {
+    product() {
+      return this.$store.state.products.find(p => p.id == this.id);
+    },
+    dollars() {
+      return "$ " + ((this.product.cents * this.inCart) / 100).toFixed(2);
+    },
+    thumbnail() {
+      return (
+        process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail
+      );
+    }
+  }
 };
 </script>
diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
index 7060b60..f1c369c 100644
--- a/iridescence/src/views/Cart.vue
+++ b/iridescence/src/views/Cart.vue
@@ -1,9 +1,22 @@
 <template>
   <div id="cart">
     <div class="container">
-      <section class="section">
-        <CartItem></CartItem>
-      </section>
+      <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>
+      <div v-else class="section">
+        <div class="content">
+          <p>
+            There's nothing in your cart.
+            <a href="/">Go home to start shopping!</a>
+          </p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -13,6 +26,11 @@ import CartItem from "@/components/cart/CartItem.vue";
 
 export default {
   name: "Cart",
+  computed: {
+    items() {
+      return Object.entries(this.$store.state.cart);
+    }
+  },
   components: {
     CartItem
   }