diff options
Diffstat (limited to 'iridescence/src')
| -rw-r--r-- | iridescence/src/components/cart/CartItem.vue | 35 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 5 |
2 files changed, 35 insertions, 5 deletions
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue index c39ab13..2c7655a 100644 --- a/iridescence/src/components/cart/CartItem.vue +++ b/iridescence/src/components/cart/CartItem.vue @@ -17,14 +17,34 @@ </strong> </div> </div> - <div class="level-item"> - <button class="button is-static"> - {{ inCart }} - </button> - </div> </div> <div class="level-right"> <div class="level-item"> + <div 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> + </div> + <div class="level-item"> <button class="button is-outlined is-danger"> Remove </button> @@ -54,6 +74,11 @@ export default { process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail ); } + }, + methods: { + incrementCartQuantity(by) { + this.$store.commit("cartItem", { id: this.id, by }); + } } }; </script> diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index 8208f35..48cae11 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -36,6 +36,11 @@ export default new Vuex.Store({ cartItem(state, { id, by }) { if (state.cart[id]) { let newCount = (state.cart[id] += by); + if (newCount <= 0) { + // remove from cart entirely + delete state.cart[id]; + return; + } state.cart = { ...state.cart, [id]: newCount |