summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/components/ProductCard.vue24
-rw-r--r--iridescence/src/components/ProductDetail.vue49
-rw-r--r--iridescence/src/store/index.js9
-rw-r--r--iridescence/src/views/Home.vue3
4 files changed, 47 insertions, 38 deletions
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 67fbfbd..f796f92 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -3,7 +3,7 @@
<div class="card">
<div class="card-image">
<figure class="image is-square">
- <a href="#">
+ <a @click="setDetailId">
<img :src="thumbnail" :alt="name" title="Click to expand." />
</a>
</figure>
@@ -11,7 +11,7 @@
<div class="card-content">
<div class="content">
<p class="title is-4">
- <a href="#">
+ <a @click="setDetailId">
{{ name }}
</a>
</p>
@@ -26,27 +26,12 @@
</div>
</div>
</div>
- <ProductDetail
- v-if="id == 6"
- v-bind="{
- id: id,
- name: name,
- quantity: quantity,
- cents: cents,
- photo_base: photo_base,
- photo_fullsize: photo_fullsize,
- description: description
- }"
- ></ProductDetail>
</div>
</template>
<script>
-import ProductDetail from "@/components/ProductDetail.vue";
-
export default {
name: "ProductCard",
- components: { ProductDetail },
props: {
id: Number,
name: String,
@@ -79,6 +64,11 @@ export default {
return description.splice(0, 10).join(" ") + "…";
}
}
+ },
+ methods: {
+ setDetailId() {
+ this.$store.commit("productDetailId", this.id);
+ }
}
};
</script>
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 6725595..9802d84 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -1,13 +1,17 @@
<template>
<div id="productDetail">
- <div class="modal is-active">
- <div class="modal-background"></div>
+ <div v-if="product" class="modal is-active">
+ <div @click="clearDetailId" class="modal-background"></div>
<div class="modal-content">
<div class="card">
<div class="card-image">
<figure class="image ">
<a target="_blank" :href="fullsize">
- <img :src="base" :alt="name" title="Click for fullsize" />
+ <img
+ :src="base"
+ :alt="product.name"
+ title="Click for fullsize"
+ />
</a>
</figure>
</div>
@@ -15,7 +19,7 @@
<div class="card-content">
<div class="content">
<p class="title">
- {{ name }}
+ {{ product.name }}
</p>
<p class="subtitle">
{{ dollars }}
@@ -24,12 +28,12 @@
</div>
<div class="content">
- {{ description }}
+ {{ product.description }}
</div>
</div>
</div>
</div>
- <div class="modal-close is-large"></div>
+ <div @click="clearDetailId" class="modal-close is-large"></div>
</div>
</div>
</template>
@@ -37,31 +41,36 @@
<script>
export default {
name: "ProductDetail",
- props: {
- id: Number,
- name: String,
- quantity: Number,
- cents: Number,
- photo_base: String,
- photo_fullsize: String,
- description: String
- },
computed: {
+ product() {
+ return this.$store.getters.products.find(
+ p => p.id == this.$store.getters.productDetailId
+ );
+ },
stock() {
- if (this.quantity == 0) {
+ if (this.product.quantity == 0) {
return "Made to order";
} else {
- return [this.quantity, "in stock"].join(" ");
+ return [this.product.quantity, "in stock"].join(" ");
}
},
dollars() {
- return "$ " + (this.cents / 100).toFixed(2);
+ return "$ " + (this.product.cents / 100).toFixed(2);
},
base() {
- return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
+ return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_base].join(
+ "/"
+ );
},
fullsize() {
- return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
+ return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
+ "/"
+ );
+ }
+ },
+ methods: {
+ clearDetailId() {
+ this.$store.commit("productDetailId", 0);
}
}
};
diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js
index 30f6cbf..dabcf31 100644
--- a/iridescence/src/store/index.js
+++ b/iridescence/src/store/index.js
@@ -11,12 +11,16 @@ export default new Vuex.Store({
searchTerm: "",
products: [],
busy: false,
- compare: a => (a.featured ? -1 : 1)
+ compare: a => (a.featured ? -1 : 1),
+ productDetailId: 0
},
getters: {
busy(state) {
return state.busy;
},
+ productDetailId(state) {
+ return state.productDetailId;
+ },
products(state) {
return state.products
.filter(item => {
@@ -31,6 +35,9 @@ export default new Vuex.Store({
toggleBusy(state) {
state.busy = !state.busy;
},
+ productDetailId(state, id) {
+ state.productDetailId = id;
+ },
compare(state, compare) {
state.compare = compare;
},
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index b636175..b512328 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -4,6 +4,7 @@
cart. -->
<div id="home">
+ <ProductDetail></ProductDetail>
<div class="columns">
<div class="column">
<div class="container">
@@ -22,11 +23,13 @@
<script>
import ProductList from "@/components/ProductList.vue";
import ProductSearch from "@/components/ProductSearch.vue";
+import ProductDetail from "@/components/ProductDetail.vue";
export default {
name: "Home",
components: {
ProductList,
+ ProductDetail,
ProductSearch
}
};