first commit

components/TheNavbar.vue

@@ -1,24 +1,35 @@
 <template>
-  <el-menu
+  <b-navbar>
-    :default-active="activeIndex2"
+    <template slot="brand">
-    mode="horizontal"
+      <b-navbar-item tag="router-link" to="/">
-  >
+        <img
-    <el-menu-item index="1" to="/">
+          src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
-      <nuxt-link to="/">
+          alt="Lightweight UI components for Vue.js based on Bulma"
-        Accueil
+        >
-      </nuxt-link>
+      </b-navbar-item>
-    </el-menu-item>
+    </template>
-    <el-menu-item index="2">
+    <template slot="start">
-      <nuxt-link to="/products">
+      <b-navbar-item tag="router-link" to="/products">
-        Produits
+        Products
-      </nuxt-link>
+      </b-navbar-item>
-    </el-menu-item>
+      <b-navbar-item tag="router-link" to="/blog">
-    <el-menu-item index="3">
+        Blog
-      <nuxt-link to="/basket">
+      </b-navbar-item>
-        Panier
+    </template>
-      </nuxt-link>
+
-    </el-menu-item>
+    <template slot="end">
-  </el-menu>
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <a class="button is-primary">
+            <b-icon
+              icon="cart"
+            />
+            <span>{{ cardCount }}</span>
+          </a>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
 </template>
 
 <script>
@@ -30,18 +41,15 @@ export default {
       activeIndex2: '1'
     }
   },
-  methods: {
+  computed: {
-    handleSelect (key, keyPath) {
+    cardCount () {
-      // eslint-disable-next-line no-console
+      return this.$store.state.cart.length
-      console.log(key, keyPath)
     }
+  },
+  methods: {
   }
 }
 </script>
 
 <style scoped>
-
-  a {
-    padding: 2rem 0;
-  }
 </style>

layouts/default.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <the-navbar />
-    <el-container>
+    <div class="container" style="margin-top: 2em">
       <nuxt />
-    </el-container>
+    </div>
   </div>
 </template>
 
@@ -20,8 +20,4 @@ export default {
   body {
     margin: 0;
   }
-
-  .el-container {
-    padding: 1rem 5rem;
-  }
 </style>

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'
+      })
+    }
+  }
+}

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
+    domain: 'my-guitares.myshopify.com/', // your shopify domain
-    storefrontAccessToken: '347ec6bae7c59f524600ccf6c83ad23b'// your shopify storefront access token
+    storefrontAccessToken: '584f71cdb63bca9d98db7ce872414df2'// your shopify storefront access token
   },
   /*
   ** Build configuration
   */
   build: {
-    transpile: [/^element-ui/],
+    transpile: [],
     /*
     ** You can extend webpack config here
     */

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",

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": {

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-width">
-    <h1>Welcome to my socket shop</h1>
+    <h1>Welcome to my shop</h1>
   </div>
 </template>
 

pages/products/_handle/index.vue

@@ -2,12 +2,29 @@
   <div>
     <h1>{{ product.title }}</h1>
     <p>{{ product.description }}</p>
+    <b-button
+      icon-left="cart"
+      class="mx-2"
+      @click="addToCart(product)"
+    >
+      Ajouter
+    </b-button>
   </div>
 </template>
 
 <script>
+import cartMixins from '../../../mixins/cartMixins'
+
 export default {
   name: 'Index',
+  mixins: [
+    cartMixins
+  ],
+  data () {
+    return {
+      product: {}
+    }
+  },
   async asyncData ({ params, $shopify }) {
     const product = await $shopify.product.fetchByHandle(params.handle)
     return { product }

pages/products/index.vue

@@ -1,34 +1,62 @@
 <template>
-  <div class="full-width">
+  <div class="columns">
-    <h1>Here are the products</h1>
+    <div v-for="product in products" :key="product.id" class="column is-one-third">
-    <el-row :gutter="20">
+      <div class="card">
-      <el-col v-for="product in products" :key="product.id" :span="6">
+        <div class="card-image">
-        <el-card :body-style="{ padding: '0px' }" :header="product.title">
+          <figure class="image is-4by3">
-          <img :src="product.images[0].src" class="image">
+            <img :src="product.images[0].src" :alt="product.images[0].altText">
-          <div style="padding: 14px;">
+          </figure>
-            <div class="description">{{ product.description.substr(0, 150) }}...</div>
+        </div>
-            <div class="bottom">
+        <div class="card-content">
-              <el-row>
+          <div class="media">
-                <nuxt-link :to="'/products/' + product.handle">
+            <div class="media-content">
-                  <el-button class="button" round type="primary">
+              <p class="title is-4">
-                    Voir
+                {{ product.title }}
-                  </el-button>
+              </p>
-                </nuxt-link>
+              <p class="subtitle is-6">
-              </el-row>
+                {{ product.variants[0].price }} €
+              </p>
             </div>
           </div>
-        </el-card>
+
-      </el-col>
+          <div class="content">
-    </el-row>
+            <b-button
+              tag="router-link"
+              :to="'/products/' + product.handle"
+              type="is-primary"
+            >
+              Voir
+            </b-button>
+            <b-button
+              type="is-primary"
+              icon-left="cart"
+              @click="addToCart(product)"
+            >
+              Buy
+            </b-button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import cartMixins from '../../mixins/cartMixins'
+
 export default {
   name: 'Index',
-  async asyncData ({ $shopify }) {
+  mixins: [
+    cartMixins
+  ],
+  computed: {
+    products () {
+      return this.$store.state.products
+    }
+  },
+  async asyncData ({ $shopify, store }) {
     const products = await $shopify.product.fetchAll()
-    return { products }
+    store.commit('setProducts', products)
   }
 }
 </script>

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)
+    }
+  }
+}