summaryrefslogtreecommitdiff
path: root/iridescence/src/components/ProductDetail.vue
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-11-23 17:29:58 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-11-23 17:29:58 -0500
commit2e7da5ab02ffa8b07fede7f6cd7e5dbbd90fac5f (patch)
treef1d29c4e00174540821d3f8cd9e9b3d943f90f26 /iridescence/src/components/ProductDetail.vue
parent58c7f82c2cbf2f2ff3f5c2dd559e570924a41a4a (diff)
downloadtheglassyladies-2e7da5ab02ffa8b07fede7f6cd7e5dbbd90fac5f.tar.xz
theglassyladies-2e7da5ab02ffa8b07fede7f6cd7e5dbbd90fac5f.zip
finished up product detail functionality, started checkout and cart
views
Diffstat (limited to 'iridescence/src/components/ProductDetail.vue')
-rw-r--r--iridescence/src/components/ProductDetail.vue75
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 });
}
}
};