Collection fetching and scss colors personalisation

pages/collection/_handle/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <section class="hero is-primary" style="margin-bottom: 2rem">
+      <div
+        class="hero-body"
+        :style="{
+          backgroundImage: `url(${collection.image.src})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover'
+        }"
+      >
+        <div class="container has-text-centered">
+          <h1 class="title">
+            {{ collection.title }}
+          </h1>
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="columns">
+        <div class="column">
+          <p
+            class="subtitle"
+            v-html="collection.descriptionHtml"
+          />
+        </div>
+      </div>
+      <div class="columns">
+        <div class="column">
+          <product-card-list
+            :products="collection.products"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductCardList from '../../../components/productCardList'
+export default {
+  layout: 'noContainer',
+  components: {
+    ProductCardList
+  },
+  asyncData ({ $shopify, params }) {
+    return $shopify.collection.fetchByHandle(params.handle).then((collection) => {
+      return {
+        collection
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+</style>

pages/collection/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -1,14 +1,55 @@
 <template>
   <div class="full-width">
-    <h1>Welcome to my shop</h1>
+    <div class="container">
+      <div class="columns">
+        <div class="column">
+          <h1 class="is-size-2">My home page</h1>
+          <p>ceci est la page d'acceuil, ce texte ne changera pas car c'est une boutique</p>
+        </div>
+      </div>
+    </div>
+    <div
+      v-for="collection in collections"
+      :key="collection.id"
+      class="columns"
+    >
+      <div class="column">
+        <section class="hero is-large is-primary">
+          <div
+            class="hero-body"
+            :style="{
+              backgroundImage: `url(${collection.image.src})`,
+              backgroundPosition: 'center',
+              backgroundSize: 'cover'
+            }"
+          >
+            <div class="container">
+              <h1 class="title">
+                {{ collection.title }}
+              </h1>
+              <h2 class="subtitle">
+                {{ collection.description }}
+              </h2>
+              <nuxt-link :to="`/collection/${collection.handle}`" class="button is-primary">
+                <span>See</span>
+              </nuxt-link>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  async asyncData ({ $shopify }) {
-    const products = await $shopify.product.fetchAll()
-    return { products }
+  layout: 'noContainer',
+  asyncData ({ $shopify }) {
+    return $shopify.collection.fetchAllWithProducts().then((collections) => {
+      return {
+        collections
+      }
+    })
   },
   beforeUpdate () {
     if (typeof this.$store.state.checkout.id === 'undefined') {
@@ -24,4 +65,8 @@ export default {
   .full-width {
     width: 100%;
   }
+
+  a {
+    color: white;
+  }
 </style>

pages/products/_handle/index.vue

@@ -38,9 +38,10 @@
             </div>
             <div class="columns">
               <div class="column">
-                <p class="subtitle">
-                  {{ product.description }}
-                </p>
+                <p
+                  class="subtitle"
+                  v-html="product.descriptionHtml"
+                />
               </div>
             </div>
             <div class="columns">

pages/products/index.vue

@@ -1,51 +1,20 @@
 <template>
-  <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>
-
-          <div class="content">
-            <b-button
-              tag="router-link"
-              :to="'/products/' + product.handle"
-              type="is-primary"
-            >
-              See
-            </b-button>
-            <b-button
-              type="is-primary"
-              icon-left="cart"
-              @click="addToCart(product.variants[0].id, 1)"
-            >
-              Buy
-            </b-button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    <product-card-list
+      :products="products"
+    />
   </div>
 </template>
 
 <script>
 import cartMixins from '../../mixins/cartMixins'
+import ProductCardList from '../../components/productCardList'
 
 export default {
   name: 'Index',
+  components: {
+    ProductCardList
+  },
   mixins: [
     cartMixins
   ],