From 2e7da5ab02ffa8b07fede7f6cd7e5dbbd90fac5f Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Mon, 23 Nov 2020 17:29:58 -0500 Subject: finished up product detail functionality, started checkout and cart views --- iridescence/src/App.vue | 3 +- iridescence/src/components/BusyBar.vue | 12 +---- iridescence/src/components/CartCheckout.vue | 25 +++++++--- iridescence/src/components/Navbar.vue | 16 +++--- iridescence/src/components/ProductDetail.vue | 75 +++++++++++++++++++++++----- iridescence/src/components/cart/CartItem.vue | 39 +++++++++++++++ iridescence/src/router/index.js | 12 +++++ iridescence/src/store/index.js | 24 ++++++--- iridescence/src/views/Cart.vue | 20 ++++++++ iridescence/src/views/Checkout.vue | 12 +++++ 10 files changed, 188 insertions(+), 50 deletions(-) create mode 100644 iridescence/src/components/cart/CartItem.vue create mode 100644 iridescence/src/views/Cart.vue create mode 100644 iridescence/src/views/Checkout.vue (limited to 'iridescence') diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue index 8851fbd..d9499c4 100644 --- a/iridescence/src/App.vue +++ b/iridescence/src/App.vue @@ -30,6 +30,7 @@ export default { diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue index 721a5fd..a38cefa 100644 --- a/iridescence/src/components/BusyBar.vue +++ b/iridescence/src/components/BusyBar.vue @@ -5,13 +5,6 @@ max="100" v-if="isBusy" > - {{ progress }}% @@ -20,10 +13,7 @@ export default { name: "BusyBar", computed: { isBusy() { - return this.$store.getters.busy; - }, - progress() { - return this.$store.getters.progress; + return this.$store.state.busy; } } }; diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue index ec72acf..19ad706 100644 --- a/iridescence/src/components/CartCheckout.vue +++ b/iridescence/src/components/CartCheckout.vue @@ -1,15 +1,24 @@ + diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue index 60db834..3ef4ead 100644 --- a/iridescence/src/components/Navbar.vue +++ b/iridescence/src/components/Navbar.vue @@ -82,13 +82,12 @@ export default { }, categories() { //const raw = this.$store.getters.products.map(p => p.category.split("/")); - const raw = [ - [1, 2, 3], - [1, 2, 4], - [1, 5], - [6, 7] - ]; - console.log(this.generateCategories(raw)); + //const raw = [ + // [1, 2, 3], + // [1, 2, 4], + // [1, 5], + // [6, 7] + //]; return []; }, routeName() { @@ -96,9 +95,8 @@ export default { } }, methods: { - generateCategories(list) { + generateCategories() { let results = []; - console.log(list); return results; }, diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue index 9802d84..430d78b 100644 --- a/iridescence/src/components/ProductDetail.vue +++ b/iridescence/src/components/ProductDetail.vue @@ -17,18 +17,56 @@
-
-

- {{ product.name }} -

-

- {{ dollars }} -

-

{{ stock }}

-
- -
- {{ product.description }} +
+
+

+ {{ product.name }} +

+ +

+ {{ product.description }} +

+
+
+

{{ dollars }}

+

{{ stock }}

+ + +
@@ -42,9 +80,12 @@ export default { name: "ProductDetail", computed: { + inCart() { + return this.$store.state.cart[this.product.id]; + }, product() { return this.$store.getters.products.find( - p => p.id == this.$store.getters.productDetailId + p => p.id == this.$store.state.productDetailId ); }, stock() { @@ -66,11 +107,19 @@ export default { return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join( "/" ); + }, + categories() { + let categories = this.product.category.split("/"); + categories.splice(0, 1, "All"); + return categories; } }, methods: { clearDetailId() { this.$store.commit("productDetailId", 0); + }, + incrementCartQuantity(by) { + this.$store.commit("cartItem", { id: this.product.id, by }); } } }; diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue new file mode 100644 index 0000000..8c2de16 --- /dev/null +++ b/iridescence/src/components/cart/CartItem.vue @@ -0,0 +1,39 @@ + + + diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js index 8c05e28..cc63967 100644 --- a/iridescence/src/router/index.js +++ b/iridescence/src/router/index.js @@ -3,6 +3,8 @@ import VueRouter from "vue-router"; import Home from "../views/Home.vue"; import About from "../views/About.vue"; import Admin from "../views/Admin.vue"; +import Cart from "../views/Cart.vue"; +import Checkout from "../views/Checkout.vue"; Vue.use(VueRouter); @@ -24,6 +26,16 @@ const routes = [ path: "/admin", name: "Administration", component: Admin + }, + { + path: "/cart", + name: "Cart", + component: Cart + }, + { + path: "/checkout", + name: "Checkout", + component: Checkout } ]; diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index dabcf31..8208f35 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -10,17 +10,12 @@ export default new Vuex.Store({ state: { searchTerm: "", products: [], + cart: {}, busy: false, 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 => { @@ -38,6 +33,20 @@ export default new Vuex.Store({ productDetailId(state, id) { state.productDetailId = id; }, + cartItem(state, { id, by }) { + if (state.cart[id]) { + let newCount = (state.cart[id] += by); + state.cart = { + ...state.cart, + [id]: newCount + }; + } else { + state.cart = { + ...state.cart, + [id]: 1 + }; + } + }, compare(state, compare) { state.compare = compare; }, @@ -75,6 +84,5 @@ export default new Vuex.Store({ commit("toggleBusy"); return photoSet; } - }, - modules: {} + } }); diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue new file mode 100644 index 0000000..7060b60 --- /dev/null +++ b/iridescence/src/views/Cart.vue @@ -0,0 +1,20 @@ + + + diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue new file mode 100644 index 0000000..ab28517 --- /dev/null +++ b/iridescence/src/views/Checkout.vue @@ -0,0 +1,12 @@ + + + -- cgit v1.2.3