From d8d44376d193d925582a0a12373e1403df49cf63 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Thu, 3 Dec 2020 19:25:12 -0500 Subject: basic cart subtotaling, sidebar with total and checkout controls, better navbar cart buttons --- iridescence/src/components/CartCheckout.vue | 16 ++++++--- iridescence/src/components/cart/CartItem.vue | 7 +++- iridescence/src/components/cart/Totals.vue | 25 ++++++++++++++ iridescence/src/store/index.js | 49 ++++++++++++++++++++-------- iridescence/src/views/Cart.vue | 29 ++++++++++------ 5 files changed, 97 insertions(+), 29 deletions(-) create mode 100644 iridescence/src/components/cart/Totals.vue (limited to 'iridescence') diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue index 19ad706..cde78d9 100644 --- a/iridescence/src/components/CartCheckout.vue +++ b/iridescence/src/components/CartCheckout.vue @@ -1,10 +1,13 @@ @@ -18,6 +21,9 @@ export default { (acc, cur) => acc + cur, 0 ); + }, + cartTotal() { + return this.$store.getters.cartTotal; } } }; diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue index 2c7655a..e31a109 100644 --- a/iridescence/src/components/cart/CartItem.vue +++ b/iridescence/src/components/cart/CartItem.vue @@ -19,6 +19,7 @@
+
Subtotal: {{ dollars }}

@@ -44,8 +45,9 @@

+
-
@@ -78,6 +80,9 @@ export default { methods: { incrementCartQuantity(by) { this.$store.commit("cartItem", { id: this.id, by }); + }, + removeAll() { + this.$store.commit("removeItemFromCart", this.id); } } }; diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue new file mode 100644 index 0000000..7b95462 --- /dev/null +++ b/iridescence/src/components/cart/Totals.vue @@ -0,0 +1,25 @@ + + + diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index 48cae11..e2d970d 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -24,6 +24,13 @@ export default new Vuex.Store({ .includes(state.searchTerm.toLowerCase()); }) .sort(state.compare); + }, + cartTotal(state) { + let cents = state.products + .filter(p => state.cart[p.id]) + .map(p => p.cents * state.cart[p.id]) + .reduce((acc, cur) => acc + cur, 0); + return "$ " + (cents / 100).toFixed(2); } }, mutations: { @@ -34,22 +41,38 @@ export default new Vuex.Store({ state.productDetailId = id; }, cartItem(state, { id, by }) { + let newCount = 1; 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 - }; + newCount = state.cart[id] += by; + //if (newCount <= 0) { + // // remove from cart entirely + // delete state.cart[id]; + // return; + //} + //state.cart = { + // ...state.cart, + // [id]: newCount + } + + let cart = { + ...state.cart + }; + + if (newCount) { + cart[id] = newCount; } else { - state.cart = { - ...state.cart, - [id]: 1 + // remove entirely + delete cart[id]; + } + state.cart = cart; + }, + removeItemFromCart(state, id) { + if (state.cart[id]) { + let cart = { + ...state.cart }; + delete cart[id]; + state.cart = cart; } }, compare(state, compare) { diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue index f1c369c..7d64a65 100644 --- a/iridescence/src/views/Cart.vue +++ b/iridescence/src/views/Cart.vue @@ -1,19 +1,26 @@