From 5751052a0df80260ea9e7c66ee222e95de4e35e3 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Tue, 24 Nov 2020 19:39:04 -0500
Subject: you can now see cart items on cart page
---
iridescence/src/components/cart/CartItem.vue | 76 ++++++++++++++++++----------
iridescence/src/views/Cart.vue | 24 +++++++--
2 files changed, 69 insertions(+), 31 deletions(-)
(limited to 'iridescence/src')
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
}
--
cgit v1.2.3