add product to checkout when added to cart

pages/basket/index.vue

@@ -1,6 +1,40 @@
 <template>
   <div>
-    <h1>Panier</h1>
+    <div class="columns">
+      <div class="column">
+        <h1 class="is-size-1">
+          Panier
+        </h1>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <b-table :data="cart">
+          <template slot-scope="props">
+            <b-table-column field="image" label="Image">
+              <figure class="image is-96x96">
+                <img class="is-rounded" :src="props.row.images[0].src" :alt="props.row.description">
+              </figure>
+            </b-table-column>
+            <b-table-column field="title" label="Title">
+              <p class="title">{{ props.row.title }}</p>
+            </b-table-column>
+            <b-table-column field="description" label="Description">
+              <p class="subtitle">{{ props.row.description }}</p>
+            </b-table-column>
+            <b-table-column field="price" label="Price">
+              {{ props.row.variants[0].price }} €
+            </b-table-column>
+            <b-table-column field="quantity" label="Quantity">
+              {{ props.row.count }}
+            </b-table-column>
+            <b-table-column field="total" label="Total">
+              {{ getItemTotal(props.row) }} €
+            </b-table-column>
+          </template>
+        </b-table>
+      </div>
+    </div>
     <b-button
       type="is-primary"
       @click="confirmCheckout"
@@ -11,29 +45,17 @@
 </template>
 
 <script>
+import cartMixins from '../../mixins/cartMixins'
+
 export default {
   name: 'Index',
-  computed: {
-    checkout () {
-      return this.$store.state.checkout
-    }
-  },
+  mixins: [cartMixins],
   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) => {
-          })
-        })
-      })
+      window.open(this.$store.state.checkout.webUrl)
+    },
+    getItemTotal (item) {
+      return item.variants[0].price * item.count
     }
   }
 }

pages/products/_handle/index.vue

@@ -5,7 +5,7 @@
     <b-button
       icon-left="cart"
       class="mx-2"
-      @click="addToCart(product)"
+      @click="addToCart(product, checkout)"
     >
       Ajouter
     </b-button>
@@ -20,14 +20,14 @@ export default {
   mixins: [
     cartMixins
   ],
+  async asyncData ({ params, $shopify }) {
+    const product = await $shopify.product.fetchByHandle(params.handle)
+    return { product }
+  },
   data () {
     return {
       product: {}
     }
-  },
-  async asyncData ({ params, $shopify }) {
-    const product = await $shopify.product.fetchByHandle(params.handle)
-    return { product }
   }
 }
 </script>

pages/products/index.vue

@@ -30,7 +30,7 @@
             <b-button
               type="is-primary"
               icon-left="cart"
-              @click="addToCart(product)"
+              @click="addToCart(product, checkout)"
             >
               Buy
             </b-button>
@@ -49,16 +49,14 @@ export default {
   mixins: [
     cartMixins
   ],
+  async asyncData ({ $shopify, store }) {
+    const products = await $shopify.product.fetchAll()
+    store.commit('setProducts', products)
+  },
   computed: {
     products () {
       return this.$store.state.products
     }
-  },
-  async asyncData ({ $shopify, store }) {
-    const products = await $shopify.product.fetchAll()
-    // eslint-disable-next-line no-console
-    console.log(products)
-    store.commit('setProducts', products)
   }
 }
 </script>