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

policy pages added

Browse Source
This commit is contained in:
thomas
2020-03-02 20:25:29 +01:00
parent 560363e577
commit dceffdca5b
13 changed files with 227 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bulma.scss
Vendored
+3 -1
View File
@@ -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
+24
View File
@@ -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
+8 -4
View File
@@ -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
+10
View File
@@ -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
+1 -3
View File
@@ -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
+7 -3
View File
@@ -10,8 +10,8 @@
}"
/>
</section>
<section class="articles section">
<div class="container">
<section class="articles">
<div class="card article">
<div class="card-content">
<div class="media">
@@ -28,8 +28,8 @@
</div>
</div>
</div>
</section>
</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
+8
View File
@@ -1,10 +1,18 @@
<template>
<div class="container">
<div class="columns">
<div class="column">
<h1>{{ blog.title }}</h1>
</div>
</div>
<div class="columns">
<div class="column">
<blog-card-list
:blog="blog"
/>
</div>
</div>
</div>
</template>
<script>
pages/collection/_handle/index.vue
+13 -5
View File
@@ -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,6 +26,8 @@
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="is-size-4">Products in this collection</h2>
@@ -35,6 +37,8 @@
:products="collection.products"
/>
</div>
</section>
</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
+11 -12
View File
@@ -1,5 +1,6 @@
<template>
<div class="full-width">
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
@@ -8,34 +9,31 @@
</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>
@@ -102,7 +100,8 @@ export default {
</script>
<style>
.card-image {
height: 20rem;
.collection-banner {
margin-bottom: 2rem;
margin-top: 2rem !important;
}
</style>
pages/policy/privacy-policy/index.vue
+27 -2
View File
@@ -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
+40
View File
@@ -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
+40
View File
@@ -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
+4 -1
View File
@@ -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>