From bbca265deaf28fb64b8bf7166f5dc94eec3dcb4a Mon Sep 17 00:00:00 2001 From: thomas Date: Tue, 25 Feb 2020 20:14:23 +0100 Subject: [PATCH] product page and cart finished --- components/TheNavbar.vue | 4 +- mixins/cartMixins.js | 32 ++++++----- nuxt.config.js | 3 +- package-lock.json | 25 ++++++--- package.json | 3 +- pages/basket/index.vue | 96 ++++++++++++++++++++------------ pages/index.vue | 10 ++-- pages/products/_handle/index.vue | 92 ++++++++++++++++++++++++++---- pages/products/index.vue | 4 +- plugins/element-ui.js | 5 -- plugins/localStorage.js | 7 +++ store/index.js | 32 +---------- 12 files changed, 198 insertions(+), 115 deletions(-) delete mode 100644 plugins/element-ui.js create mode 100644 plugins/localStorage.js diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue index c94d7f1..c806113 100644 --- a/components/TheNavbar.vue +++ b/components/TheNavbar.vue @@ -37,13 +37,11 @@ export default { name: 'TheNavbar', data () { return { - activeIndex: '1', - activeIndex2: '1' } }, computed: { cardCount () { - return this.$store.state.cart.length + return this.$store.state.checkout.lineItems.length } }, methods: { diff --git a/mixins/cartMixins.js b/mixins/cartMixins.js index 92e1b7c..72fcb73 100644 --- a/mixins/cartMixins.js +++ b/mixins/cartMixins.js @@ -8,21 +8,23 @@ export default { } }, methods: { - addToCart (product, checkout) { - // add to cart - this.$store.dispatch('addItemToCart', product).then((item) => { - const lineItemsToAdd = { - variantId: item.variants[0].id, - quantity: 1 - } - // Add an item to the checkout - this.$shopify.checkout.addLineItems(checkout.id, lineItemsToAdd).then((checkout) => { - this.$store.commit('setCheckout', checkout) - }) - this.$buefy.toast.open({ - message: 'Product added', - type: 'is-success' - }) + addToCart (id, quantity) { + const lineItemsToAdd = { + variantId: id, + quantity + } + // Add an item to the checkout + this.$shopify.checkout.addLineItems(this.checkout.id, lineItemsToAdd).then((checkout) => { + this.$store.commit('setCheckout', checkout) + }) + this.$buefy.toast.open({ + message: 'Product added', + type: 'is-success' + }) + }, + deleteItem (id) { + this.$shopify.checkout.removeLineItems(this.checkout.id, id).then((checkout) => { + this.$store.commit('setCheckout', checkout) }) } } diff --git a/nuxt.config.js b/nuxt.config.js index 7f8f037..ac63503 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -27,8 +27,7 @@ export default { /* ** Plugins to load before mounting the App */ - plugins: [ - ], + plugins: [{ src: '~/plugins/localStorage.js', ssr: false }], /* ** Nuxt.js dev-modules */ diff --git a/package-lock.json b/package-lock.json index 98d2928..fa7e0c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10045,6 +10045,11 @@ "resolved": "https://registry.npmjs.org/shopify-buy/-/shopify-buy-2.9.1.tgz", "integrity": "sha512-nLAW2FAOVXKiMBQ5d8j24/OYzXrxkhUp0NDi/Wk+mdt1d9JDJ5x3Afo3TOnXDX/LmQxF6OszvPR+2W0zzJMVJQ==" }, + "shvl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.0.tgz", + "integrity": "sha512-WbpzSvI5XgVGJ3A4ySGe8hBxj0JgJktfnoLhhJmvITDdK21WPVWwgG8GPlYEh4xqdti3Ff7PJ5G0QrRAjNS0Ig==" + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", @@ -11399,6 +11404,15 @@ "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz", "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ==" }, + "vuex-persistedstate": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.7.1.tgz", + "integrity": "sha512-Ktvp6Bt6ApYj35MuxTClu+9Lpukcgl3Z/0o4PU12+Z4jU6lyOMzos0k6zGT5xrukAkGM1VV3EYNwz1TnHPhgFA==", + "requires": { + "deepmerge": "^4.2.2", + "shvl": "^2.0.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", @@ -11488,13 +11502,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11511,8 +11523,7 @@ }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", @@ -11641,15 +11652,13 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", diff --git a/package.json b/package.json index 511a3c6..d3b2b81 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "@nuxtjs/axios": "^5.9.5", "nuxt": "^2.11.0", "nuxt-buefy": "^0.3.23", - "nuxt-shopify": "^1.7.1" + "nuxt-shopify": "^1.7.1", + "vuex-persistedstate": "^2.7.1" }, "devDependencies": { "@nuxtjs/eslint-config": "^2.0.2", diff --git a/pages/basket/index.vue b/pages/basket/index.vue index f9233ca..343a6e4 100644 --- a/pages/basket/index.vue +++ b/pages/basket/index.vue @@ -1,46 +1,72 @@ @@ -55,7 +81,7 @@ export default { window.open(this.$store.state.checkout.webUrl) }, getItemTotal (item) { - return item.variants[0].price * item.count + return item.variant.price * item.quantity } } } diff --git a/pages/index.vue b/pages/index.vue index f967e4a..03d4ef9 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -10,10 +10,12 @@ export default { const products = await $shopify.product.fetchAll() return { products } }, - created () { - this.$shopify.checkout.create().then((checkout) => { - this.$store.commit('setCheckout', checkout) - }) + beforeUpdate () { + if (typeof this.$store.state.checkout.id === 'undefined') { + this.$shopify.checkout.create().then((checkout) => { + this.$store.commit('setCheckout', checkout) + }) + } } } diff --git a/pages/products/_handle/index.vue b/pages/products/_handle/index.vue index 4f1cbb5..7c4dd35 100644 --- a/pages/products/_handle/index.vue +++ b/pages/products/_handle/index.vue @@ -1,14 +1,78 @@ @@ -26,12 +90,18 @@ export default { }, data () { return { - product: {} + product: {}, + quantity: 1 } } } diff --git a/pages/products/index.vue b/pages/products/index.vue index 574c29b..cfab086 100644 --- a/pages/products/index.vue +++ b/pages/products/index.vue @@ -25,12 +25,12 @@ :to="'/products/' + product.handle" type="is-primary" > - Voir + See Buy diff --git a/plugins/element-ui.js b/plugins/element-ui.js deleted file mode 100644 index 9ec8b61..0000000 --- a/plugins/element-ui.js +++ /dev/null @@ -1,5 +0,0 @@ -import Vue from 'vue' -import Element from 'element-ui' -import locale from 'element-ui/lib/locale/lang/en' - -Vue.use(Element, { locale }) diff --git a/plugins/localStorage.js b/plugins/localStorage.js new file mode 100644 index 0000000..69c7fc1 --- /dev/null +++ b/plugins/localStorage.js @@ -0,0 +1,7 @@ +import createPersistedState from 'vuex-persistedstate' + +export default ({ store }) => { + window.onNuxtReady(() => { + createPersistedState()(store) + }) +} diff --git a/store/index.js b/store/index.js index cb0a73f..e2d9ec0 100644 --- a/store/index.js +++ b/store/index.js @@ -1,7 +1,8 @@ export const state = () => ({ products: [], - cart: [], - checkout: {} + checkout: { + lineItems: [] + } }) export const mutations = { @@ -10,32 +11,5 @@ export const mutations = { }, setCheckout (state, data) { state.checkout = data - }, - incrementCart (state, index) { - state.cart[index].count++ - }, - addCart (state, item) { - item.count = 1 - state.cart.push(item) - } -} - -export const getters = { - getCartItem: state => (id) => { - return state.cart.filter(item => (item.id === id)) - } -} - -export const actions = { - addItemToCart ({ commit, getters, state }, payload) { - return new Promise((resolve) => { - const element = getters.getCartItem(payload.id) - if (element.length > 0) { - commit('incrementCart', state.cart.indexOf(element[0])) - } else { - commit('addCart', payload) - } - resolve(getters.getCartItem(payload.id)[0]) - }) } }