policy pages added

assets/bulma.scss

@@ -40,7 +40,9 @@ 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 {

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

@@ -4,9 +4,15 @@
       <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">
@@ -51,7 +57,5 @@ export default {
 </script>
 
 <style scoped>
-.card-image {
+
-  height: 22rem;
-}
 </style>

components/TheFooter.vue

@@ -23,6 +23,16 @@
               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">

nuxt.config.js

@@ -104,12 +104,10 @@ export default {
                   }`
         }
       }).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
-        // eslint-disable-next-line no-console
-        console.log(blogRoutes)
-        const res = []
         blogRoutes.forEach((blog) => {
           blog.node.articles.edges.forEach((article) => {
             res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)

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

@@ -10,8 +10,8 @@
         }"
       />
     </section>
-    <div class="container">
+    <section class="articles section">
-      <section class="articles">
+      <div class="container">
         <div class="card article">
           <div class="card-content">
             <div class="media">
@@ -28,8 +28,8 @@
             </div>
           </div>
         </div>
-      </section>
+      </div>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -81,9 +81,13 @@ export default {
   .article {
     margin-top: 6rem;
   }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
   .article-body {
     line-height: 1.4;
-    margin: 0 6rem;
   }
   .hero-body {
     height: 500px;

pages/blog/_handle/index.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="container">
-    <h1>{{ blog.title }}</h1>
+    <div class="columns">
-    <blog-card-list
+      <div class="column">
-      :blog="blog"
+        <h1>{{ blog.title }}</h1>
-    />
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <blog-card-list
+          :blog="blog"
+        />
+      </div>
+    </div>
   </div>
 </template>
 

pages/collection/_handle/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div>
-    <section class="hero is-medium 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 class="articles section">
         <div class="card article">
           <div class="card-content">
             <div class="content article-body">
@@ -26,14 +26,18 @@
           </div>
         </div>
       </section>
-      <div class="columns">
+      <section class="section">
-        <div class="column">
+        <div class="container">
-          <h2 class="is-size-4">Products in this collection</h2>
+          <div class="columns">
+            <div class="column">
+              <h2 class="is-size-4">Products in this collection</h2>
+            </div>
+          </div>
+          <product-card-list
+            :products="collection.products"
+          />
         </div>
-      </div>
+      </section>
-      <product-card-list
-        :products="collection.products"
-      />
     </div>
   </div>
 </template>
@@ -72,9 +76,13 @@ export default {
   .article {
     margin-top: 6rem;
   }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
   .article-body {
     line-height: 1.4;
-    margin: 0 6rem;
   }
   .hero-body {
     height: 500px;

pages/index.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="full-width">
-    <div class="container">
+    <section class="section">
-      <div class="columns">
+      <div class="container">
-        <div class="column">
+        <div class="columns">
-          <h1 class="is-size-2">My home page</h1>
+          <div class="column">
-          <p>This website is for developpement purpose, please don't try to buy something here.</p>
+            <h1 class="is-size-2">My home page</h1>
+            <p>This website is for developpement purpose, please don't try to buy something here.</p>
+          </div>
         </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}`">
-          <div
+          <section class="hero is-large is-info">
-            class="hero-body"
+            <div
-            :style="{
+              class="hero-body"
-              backgroundImage: `url(${collection.image.src})`,
+              :style="{
-              backgroundPosition: 'center',
+                backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
-              backgroundSize: 'cover'
+                backgroundPosition: 'center',
-            }"
+                backgroundSize: 'cover'
-          >
+              }"
-            <div class="container">
+            >
-              <h1 class="title">
+              <div class="container">
-                {{ collection.title }}
+                <h1 class="title is-shadow">
-              </h1>
+                  {{ collection.title }}
-              <h2 class="subtitle">
+                </h1>
-                {{ collection.description }}
+              </div>
-              </h2>
-              <nuxt-link :to="`/collection/${collection.handle}`" class="button is-primary">
-                <span>See</span>
-              </nuxt-link>
             </div>
-          </div>
+          </section>
-        </section>
+        </nuxt-link>
       </div>
     </div>
   </div>
@@ -102,7 +100,8 @@ export default {
 </script>
 
 <style>
-.card-image {
+.collection-banner {
-  height: 20rem;
+  margin-bottom: 2rem;
+  margin-top: 2rem !important;
 }
 </style>

pages/policy/privacy-policy/index.vue

@@ -1,12 +1,37 @@
 <template>
   <div class="container">
-    <h1>Privacy Policy</h1>
+    <policy-page
+      :policy="policy"
+    />
   </div>
 </template>
 
 <script>
+import PolicyPage from '../../../components/PolicyPage'
 export default {
-  name: 'Index'
+  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
+      }
+    })
+  }
 }
 </script>
 

pages/policy/refund-policy/index.vue

@@ -0,0 +1,40 @@
+<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
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,40 @@
+<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
+      }
+    })
+  }
+}
+</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>
@@ -105,4 +105,7 @@ export default {
   .al img {
     filter: grayscale(100%);
   }
+  .columns.is-flex {
+    align-items: center;
+  }
 </style>