diff options
author | Adam T. Carpenter <atc@53hor.net> | 2020-12-03 18:18:57 -0500 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2020-12-03 18:18:57 -0500 |
commit | 8280cf98c9a33613c7440442b73636e39dd297bc (patch) | |
tree | 9ed3494088585fe6309dac766eb91e5b4991c5e4 | |
parent | 5751052a0df80260ea9e7c66ee222e95de4e35e3 (diff) | |
download | theglassyladies-8280cf98c9a33613c7440442b73636e39dd297bc.tar.xz theglassyladies-8280cf98c9a33613c7440442b73636e39dd297bc.zip |
when item cart count is 0, item is removed from cart display
-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 |