in progress

pages/basket/index.vue

@@ -1,14 +1,41 @@
 <template>
-  <el-row>
-    <el-col>
-      <h1>Panier</h1>
-    </el-col>
-  </el-row>
+  <div>
+    <h1>Panier</h1>
+    <b-button
+      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)
   }
 }