From f575b5b70b832513dc80b3502cc835e61ac7c984 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 30 Sep 2019 19:48:54 +0200 Subject: [PATCH] first commit --- components/TheNavbar.vue | 64 +++++++++++++---------- layouts/default.vue | 8 +-- mixins/cartMixins.js | 11 ++++ nuxt.config.js | 11 ++-- package-lock.json | 90 ++++++++++++++------------------ package.json | 2 +- pages/index.vue | 2 +- pages/products/_handle/index.vue | 17 ++++++ pages/products/index.vue | 70 +++++++++++++++++-------- store/index.js | 22 ++++++++ 10 files changed, 182 insertions(+), 115 deletions(-) create mode 100644 mixins/cartMixins.js create mode 100644 store/index.js diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue index f5fe50d..69948ad 100644 --- a/components/TheNavbar.vue +++ b/components/TheNavbar.vue @@ -1,24 +1,35 @@ diff --git a/layouts/default.vue b/layouts/default.vue index 05f608e..8bee20c 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,9 +1,9 @@ @@ -20,8 +20,4 @@ export default { body { margin: 0; } - - .el-container { - padding: 1rem 5rem; - } diff --git a/mixins/cartMixins.js b/mixins/cartMixins.js new file mode 100644 index 0000000..18ecb45 --- /dev/null +++ b/mixins/cartMixins.js @@ -0,0 +1,11 @@ +export default { + methods: { + addToCart (product) { + this.$store.commit('addToCart', product) + this.$buefy.toast.open({ + message: 'Product added', + type: 'is-success' + }) + } + } +} diff --git a/nuxt.config.js b/nuxt.config.js index 81f9148..ba83c9c 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -23,13 +23,11 @@ export default { ** Global CSS */ css: [ - 'element-ui/lib/theme-chalk/index.css' ], /* ** Plugins to load before mounting the App */ plugins: [ - '@/plugins/element-ui' ], /* ** Nuxt.js dev-modules @@ -44,7 +42,8 @@ export default { modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', - 'nuxt-shopify' + 'nuxt-shopify', + 'nuxt-buefy' ], /* ** Axios module configuration @@ -53,14 +52,14 @@ export default { axios: { }, shopify: { - domain: 'my-socket.myshopify.com/', // your shopify domain - storefrontAccessToken: '347ec6bae7c59f524600ccf6c83ad23b'// your shopify storefront access token + domain: 'my-guitares.myshopify.com/', // your shopify domain + storefrontAccessToken: '584f71cdb63bca9d98db7ce872414df2'// your shopify storefront access token }, /* ** Build configuration */ build: { - transpile: [/^element-ui/], + transpile: [], /* ** You can extend webpack config here */ diff --git a/package-lock.json b/package-lock.json index 10a35fb..b7db5df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1727,14 +1727,6 @@ "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" }, - "async-validator": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz", - "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==", - "requires": { - "babel-runtime": "6.x" - } - }, "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", @@ -1865,11 +1857,6 @@ "resolve": "^1.12.0" } }, - "babel-helper-vue-jsx-merge-props": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz", - "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==" - }, "babel-loader": { "version": "8.0.6", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz", @@ -2246,6 +2233,14 @@ "node-releases": "^1.1.29" } }, + "buefy": { + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.4.tgz", + "integrity": "sha512-hDUUKbKxQmtYlo/IPH9H+ewEN6KulpDxfNFIPvO5z3ukYqEG29psW6oFbJGisZDEIYGxqE2jMPcBOOjm8LxJVQ==", + "requires": { + "bulma": "0.7.5" + } + }, "buffer": { "version": "4.9.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", @@ -2276,6 +2271,11 @@ "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" }, + "bulma": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz", + "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -3204,11 +3204,6 @@ "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", "dev": true }, - "deepmerge": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", - "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==" - }, "define-properties": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", @@ -3425,19 +3420,6 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.258.tgz", "integrity": "sha512-rkPYrgFU7k/8ngjHYvzOZ44OQQ1GeIRIQnhGv00RkSlQXEnJKsGonQppbEEWHuuxZegpMao+WZmYraWQJQJMMg==" }, - "element-ui": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz", - "integrity": "sha512-DapyT0PW4i/1ETPHk8K8Qbe8B6hj10+dXsRTrOTFryV9wAs6e9mCxbV65awokyR2/v/KuIHJmqX+mH3wUa4rOQ==", - "requires": { - "async-validator": "~1.8.1", - "babel-helper-vue-jsx-merge-props": "^2.0.0", - "deepmerge": "^1.2.0", - "normalize-wheel": "^1.0.1", - "resize-observer-polyfill": "^1.5.0", - "throttle-debounce": "^1.0.1" - } - }, "elliptic": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz", @@ -6202,11 +6184,6 @@ "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==" }, - "normalize-wheel": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", - "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" - }, "npm-run-path": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz", @@ -6249,6 +6226,14 @@ "@nuxt/webpack": "2.9.2" } }, + "nuxt-buefy": { + "version": "0.3.15", + "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.3.15.tgz", + "integrity": "sha512-7DVvhAmSjChV+RP9h3FJLuYjBc4GMT9xJtHasbb3N5K9ZGJ6GzKE7qVpYP8rHXxsV2D5CyynMBZBILdpRKFuVA==", + "requires": { + "buefy": "^0.8.4" + } + }, "nuxt-shopify": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/nuxt-shopify/-/nuxt-shopify-1.4.1.tgz", @@ -8097,11 +8082,6 @@ "integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=", "dev": true }, - "resize-observer-polyfill": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", - "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" - }, "resolve": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", @@ -9018,11 +8998,6 @@ "neo-async": "^2.6.0" } }, - "throttle-debounce": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz", - "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==" - }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -9738,11 +9713,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9755,15 +9732,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -9866,7 +9846,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -9876,6 +9857,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -9888,6 +9870,7 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9987,7 +9970,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9997,6 +9981,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -10102,6 +10087,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index 0d03f05..ea36278 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ }, "dependencies": { "@nuxtjs/axios": "^5.3.6", - "element-ui": "^2.4.11", "nuxt": "^2.0.0", + "nuxt-buefy": "^0.3.15", "nuxt-shopify": "^1.4.1" }, "devDependencies": { diff --git a/pages/index.vue b/pages/index.vue index 1c2c5ba..5e91911 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,6 +1,6 @@ diff --git a/pages/products/_handle/index.vue b/pages/products/_handle/index.vue index 6a64a95..92cb2f8 100644 --- a/pages/products/_handle/index.vue +++ b/pages/products/_handle/index.vue @@ -2,12 +2,29 @@

{{ product.title }}

{{ product.description }}

+ + Ajouter +
diff --git a/store/index.js b/store/index.js new file mode 100644 index 0000000..b155d98 --- /dev/null +++ b/store/index.js @@ -0,0 +1,22 @@ +export const state = () => ({ + products: [], + cart: [] +}) + +export const mutations = { + setProducts (state, data) { + state.products = data + }, + addToCart (state, item) { + const element = state.cart.filter(el => el.id === item.id) + if (element.length > 0) { + const index = state.cart.indexOf(element[0]) + // eslint-disable-next-line no-console + console.log(index) + state.cart[index].count++ + } else { + item.count = 1 + state.cart.push(item) + } + } +}