From c00452f3d04c3415da5b0eb12392d8a2b2300461 Mon Sep 17 00:00:00 2001
From: thomas <tp456@hotmail.fr>
Date: Thu, 27 Feb 2020 20:22:03 +0100
Subject: [PATCH] fetching blogs and articles

---
 components/BlogCardList.vue                   | 61 +++++++++++++++++++
 ...roductCardList.vue => ProductCardList.vue} |  0
 components/TheNavbar.vue                      | 33 ++++++----
 layouts/default.vue                           |  9 ++-
 nuxt.config.js                                |  2 +-
 pages/blog/index.vue                          | 14 ++++-
 pages/collection/_handle/index.vue            |  8 ++-
 pages/index.vue                               | 23 ++++++-
 pages/products/index.vue                      |  2 +-
 store/index.js                                |  4 ++
 10 files changed, 136 insertions(+), 20 deletions(-)
 create mode 100644 components/BlogCardList.vue
 rename components/{productCardList.vue => ProductCardList.vue} (100%)

diff --git a/components/BlogCardList.vue b/components/BlogCardList.vue
new file mode 100644
index 0000000..90bd435
--- /dev/null
+++ b/components/BlogCardList.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="columns">
+    <div v-for="article in articles" :key="article.id" class="column is-one-third">
+      <div class="card">
+        <div class="card-image">
+          <figure class="image is-4by3">
+            <img :src="article.image.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>
diff --git a/components/productCardList.vue b/components/ProductCardList.vue
similarity index 100%
rename from components/productCardList.vue
rename to components/ProductCardList.vue
diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
index 3760bee..de14def 100644
--- a/components/TheNavbar.vue
+++ b/components/TheNavbar.vue
@@ -1,7 +1,7 @@
 <template>
   <b-navbar>
     <template slot="brand">
-      <b-navbar-item tag="router-link" to="/">
+      <b-navbar-item tag="a" href="/">
         <img
           src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
           alt="Lightweight UI components for Vue.js based on Bulma"
@@ -10,17 +10,27 @@
     </template>
     <template slot="start">
       <b-navbar-item
-        tag="router-link"
+        tag="nuxt-link"
         to="/products"
       >
         Products
       </b-navbar-item>
-      <b-navbar-item
-        tag="router-link"
-        to="/blog"
-      >
-        Blog
-      </b-navbar-item>
+      <b-navbar-dropdown label="Blog">
+        <b-navbar-item
+          tag="a"
+          href="/blog"
+        >
+          All
+        </b-navbar-item>
+        <b-navbar-item
+          v-for="blog in blogs"
+          :key="blog.id"
+          tag="a"
+          :href="`/blog/${blog.handle}`"
+        >
+          {{ blog.title }}
+        </b-navbar-item>
+      </b-navbar-dropdown>
     </template>
 
     <template slot="end">
@@ -41,13 +51,12 @@
 <script>
 export default {
   name: 'TheNavbar',
-  data () {
-    return {
-    }
-  },
   computed: {
     cardCount () {
       return this.$store.state.checkout.lineItems.length
+    },
+    blogs () {
+      return this.$store.state.blogs
     }
   },
   methods: {
diff --git a/layouts/default.vue b/layouts/default.vue
index 8bee20c..0aa978d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,7 +12,14 @@
 <script>
 import TheNavbar from '../components/TheNavbar'
 export default {
-  components: { TheNavbar }
+  components: { TheNavbar },
+  asyncData ({ $shopify }) {
+    return $shopify.collection.fetchAllWithProducts().then((collections) => {
+      return {
+        collections
+      }
+    })
+  }
 }
 </script>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 7ca7f79..e22266f 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -18,7 +18,7 @@ export default {
   /*
   ** Customize the progress-bar color
   */
-  loading: { color: '#fff' },
+  loading: { color: '#00d1b2' },
   /*
   ** Global CSS
   */
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
index 18fdd91..271c3a6 100644
--- a/pages/blog/index.vue
+++ b/pages/blog/index.vue
@@ -1,12 +1,24 @@
 <template>
   <div>
     <h1>Blog</h1>
+    {{ articles }}
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Index'
+  name: 'Index',
+  asyncData ({ app }) {
+    return app.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/articles.json', {
+      headers: {
+        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
+      }
+    }).then((response) => {
+      return {
+        articles: response.data
+      }
+    })
+  }
 }
 </script>
 
diff --git a/pages/collection/_handle/index.vue b/pages/collection/_handle/index.vue
index 2e8d5b4..706aede 100644
--- a/pages/collection/_handle/index.vue
+++ b/pages/collection/_handle/index.vue
@@ -25,6 +25,12 @@
           />
         </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
@@ -37,7 +43,7 @@
 </template>
 
 <script>
-import ProductCardList from '../../../components/productCardList'
+import ProductCardList from '../../../components/ProductCardList'
 export default {
   layout: 'noContainer',
   components: {
diff --git a/pages/index.vue b/pages/index.vue
index 808f15a..b204923 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -44,13 +44,30 @@
 <script>
 export default {
   layout: 'noContainer',
-  asyncData ({ $shopify }) {
-    return $shopify.collection.fetchAllWithProducts().then((collections) => {
+  asyncData ({ app }) {
+    return app.$axios.get('https://home-deco35.myshopify.com/admin/api/2020-01/blogs.json', {
+      headers: {
+        'X-Shopify-Access-Token': '99804a726edfba831c6671c3b66f413a'
+      }
+    }).then((response) => {
       return {
-        collections
+        blogs: response.data.blogs
       }
     })
   },
+  data () {
+    return {
+      collections: []
+    }
+  },
+  created () {
+    this.$shopify.collection.fetchAllWithProducts().then((collections) => {
+      this.collections = collections
+    })
+    this.$store.commit('setBlogs', this.blogs)
+    // eslint-disable-next-line no-console
+    console.log('Blog: ', this.blogs)
+  },
   beforeUpdate () {
     if (typeof this.$store.state.checkout.id === 'undefined') {
       this.$shopify.checkout.create().then((checkout) => {
diff --git a/pages/products/index.vue b/pages/products/index.vue
index 8d284e4..ef33978 100644
--- a/pages/products/index.vue
+++ b/pages/products/index.vue
@@ -8,7 +8,7 @@
 
 <script>
 import cartMixins from '../../mixins/cartMixins'
-import ProductCardList from '../../components/productCardList'
+import ProductCardList from '../../components/ProductCardList'
 
 export default {
   name: 'Index',
diff --git a/store/index.js b/store/index.js
index e2d9ec0..bce3aa0 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,5 +1,6 @@
 export const state = () => ({
   products: [],
+  blogs: [],
   checkout: {
     lineItems: []
   }
@@ -11,5 +12,8 @@ export const mutations = {
   },
   setCheckout (state, data) {
     state.checkout = data
+  },
+  setBlogs (state, data) {
+    state.blogs = data
   }
 }