first commit

2019-09-30 19:48:54 +02:00
parent 180348b4d4
commit f575b5b70b
10 changed files with 182 additions and 115 deletions
@@ -1,24 +1,35 @@
 <template>
-  <el-menu
-    :default-active="activeIndex2"
-    mode="horizontal"
-  >
-    <el-menu-item index="1" to="/">
-      <nuxt-link to="/">
-        Accueil
-      </nuxt-link>
-    </el-menu-item>
-    <el-menu-item index="2">
-      <nuxt-link to="/products">
-        Produits
-      </nuxt-link>
-    </el-menu-item>
-    <el-menu-item index="3">
-      <nuxt-link to="/basket">
-        Panier
-      </nuxt-link>
-    </el-menu-item>
-  </el-menu>
+  <b-navbar>
+    <template slot="brand">
+      <b-navbar-item tag="router-link" to="/">
+        <img
+          src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
+          alt="Lightweight UI components for Vue.js based on Bulma"
+        >
+      </b-navbar-item>
+    </template>
+    <template slot="start">
+      <b-navbar-item tag="router-link" to="/products">
+        Products
+      </b-navbar-item>
+      <b-navbar-item tag="router-link" to="/blog">
+        Blog
+      </b-navbar-item>
+    </template>
+
+    <template slot="end">
+      <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: {
-    handleSelect (key, keyPath) {
-      // eslint-disable-next-line no-console
-      console.log(key, keyPath)
+  computed: {
+    cardCount () {
+      return this.$store.state.cart.length
    }
+  },
+  methods: {
  }
 }
 </script>

 <style scoped>
-
-  a {
-    padding: 2rem 0;
-  }
 </style>
@@ -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>
@@ -0,0 +1,11 @@
+export default {
+  methods: {
+    addToCart (product) {
+      this.$store.commit('addToCart', product)
+      this.$buefy.toast.open({
+        message: 'Product added',
+        type: 'is-success'
+      })
+    }
+  }
+}
@@ -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
    */
@@ -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",
@@ -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": {
@@ -1,6 +1,6 @@
 <template>
  <div class="full-width">
-    <h1>Welcome to my socket shop</h1>
+    <h1>Welcome to my shop</h1>
  </div>
 </template>

@@ -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 }
@@ -1,34 +1,62 @@
 <template>
-  <div class="full-width">
-    <h1>Here are the products</h1>
-    <el-row :gutter="20">
-      <el-col v-for="product in products" :key="product.id" :span="6">
-        <el-card :body-style="{ padding: '0px' }" :header="product.title">
-          <img :src="product.images[0].src" class="image">
-          <div style="padding: 14px;">
-            <div class="description">{{ product.description.substr(0, 150) }}...</div>
-            <div class="bottom">
-              <el-row>
-                <nuxt-link :to="'/products/' + product.handle">
-                  <el-button class="button" round type="primary">
-                    Voir
-                  </el-button>
-                </nuxt-link>
-              </el-row>
+  <div class="columns">
+    <div v-for="product in products" :key="product.id" class="column is-one-third">
+      <div class="card">
+        <div class="card-image">
+          <figure class="image is-4by3">
+            <img :src="product.images[0].src" :alt="product.images[0].altText">
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="media">
+            <div class="media-content">
+              <p class="title is-4">
+                {{ product.title }}
+              </p>
+              <p class="subtitle is-6">
+                {{ product.variants[0].price }} €
+              </p>
            </div>
          </div>
-        </el-card>
-      </el-col>
-    </el-row>
+
+          <div class="content">
+            <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>
@@ -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)
+    }
+  }
+}