Merge branch 'master' of https://github.com/Thomas-Philippot/my-shop

assets/bulma.scss

@@ -40,13 +40,19 @@ p.footer-link > a:hover {
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
 
-
+.is-shadow {
+  text-shadow: 2px 2px 4px #000000;
+}
 
 // My custom theme
 .nuxt-link-exact-active {
   border-bottom: 2px solid $primary;
 }
 
+.card {
+  border-radius: .6rem;
+  overflow: hidden;
+}
 
 ul {
   @extend .list;

components/BlogCardList.vue

@@ -1,55 +1,57 @@
 <template>
-  <div class="columns">
+  <div class="columns is-multiline">
-    <div v-for="article in articles" :key="article.id" class="column is-one-third">
+    <div
-      <div class="card rounded">
+      v-for="article in blog.articles.edges"
+      :key="article.node.id"
+      class="column is-full-mobile is-half-tablet is-one-third-desktop"
+    >
+      <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
+        <div class="card">
           <div class="card-image">
-          <figure class="image is-4by3">
+            <figure v-if="article.node.image !== null">
-            <img :src="article.image.src" :alt="product.images[0].altText">
+              <img
+                :src="article.node.image.originalSrc"
+                :alt="article.node.image.altText"
+              >
+            </figure>
+            <figure v-else class="is-flex">
+              <img
+                src="/img/no-image.jpg"
+                alt="image-not-found"
+              >
             </figure>
           </div>
           <div class="card-content">
-          <div class="media">
-            <div class="media-content">
             <p class="title is-4">
-                {{ product.title }}
+              {{ article.node.title }}
             </p>
-              <p class="subtitle is-6">
+            <p class="subtitle is-6">{{ article.node.excerpt }}</p>
-                {{ product.variants[0].price }} €
-              </p>
-            </div>
-          </div>
-
             <div class="content">
-            <b-button
+              <b-taglist class="is-marginless">
-              tag="router-link"
+                <b-tag
-              :to="'/products/' + product.handle"
+                  v-for="tag in article.node.tags"
+                  :key="tag"
+                  href="#"
                   type="is-primary"
                 >
-              See
+                  #{{ tag }}
-            </b-button>
+                </b-tag>
-            <b-button
+              </b-taglist>
-              type="is-primary"
+              <time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
-              icon-left="cart"
-              @click="addToCart(product.variants[0].id, 1)"
-            >
-              Buy
-            </b-button>
             </div>
           </div>
         </div>
+      </nuxt-link>
     </div>
   </div>
 </template>
 
 <script>
-import cartMixins from '../mixins/cartMixins'
-
 export default {
-  name: 'ProductCardList',
+  name: 'BlogCardList',
-  mixins: [cartMixins],
   props: {
-    products: {
+    blog: {
-      type: Array,
+      type: Object,
       required: true
     }
   }
@@ -57,5 +59,13 @@ export default {
 </script>
 
 <style scoped>
-
+  .subtitle {
+    height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 1rem;
+  }
+  figure.is-flex {
+    justify-content: center;
+  }
 </style>

components/PolicyPage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <h1>{{ policy.title }}</h1>
+      <div v-html="policy.body" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PolicyPage',
+  props: {
+    policy: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/ProductCardList.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="columns">
+  <div class="columns is-multiline">
-    <div v-for="product in products" :key="product.id" class="column is-one-third">
+    <div v-for="product in products" :key="product.id" class="column is-half-tablet is-one-third-widescreen">
+      <nuxt-link :to="`/products/${product.handle}`">
         <div class="card">
           <div class="card-image">
-          <figure class="image is-4by3">
+            <figure class="image is-4by3" v-if="product.images[0].src !== null">
               <img :src="product.images[0].src" :alt="product.images[0].altText">
             </figure>
+            <figure v-else class="is-flex">
+              <img
+                src="/img/no-image.jpg"
+                alt="image-not-found"
+              >
+            </figure>
           </div>
           <div class="card-content">
             <div class="media">
@@ -18,15 +25,7 @@
                 </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"
@@ -37,6 +36,7 @@
             </div>
           </div>
         </div>
+      </nuxt-link>
     </div>
   </div>
 </template>

components/TheFooter.vue

@@ -3,10 +3,8 @@
     <div class="content has-text-light">
       <div class="columns">
         <div class="column has-text-centered">
-          <p>
+          <p class="footer-link">
-            <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+            Made with ❤️, 🍺 and ☕ by <a href="https://github.com/thomas-philippot"> Thomas Philippot</a>
-            <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
-            . The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
           </p>
         </div>
       </div>
@@ -15,23 +13,26 @@
           <p class="footer-link-title">
             Newsletter
           </p>
-          <p
-            v-for="i in 5"
-            :key="i"
-            class="footer-link"
-          >
-            <a href="">link {{ i }}</a>
-          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
             Policy
           </p>
           <p class="footer-link">
-            <nuxt-link :to="`/policy/${privacyPolicy.handle}`">
+            <nuxt-link to="/policy/privacy-policy">
               Privacy Policy
             </nuxt-link>
           </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/refund-policy">
+              Refund Policy
+            </nuxt-link>
+          </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/terms-of-service">
+              Terms of service
+            </nuxt-link>
+          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
@@ -45,12 +46,7 @@
 
 <script>
 export default {
-  name: 'TheFooter',
+  name: 'TheFooter'
-  computed: {
-    privacyPolicy () {
-      return this.$store.state.shop.privacyPolicy
-    }
-  }
 }
 </script>
 

layouts/default.vue

@@ -17,13 +17,6 @@ export default {
   components: {
     TheFooter,
     TheNavbar
-  },
-  asyncData ({ $shopify }) {
-    return $shopify.collection.fetchAllWithProducts().then((collections) => {
-      return {
-        collections
-      }
-    })
   }
 }
 </script>

layouts/noContainer.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="app">
+    <the-navbar />
+    <div id="content-wrap">
+      <nuxt />
+    </div>
+    <the-footer />
+  </div>
+</template>
+
+<style>
+</style>
+<script>
+import TheNavbar from '../components/TheNavbar'
+import TheFooter from '../components/TheFooter'
+export default {
+  components: {
+    TheFooter,
+    TheNavbar
+  }
+}
+</script>
+
+<style>
+  #content-wrap {
+    min-height: 100vh;
+  }
+</style>

nuxt.config.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const axios = require("axios")
 export default {
   mode: 'universal',
   /*
@@ -26,7 +27,10 @@ export default {
   /*
   ** Plugins to load before mounting the App
   */
-  plugins: [{ src: '~/plugins/localStorage.js', ssr: false }],
+  plugins: [
+    { src: '~/plugins/localStorage.js', ssr: false },
+    { src: '~/plugins/moment' }
+  ],
   /*
   ** Nuxt.js dev-modules
   */
@@ -58,6 +62,68 @@ export default {
     domain: process.env.DOMAIN, // your shopify domain
     storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
   },
+  generate: {
+    routes () {
+      return axios({
+        url: process.env.API_URL,
+        method: 'POST',
+        headers: {
+          'X-Shopify-Storefront-Access-Token': process.env.STOREFRONT_ACCESS_TOKEN,
+          Accept: 'application/json'
+        },
+        data: {
+          query: `query {
+                    blogs (first: 250) {
+                      edges {
+                        node {
+                          handle,
+                          articles (first: 250) {
+                            edges {
+                              node {
+                                handle
+                              }
+                            }
+                          }
+                        }
+                      }
+                    },
+                    products (first: 250) {
+                      edges {
+                        node {
+                          handle
+                        }
+                      }
+                    },
+                    collections (first: 250) {
+                      edges {
+                        node {
+                          handle
+                        }
+                      }
+                    }
+                  }`
+        }
+      }).then((response) => {
+        const res = []
+        const blogRoutes = response.data.data.blogs.edges
+        const productRoutes = response.data.data.products.edges
+        const CollectionRoutes = response.data.data.collections.edges
+        blogRoutes.forEach((blog) => {
+          res.push('/blog/' + blog.node.handle)
+          blog.node.articles.edges.forEach((article) => {
+            res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)
+          })
+        })
+        productRoutes.forEach((product) => {
+          res.push('/products/' + product.node.handle)
+        })
+        CollectionRoutes.forEach((collection) => {
+          res.push('/collection/' + collection.node.handle)
+        })
+        return res
+      })
+    }
+  },
   /*
   ** Build configuration
   */

package-lock.json

@@ -8167,6 +8167,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12475,8 +12480,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -12494,13 +12498,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -12513,18 +12515,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -12627,8 +12626,7 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -12638,7 +12636,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -12651,20 +12648,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -12681,7 +12675,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -12762,8 +12755,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -12773,7 +12765,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12849,8 +12840,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12880,7 +12870,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",
@@ -12898,7 +12887,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12937,13 +12925,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true,
+              "bundled": true
-              "optional": true
             }
           }
         },

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.9.5",
     "dotenv": "^8.2.0",
+    "moment": "^2.24.0",
     "node-sass": "^4.13.1",
     "nuxt": "^2.11.0",
     "nuxt-buefy": "^0.3.23",

pages/basket/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div v-if="checkout.lineItems.length === 0">
       <div class="column">
         <h1 class="is-size-1">
@@ -11,12 +11,14 @@
       <div class="columns">
         <div class="column">
           <h1 class="is-size-1">
-            Panier
+            Cart
           </h1>
         </div>
       </div>
       <div class="columns">
         <div class="column">
+          <div class="card">
+            <div class="card-content">
               <b-table :data="checkout.lineItems">
                 <template slot-scope="props">
                   <b-table-column field="image" label="Image">
@@ -60,6 +62,8 @@
               </div>
             </div>
           </div>
+        </div>
+      </div>
       <b-button
         type="is-primary"
         @click="confirmCheckout"

pages/blog/_handle/article/_articleHandle/index.vue

@@ -1,29 +1,59 @@
 <template>
+  <div>
+    <section class="hero is-info is-medium is-bold">
+      <div
+        class="hero-body"
+        :style="{
+          backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover'
+        }"
+      />
+    </section>
+    <section class="articles section">
       <div class="container">
-    Article {{ params }}
+        <div class="card article">
-    {{ article }}
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content has-text-centered">
+                <p class="title article-title">{{ article.title }}</p>
+                <div class="tags has-addons level-item">
+                  <span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
+                  <span class="tag is-rounded">{{ $moment(article.publishedAt, $moment.ISO_8601).format('DD MMMM Y') }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="content article-body">
+              <p v-html="article.contentHtml" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Index',
+  layout: 'noContainer',
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
       data: {
         query: `query {
                   blogByHandle (handle:"${params.handle}") {
-                    title,
-                    handle
                     articleByHandle (handle: "${params.articleHandle}") {
                       title,
+                      publishedAt,
                       contentHtml
                       authorV2 {
-                        bio,
+                        name
-                        firstName,
-                        lastName
                       },
+                      seo {
+                        title,
+                        description
+                      }
                       image (maxWidth: 2000) {
                         altText,
                         originalSrc
@@ -37,9 +67,41 @@ export default {
         article: response.data.data.blogByHandle.articleByHandle
       }
     })
+  },
+  head () {
+    return {
+      title: this.article.seo.title,
+      meta: [
+        { hid: 'description', name: 'description', content: this.article.seo.description }
+      ]
+    }
   }
 }
 </script>
 
 <style scoped>
+  .articles {
+    margin: -200px 0 5rem;
+  }
+  .articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+  }
+  .media-content {
+    margin-top: 3rem;
+  }
+  .article {
+    margin-top: 6rem;
+  }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
+  .article-body {
+    line-height: 1.4;
+  }
+  .hero-body {
+    height: 500px;
+  }
 </style>

pages/blog/_handle/index.vue

@@ -1,57 +1,27 @@
 <template>
   <div class="container">
+    <div class="columns">
+      <div class="column">
         <h1>{{ blog.title }}</h1>
-    <div class="columns is-multiline">
-      <div
-        v-for="article in blog.articles.edges"
-        :key="article.node.id"
-        class="column is-full-mobile is-half-tablet is-one-third-desktop"
-      >
-        <nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
-          <div class="card">
-            <div class="card-image">
-              <figure v-if="article.node.image !== null">
-                <img
-                  :src="article.node.image.originalSrc"
-                  :alt="article.node.image.altText"
-                >
-              </figure>
-              <figure v-else class="is-flex">
-                <img
-                  src="/img/no-image.jpg"
-                  alt="image-not-found"
-                >
-              </figure>
-            </div>
-            <div class="card-content">
-              <p class="title is-4">
-                {{ article.node.title }}
-              </p>
-              <p class="subtitle is-6">{{ article.node.excerpt }}</p>
-              <div class="content">
-                <b-taglist class="is-marginless">
-                  <b-tag
-                    v-for="tag in article.node.tags"
-                    :key="tag"
-                    href="#"
-                    type="is-primary"
-                  >
-                    #{{ tag }}
-                  </b-tag>
-                </b-taglist>
-                <time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
       </div>
     </div>
-          </div>
+    <div class="columns">
-        </nuxt-link>
+      <div class="column">
+        <blog-card-list
+          :blog="blog"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import BlogCardList from '../../../components/BlogCardList'
 export default {
   name: 'Index',
+  components: {
+    BlogCardList
+  },
   asyncData ({ app, params }) {
     return app.$axios({
       method: 'POST',
@@ -84,18 +54,14 @@ export default {
         blog: response.data.data.blogByHandle
       }
     })
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + this.blog.title
+    }
   }
 }
 </script>
 
 <style scoped>
-  .subtitle {
-    height: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 1rem;
-  }
-  figure.is-flex {
-    justify-content: center;
-  }
 </style>

pages/collection/_handle/index.vue

@@ -1,43 +1,43 @@
 <template>
   <div>
-    <section class="hero is-primary" style="margin-bottom: 2rem">
+    <section class="hero is-medium is-info" style="margin-bottom: 2rem">
       <div
         class="hero-body"
         :style="{
-          backgroundImage: `url(${collection.image.src})`,
+          backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
           backgroundPosition: 'center',
           backgroundSize: 'cover'
         }"
       >
         <div class="container has-text-centered">
-          <h1 class="title">
+          <h1 class="title is-shadow">
             {{ collection.title }}
           </h1>
         </div>
       </div>
     </section>
+    <div class="container">
+      <section class="articles section">
+        <div class="card article">
+          <div class="card-content">
+            <div class="content article-body">
+              <p v-html="collection.descriptionHtml" />
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section">
         <div class="container">
           <div class="columns">
             <div class="column">
-          <p
+              <h2 class="is-size-4">Products in this collection</h2>
-            class="subtitle"
-            v-html="collection.descriptionHtml"
-          />
             </div>
           </div>
-      <hr class="hr" />
-      <div class="columns">
-        <div class="column">
-          <h2 class="is-2">Products in this collection</h2>
-        </div>
-      </div>
-      <div class="columns">
-        <div class="column">
           <product-card-list
             :products="collection.products"
           />
         </div>
-      </div>
+      </section>
     </div>
   </div>
 </template>
@@ -60,4 +60,31 @@ export default {
 </script>
 
 <style scoped>
+  .container {
+    margin-bottom: 2.5rem;
+  }
+  .articles {
+    margin: -200px 0 5rem;
+  }
+  .articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+  }
+  .media-content {
+    margin-top: 3rem;
+  }
+  .article {
+    margin-top: 6rem;
+  }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
+  .article-body {
+    line-height: 1.4;
+  }
+  .hero-body {
+    height: 500px;
+  }
 </style>

pages/index.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="full-width">
+    <section class="section">
       <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>
+            <p>This website is for developpement purpose, please don't try to buy something here.</p>
           </div>
         </div>
       </div>
+    </section>
     <div
       v-for="collection in collections"
       :key="collection.id"
-      class="columns"
+      class="columns collection-banner"
     >
       <div class="column">
-        <section class="hero is-large is-primary">
+        <nuxt-link :to="`/collection/${collection.handle}`">
+          <section class="hero is-large is-info">
             <div
               class="hero-body"
               :style="{
-              backgroundImage: `url(${collection.image.src})`,
+                backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
                 backgroundPosition: 'center',
                 backgroundSize: 'cover'
               }"
             >
               <div class="container">
-              <h1 class="title">
+                <h1 class="title is-shadow">
                   {{ 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>
+        </nuxt-link>
       </div>
     </div>
   </div>
@@ -43,6 +41,7 @@
 
 <script>
 export default {
+  layout: 'noContainer',
   asyncData ({ app }) {
     return app.$axios({
       method: 'POST',
@@ -50,16 +49,7 @@ export default {
         query: `query {
               shop {
                 name,
-                description,
+                description
-                privacyPolicy {
-                  handle
-                },
-                termsOfService {
-                  handle
-                },
-                refundPolicy {
-                  handle
-                }
               },
               blogs(first: 10) {
                 edges {
@@ -100,7 +90,7 @@ export default {
   },
   head () {
     return {
-      title: 'Home Page',
+      title: this.shop.name,
       meta: [
         { hid: 'description', name: 'description', content: this.description }
       ]
@@ -110,7 +100,8 @@ export default {
 </script>
 
 <style>
-.card-image {
+.collection-banner {
-  height: 20rem;
+  margin-bottom: 2rem;
+  margin-top: 2rem !important;
 }
 </style>

pages/policy/_handle/index.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="container">
-    <h1>Policy id</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Index'
-}
-</script>
-
-<style scoped>
-
-</style>

pages/policy/privacy-policy/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    privacyPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.privacyPolicy
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Privacy Policy'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/policy/refund-policy/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    refundPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.refundPolicy
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Refund Policy'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/policy/terms-of-service/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    termsOfService {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.termsOfService
+      }
+    })
+  },
+  head () {
+    return {
+      title: 'Terms of services'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/products/_handle/index.vue

@@ -51,7 +51,7 @@
                 </p>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns is-flex">
               <div class="column is-1">
                 <p>Quantity</p>
               </div>
@@ -94,6 +94,14 @@ export default {
       product: {},
       quantity: 1
     }
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + this.product.title,
+      meta: [
+        { hid: 'description', name: 'description', content: this.product.description }
+      ]
+    }
   }
 }
 </script>
@@ -105,4 +113,7 @@ export default {
   .al img {
     filter: grayscale(100%);
   }
+  .columns.is-flex {
+    align-items: center;
+  }
 </style>

pages/products/index.vue

@@ -26,6 +26,11 @@ export default {
     products () {
       return this.$store.state.products
     }
+  },
+  head () {
+    return {
+      title: this.$store.state.shop.name + ' | ' + 'Products'
+    }
   }
 }
 </script>

plugins/moment.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import moment from 'moment'
+
+moment.locale('fr')
+Vue.use(moment)
+
+export default ({ app }, inject) => {
+  app.$moment = moment
+  inject('moment', moment)
+}