first commit

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-width">
-    <h1>Welcome to my socket shop</h1>
+    <h1>Welcome to my shop</h1>
   </div>
 </template>
 

pages/products/_handle/index.vue

@@ -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 }

pages/products/index.vue

@@ -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>