in progress

components/TheNavbar.vue

@@ -20,12 +20,12 @@
     <template slot="end">
       <b-navbar-item tag="div">
         <div class="buttons">
-          <a class="button is-primary">
+          <nuxt-link to="/basket" class="button is-primary">
             <b-icon
               icon="cart"
             />
             <span>{{ cardCount }}</span>
-          </a>
+          </nuxt-link>
         </div>
       </b-navbar-item>
     </template>

mixins/cartMixins.js

@@ -1,11 +1,21 @@
 export default {
   methods: {
-    addToCart (product) {
+    addToCart (product, checkout) {
-      this.$store.commit('addToCart', product)
+      // add to cart
+      this.$store.dispatch('addItemToCart', product).then((item) => {
+        // eslint-disable-next-line no-console
+        console.log('item : ', item)
+        const lineItemsToAdd = {
+          variantId: item.variants[0].id,
+          quantity: item.count
+        }
+        // Add an item to the checkout
+        this.$shopify.checkout.addLineItems(checkout.id, lineItemsToAdd)
         this.$buefy.toast.open({
           message: 'Product added',
           type: 'is-success'
         })
+      })
     }
   }
 }

nuxt.config.js

@@ -52,8 +52,8 @@ export default {
   axios: {
   },
   shopify: {
-    domain: 'my-guitares.myshopify.com/', // your shopify domain
+    domain: 'home-deco35.myshopify.com/', // your shopify domain
-    storefrontAccessToken: '584f71cdb63bca9d98db7ce872414df2'// your shopify storefront access token
+    storefrontAccessToken: '63f6a2f53bbc44bfc9e40c911bb17a7e'// your shopify storefront access token
   },
   /*
   ** Build configuration

package-lock.json

@@ -2671,12 +2671,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
       "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA=="
     },
-    "acorn-jsx": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.2.tgz",
-      "integrity": "sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw==",
-      "dev": true
-    },
     "acorn-walk": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",

pages/basket/index.vue

@@ -1,14 +1,41 @@
 <template>
-  <el-row>
+  <div>
-    <el-col>
     <h1>Panier</h1>
-    </el-col>
+    <b-button
-  </el-row>
+      type="is-primary"
+      @click="confirmCheckout"
+    >
+      Checkout
+    </b-button>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Index'
+  name: 'Index',
+  computed: {
+    checkout () {
+      return this.$store.state.checkout
+    }
+  },
+  methods: {
+    confirmCheckout () {
+      this.$shopify.checkout.create().then((checkout) => {
+        // eslint-disable-next-line no-console
+        console.log(checkout)
+
+        this.$store.state.cart.forEach((item) => {
+          const lineItemsToAdd = {
+            variantId: item.variants[0].id,
+            quantity: item.count
+          }
+          // Add an item to the checkout
+          this.$shopify.checkout.addLineItems(checkout.id, lineItemsToAdd).then((checkout) => {
+          })
+        })
+      })
+    }
+  }
 }
 </script>
 

pages/blog/_handle/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Blog id</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+
+</style>

pages/blog/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Blog</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -9,6 +9,11 @@ export default {
   async asyncData ({ $shopify }) {
     const products = await $shopify.product.fetchAll()
     return { products }
+  },
+  created () {
+    this.$shopify.checkout.create().then((checkout) => {
+      this.$store.commit('setCheckout', checkout)
+    })
   }
 }
 </script>
@@ -17,37 +22,4 @@ export default {
   .full-width {
     width: 100%;
   }
-  .el-row {
-    margin-bottom: 20px;
-  &:last-child {
-     margin-bottom: 0;
-   }
-  }
-  .el-col {
-    border-radius: 4px;
-  }
-  .bg-purple-dark {
-    background: #99a9bf;
-  }
-  .bg-purple {
-    background: #d3dce6;
-  }
-  .bg-purple-light {
-    background: #e5e9f2;
-  }
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-  }
-  .row-bg {
-    padding: 10px 0;
-    background-color: #f9fafc;
-  }
-  .image {
-    width: 100%;
-    height: 15rem;
-  }
-  .description {
-    margin-bottom: 1rem;
-  }
 </style>

pages/products/index.vue

@@ -56,6 +56,8 @@ export default {
   },
   async asyncData ({ $shopify, store }) {
     const products = await $shopify.product.fetchAll()
+    // eslint-disable-next-line no-console
+    console.log(products)
     store.commit('setProducts', products)
   }
 }

store/index.js

@@ -1,22 +1,43 @@
 export const state = () => ({
   products: [],
-  cart: []
+  cart: [],
+  checkout: {}
 })
 
 export const mutations = {
   setProducts (state, data) {
     state.products = data
   },
-  addToCart (state, item) {
+  setCheckout (state, data) {
-    const element = state.cart.filter(el => el.id === item.id)
+    state.checkout = data
-    if (element.length > 0) {
+  },
-      const index = state.cart.indexOf(element[0])
+  incrementCart (sate, index) {
-      // eslint-disable-next-line no-console
-      console.log(index)
     state.cart[index].count++
-    } else {
+  },
+  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 }, payload) {
+    return new Promise((resolve) => {
+      const element = getters.getCartItem(payload.id)
+      // eslint-disable-next-line no-console
+      console.log(element)
+      if (element.length > 0) {
+        commit('incrementCart', payload.id)
+      } else {
+        commit('addCart', payload)
+      }
+      resolve(getters.getCartItem(payload.id)[0])
+    })
+  }
 }