Collection fetching and scss colors personalisation

assets/bulma.scss

@@ -0,0 +1,69 @@
+// Import Bulma's core
+@import "~bulma/sass/utilities/_all";
+
+// Set your colors
+$primary: #00d1b2;
+$primary-invert: findColorInvert($primary);
+$twitter: #4099FF;
+$twitter-invert: findColorInvert($twitter);
+
+// Setup $colors to use as bulma classes (e.g. 'is-twitter')
+$colors: (
+  "white": ($white, $black),
+  "black": ($black, $white),
+  "light": ($light, $light-invert),
+  "dark": ($dark, $dark-invert),
+  "primary": ($primary, $primary-invert),
+  "info": ($info, $info-invert),
+  "success": ($success, $success-invert),
+  "warning": ($warning, $warning-invert),
+  "danger": ($danger, $danger-invert),
+  "twitter": ($twitter, $twitter-invert)
+);
+
+// Links
+$link: $primary;
+$link-invert: $primary-invert;
+$link-focus-border: $primary;
+
+// Import Bulma and Buefy styles
+@import "~bulma";
+@import "~buefy/src/scss/buefy";
+
+
+.nuxt-link-exact-active {
+  border-bottom: 2px solid $primary;
+}
+
+ul {
+  @extend .list;
+  @extend .is-hoverable;
+}
+
+li {
+  @extend .list-item
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2.5rem;
+}
+
+h3 {
+  font-size: 2rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}

components/TheNavbar.vue

@@ -9,10 +9,16 @@
       </b-navbar-item>
     </template>
     <template slot="start">
-      <b-navbar-item tag="router-link" to="/products">
+      <b-navbar-item
+        tag="router-link"
+        to="/products"
+      >
         Products
       </b-navbar-item>
-      <b-navbar-item tag="router-link" to="/blog">
+      <b-navbar-item
+        tag="router-link"
+        to="/blog"
+      >
         Blog
       </b-navbar-item>
     </template>

components/productCardList.vue

@@ -0,0 +1,61 @@
+<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>
+</template>
+
+<script>
+import cartMixins from '../mixins/cartMixins'
+
+export default {
+  name: 'ProductCardList',
+  mixins: [cartMixins],
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

layouts/noContainer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <the-navbar />
+    <div>
+      <nuxt />
+    </div>
+  </div>
+</template>
+
+<style>
+</style>
+<script>
+import TheNavbar from '../components/TheNavbar'
+export default {
+  components: { TheNavbar }
+}
+</script>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>

nuxt.config.js

@@ -23,6 +23,7 @@ export default {
   ** Global CSS
   */
   css: [
+    '~/assets/bulma.scss'
   ],
   /*
   ** Plugins to load before mounting the App

package.json

@@ -13,9 +13,11 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.9.5",
+    "node-sass": "^4.13.1",
     "nuxt": "^2.11.0",
     "nuxt-buefy": "^0.3.23",
     "nuxt-shopify": "^1.7.1",
+    "sass-loader": "^8.0.2",
     "vuex-persistedstate": "^2.7.1"
   },
   "devDependencies": {

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
   ],