tphilippot/shopify-storefront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

message

Browse Source
This commit is contained in:
Thomas
2020-02-28 12:58:40 +01:00
parent d7403f7be9
commit 5da7650b6b
8 changed files with 113 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bulma.scss
Vendored
+10
View File
@@ -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
+58
View File
@@ -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
+11 -3
View File
@@ -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
+8 -6
View File
@@ -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
+3 -5
View File
@@ -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
storefrontAccessToken: '63f6a2f53bbc44bfc9e40c911bb17a7e'// your shopify storefront access token
domain: process.env.DOMAIN, // your shopify domain
storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
},
/*
** Build configuration
package-lock.json
Generated
+5
View File
@@ -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
+1
View File
@@ -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
+17 -10
View File
@@ -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
console.log('Blog: ', this.blogs)
this.getPolicy()
},
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>