diff options
Diffstat (limited to 'iridescence')
| -rw-r--r-- | iridescence/src/components/ProductCard.vue | 24 | ||||
| -rw-r--r-- | iridescence/src/components/ProductDetail.vue | 49 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 9 | ||||
| -rw-r--r-- | iridescence/src/views/Home.vue | 3 |
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 } }; |