add product to checkout when added to cart

mixins/cartMixins.js

@@ -1,16 +1,24 @@
 export default {
+  computed: {
+    checkout () {
+      return this.$store.state.checkout
+    },
+    cart () {
+      return this.$store.state.cart
+    }
+  },
   methods: {
     addToCart (product, checkout) {
       // 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
+          quantity: 1
         }
         // Add an item to the checkout
-        this.$shopify.checkout.addLineItems(checkout.id, lineItemsToAdd)
+        this.$shopify.checkout.addLineItems(checkout.id, lineItemsToAdd).then((checkout) => {
+          this.$store.commit('setCheckout', checkout)
+        })
         this.$buefy.toast.open({
           message: 'Product added',
           type: 'is-success'

package-lock.json

@@ -11470,8 +11470,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11508,8 +11507,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11518,8 +11516,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11622,8 +11619,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11633,7 +11629,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11659,7 +11654,6 @@
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -11676,7 +11670,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11757,8 +11750,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -11768,7 +11760,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -11844,8 +11835,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -11875,7 +11865,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -11893,7 +11882,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -11932,13 +11920,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },

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>

store/index.js

@@ -11,7 +11,7 @@ export const mutations = {
   setCheckout (state, data) {
     state.checkout = data
   },
-  incrementCart (sate, index) {
+  incrementCart (state, index) {
     state.cart[index].count++
   },
   addCart (state, item) {
@@ -27,13 +27,11 @@ export const getters = {
 }
 
 export const actions = {
-  addItemToCart ({ commit, getters }, payload) {
+  addItemToCart ({ commit, getters, state }, 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)
+        commit('incrementCart', state.cart.indexOf(element[0]))
       } else {
         commit('addCart', payload)
       }