message

assets/bulma.scss

@@ -21,11 +21,21 @@ $colors: (
   "twitter": ($twitter, $twitter-invert)
 );
 
+// background
+$body-background-color: $light;
+
 // Links
 $link: $primary;
 $link-invert: $primary-invert;
 $link-focus-border: $primary;
 
+// Footer
+$footer-padding: 4rem 8rem 7rem;
+$footer-background-color: $dark;
+p.footer-link > a:hover {
+    color: $light
+}
+
 // Import Bulma and Buefy styles
 @import "~bulma";
 @import "~buefy/src/scss/buefy";

components/TheFooter.vue

@@ -0,0 +1,58 @@
+<template>
+  <footer class="footer">
+    <div class="content has-text-light">
+      <div class="columns">
+        <div class="column has-text-centered">
+          <p>
+            <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+            <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>
+      <div class="columns">
+        <div class="column is-4">
+          <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>
+        </div>
+        <div class="column is-4">
+          <p class="is-size-5">
+            FAQ
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'TheFooter'
+}
+</script>
+
+<style scoped>
+  .footer-link-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .footer-link {
+    margin-top: .5rem;
+    margin-bottom: 0 !important;
+  }
+
+</style>

layouts/default.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="app">
     <the-navbar />
-    <div class="container" style="margin-top: 2em">
+    <div id="content-wrap" class="container" style="margin-top: 2em">
       <nuxt />
     </div>
+    <the-footer />
   </div>
 </template>
 
@@ -11,8 +12,12 @@
 </style>
 <script>
 import TheNavbar from '../components/TheNavbar'
+import TheFooter from '../components/TheFooter'
 export default {
-  components: { TheNavbar },
+  components: {
+    TheFooter,
+    TheNavbar
+  },
   asyncData ({ $shopify }) {
     return $shopify.collection.fetchAllWithProducts().then((collections) => {
       return {
@@ -27,4 +32,7 @@ export default {
   body {
     margin: 0;
   }
+  #content-wrap {
+    min-height: 100vh;
+  }
 </style>

layouts/noContainer.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="app">
     <the-navbar />
-    <div>
+    <div id="content-wrap">
       <nuxt />
     </div>
+    <the-footer />
   </div>
 </template>
 
@@ -11,13 +12,14 @@
 </style>
 <script>
 import TheNavbar from '../components/TheNavbar'
+import TheFooter from '../components/TheFooter'
 export default {
-  components: { TheNavbar }
+  components: {
+    TheFooter,
+    TheNavbar
+  }
 }
 </script>
 
 <style>
-  body {
-    margin: 0;
-  }
 </style>

nuxt.config.js

@@ -1,4 +1,4 @@
-
+require('dotenv').config()
 export default {
   mode: 'universal',
   /*
@@ -49,11 +49,9 @@ export default {
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
-  axios: {
-  },
   shopify: {
-    domain: 'home-deco35.myshopify.com/', // your shopify domain
+    domain: process.env.DOMAIN, // your shopify domain
-    storefrontAccessToken: '63f6a2f53bbc44bfc9e40c911bb17a7e'// your shopify storefront access token
+    storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
   },
   /*
   ** Build configuration

package-lock.json

@@ -4893,6 +4893,11 @@
         "is-obj": "^1.0.0"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",

package.json

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

pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="full-width">
     <div class="container">
+      {{ policy }}
       <div class="columns">
         <div class="column">
           <h1 class="is-size-2">My home page</h1>
@@ -47,7 +48,8 @@ export default {
   asyncData ({ app }) {
     return app.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/blogs.json', {
       headers: {
-        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
+        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a',
+        'Access-Control-Allow-Origin': '*'
       }
     }).then((response) => {
       return {
@@ -57,7 +59,8 @@ export default {
   },
   data () {
     return {
-      collections: []
+      collections: [],
+      policy: []
     }
   },
   created () {
@@ -65,8 +68,7 @@ export default {
       this.collections = collections
     })
     this.$store.commit('setBlogs', this.blogs)
-    // eslint-disable-next-line no-console
+    this.getPolicy()
-    console.log('Blog: ', this.blogs)
   },
   beforeUpdate () {
     if (typeof this.$store.state.checkout.id === 'undefined') {
@@ -74,16 +76,21 @@ export default {
         this.$store.commit('setCheckout', checkout)
       })
     }
+  },
+  methods: {
+    getPolicy () {
+      this.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/blogs.json', {
+        headers: {
+          'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
+        }
+      }).then((response) => {
+        this.policy = response.data
+      })
+    }
   }
 }
 </script>
 
 <style>
-  .full-width {
-    width: 100%;
-  }
 
-  a {
-    color: white;
-  }
 </style>