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

Merge branch 'master' of https://github.com/Thomas-Philippot/my-shop

Browse Source
This commit is contained in:
Thomas
2020-03-06 09:57:17 +01:00
parent 436365b99d 2ee3aba0cf
commit d39982b802
22 changed files with 618 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bulma.scss
Vendored
+7 -1
View File
@@ -40,13 +40,19 @@ 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 {
border-bottom: 2px solid $primary;
}
.card {
border-radius: .6rem;
overflow: hidden;
}
ul {
@extend .list;
components/BlogCardList.vue
+52 -42
View File
@@ -1,55 +1,57 @@
<template>
<div class="columns">
<div v-for="article in articles" :key="article.id" class="column is-one-third">
<div class="card rounded">
<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 class="columns is-multiline">
<div
v-for="article in blog.articles.edges"
:key="article.node.id"
class="column is-full-mobile is-half-tablet is-one-third-desktop"
>
<nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
<div class="card">
<div class="card-image">
<figure v-if="article.node.image !== null">
<img
:src="article.node.image.originalSrc"
:alt="article.node.image.altText"
>
</figure>
<figure v-else class="is-flex">
<img
src="/img/no-image.jpg"
alt="image-not-found"
>
</figure>
</div>
<div class="card-content">
<p class="title is-4">
{{ article.node.title }}
</p>
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
<div class="content">
<b-taglist class="is-marginless">
<b-tag
v-for="tag in article.node.tags"
:key="tag"
href="#"
type="is-primary"
>
#{{ tag }}
</b-tag>
</b-taglist>
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
</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>
</nuxt-link>
</div>
</div>
</template>
<script>
import cartMixins from '../mixins/cartMixins'
export default {
name: 'ProductCardList',
mixins: [cartMixins],
name: 'BlogCardList',
props: {
products: {
type: Array,
blog: {
type: Object,
required: true
}
}
@@ -57,5 +59,13 @@ export default {
</script>
<style scoped>
.subtitle {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1rem;
}
figure.is-flex {
justify-content: center;
}
</style>
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
+35 -35
View File
@@ -1,42 +1,42 @@
<template>
<div class="columns">
<div v-for="product in products" :key="product.id" class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img :src="product.images[0].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 class="columns is-multiline">
<div v-for="product in products" :key="product.id" class="column is-half-tablet is-one-third-widescreen">
<nuxt-link :to="`/products/${product.handle}`">
<div class="card">
<div class="card-image">
<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">
<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
type="is-primary"
icon-left="cart"
@click="addToCart(product.variants[0].id, 1)"
>
Buy
</b-button>
</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>
</nuxt-link>
</div>
</div>
</template>
components/TheFooter.vue
+14 -18
View File
@@ -3,10 +3,8 @@
<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 class="footer-link">
Made with ❤️, 🍺 and ☕ by <a href="https://github.com/thomas-philippot"> Thomas Philippot</a>
</p>
</div>
</div>
@@ -15,23 +13,26 @@
<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>
<p class="footer-link">
<nuxt-link :to="`/policy/${privacyPolicy.handle}`">
<nuxt-link to="/policy/privacy-policy">
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">
@@ -45,12 +46,7 @@
<script>
export default {
name: 'TheFooter',
computed: {
privacyPolicy () {
return this.$store.state.shop.privacyPolicy
}
}
name: 'TheFooter'
}
</script>
layouts/default.vue
-7
View File
@@ -17,13 +17,6 @@ export default {
components: {
TheFooter,
TheNavbar
},
asyncData ({ $shopify }) {
return $shopify.collection.fetchAllWithProducts().then((collections) => {
return {
collections
}
})
}
}
</script>
layouts/noContainer.vue
+28
View File
@@ -0,0 +1,28 @@
<template>
<div class="app">
<the-navbar />
<div id="content-wrap">
<nuxt />
</div>
<the-footer />
</div>
</template>
<style>
</style>
<script>
import TheNavbar from '../components/TheNavbar'
import TheFooter from '../components/TheFooter'
export default {
components: {
TheFooter,
TheNavbar
}
}
</script>
<style>
#content-wrap {
min-height: 100vh;
}
</style>
nuxt.config.js
+67 -1
View File
@@ -1,4 +1,5 @@
require('dotenv').config()
const axios = require("axios")
export default {
mode: 'universal',
/*
@@ -26,7 +27,10 @@ export default {
/*
** Plugins to load before mounting the App
*/
plugins: [{ src: '~/plugins/localStorage.js', ssr: false }],
plugins: [
{ src: '~/plugins/localStorage.js', ssr: false },
{ src: '~/plugins/moment' }
],
/*
** Nuxt.js dev-modules
*/
@@ -58,6 +62,68 @@ export default {
domain: process.env.DOMAIN, // your shopify domain
storefrontAccessToken: process.env.STOREFRONT_ACCESS_TOKEN// your shopify storefront access token
},
generate: {
routes () {
return axios({
url: process.env.API_URL,
method: 'POST',
headers: {
'X-Shopify-Storefront-Access-Token': process.env.STOREFRONT_ACCESS_TOKEN,
Accept: 'application/json'
},
data: {
query: `query {
blogs (first: 250) {
edges {
node {
handle,
articles (first: 250) {
edges {
node {
handle
}
}
}
}
}
},
products (first: 250) {
edges {
node {
handle
}
}
},
collections (first: 250) {
edges {
node {
handle
}
}
}
}`
}
}).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
blogRoutes.forEach((blog) => {
res.push('/blog/' + blog.node.handle)
blog.node.articles.edges.forEach((article) => {
res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)
})
})
productRoutes.forEach((product) => {
res.push('/products/' + product.node.handle)
})
CollectionRoutes.forEach((collection) => {
res.push('/collection/' + collection.node.handle)
})
return res
})
}
},
/*
** Build configuration
*/
package-lock.json
Generated
+16 -30
View File
@@ -8167,6 +8167,11 @@
}
}
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12475,8 +12480,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@@ -12494,13 +12498,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -12513,18 +12515,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -12627,8 +12626,7 @@
},
"inherits": {
"version": "2.0.4",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -12638,7 +12636,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -12651,20 +12648,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -12681,7 +12675,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -12762,8 +12755,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -12773,7 +12765,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -12849,8 +12840,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -12880,7 +12870,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -12898,7 +12887,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -12937,13 +12925,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"optional": true
"bundled": true
}
}
},
package.json
+1
View File
@@ -14,6 +14,7 @@
"dependencies": {
"@nuxtjs/axios": "^5.9.5",
"dotenv": "^8.2.0",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"nuxt": "^2.11.0",
"nuxt-buefy": "^0.3.23",
pages/basket/index.vue
+45 -41
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="container">
<div v-if="checkout.lineItems.length === 0">
<div class="column">
<h1 class="is-size-1">
@@ -11,51 +11,55 @@
<div class="columns">
<div class="column">
<h1 class="is-size-1">
Panier
Cart
</h1>
</div>
</div>
<div class="columns">
<div class="column">
<b-table :data="checkout.lineItems">
<template slot-scope="props">
<b-table-column field="image" label="Image">
<figure class="image is-96x96">
<img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
</figure>
</b-table-column>
<b-table-column field="title" label="Title">
<p class="title">
{{ props.row.title }}
</p>
</b-table-column>
<b-table-column field="price" label="Price">
{{ props.row.variant.price }}€
</b-table-column>
<b-table-column field="quantity" label="Quantity">
{{ props.row.quantity }}
</b-table-column>
<b-table-column field="total" label="Total">
{{ getItemTotal(props.row) }} €
</b-table-column>
<b-table-column field="delete" label="Delete">
<b-button
class="is-danger"
icon-left="delete"
@click="deleteItem(props.row.id)"
>
Delete
</b-button>
</b-table-column>
</template>
</b-table>
<div class="columns">
<div class="column">
</div>
<div class="column is-2 is-pulled-right">
<p class="subtitle">
Subtotal : {{ checkout.subtotalPrice }} €
</p>
<div class="card">
<div class="card-content">
<b-table :data="checkout.lineItems">
<template slot-scope="props">
<b-table-column field="image" label="Image">
<figure class="image is-96x96">
<img class="is-rounded" :src="props.row.variant.image.src" :alt="props.row.description">
</figure>
</b-table-column>
<b-table-column field="title" label="Title">
<p class="title">
{{ props.row.title }}
</p>
</b-table-column>
<b-table-column field="price" label="Price">
{{ props.row.variant.price }}€
</b-table-column>
<b-table-column field="quantity" label="Quantity">
{{ props.row.quantity }}
</b-table-column>
<b-table-column field="total" label="Total">
{{ getItemTotal(props.row) }} €
</b-table-column>
<b-table-column field="delete" label="Delete">
<b-button
class="is-danger"
icon-left="delete"
@click="deleteItem(props.row.id)"
>
Delete
</b-button>
</b-table-column>
</template>
</b-table>
<div class="columns">
<div class="column">
</div>
<div class="column is-2 is-pulled-right">
<p class="subtitle">
Subtotal : {{ checkout.subtotalPrice }} €
</p>
</div>
</div>
</div>
</div>
</div>
pages/blog/_handle/article/_articleHandle/index.vue
+70 -8
View File
@@ -1,29 +1,59 @@
<template>
<div class="container">
Article {{ params }}
{{ article }}
<div>
<section class="hero is-info is-medium is-bold">
<div
class="hero-body"
:style="{
backgroundImage: (article.image === null) ? '' : `url(${article.image.originalSrc})`,
backgroundPosition: 'center',
backgroundSize: 'cover'
}"
/>
</section>
<section class="articles section">
<div class="container">
<div class="card article">
<div class="card-content">
<div class="media">
<div class="media-content has-text-centered">
<p class="title article-title">{{ article.title }}</p>
<div class="tags has-addons level-item">
<span class="tag is-rounded is-info">@{{ article.authorV2.name }}</span>
<span class="tag is-rounded">{{ $moment(article.publishedAt, $moment.ISO_8601).format('DD MMMM Y') }}</span>
</div>
</div>
</div>
<div class="content article-body">
<p v-html="article.contentHtml" />
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: 'Index',
layout: 'noContainer',
asyncData ({ app, params }) {
return app.$axios({
method: 'POST',
data: {
query: `query {
blogByHandle (handle:"${params.handle}") {
title,
handle
articleByHandle (handle: "${params.articleHandle}") {
title,
publishedAt,
contentHtml
authorV2 {
bio,
firstName,
lastName
name
},
seo {
title,
description
}
image (maxWidth: 2000) {
altText,
originalSrc
@@ -37,9 +67,41 @@ export default {
article: response.data.data.blogByHandle.articleByHandle
}
})
},
head () {
return {
title: this.article.seo.title,
meta: [
{ hid: 'description', name: 'description', content: this.article.seo.description }
]
}
}
}
</script>
<style scoped>
.articles {
margin: -200px 0 5rem;
}
.articles .content p {
line-height: 1.9;
margin: 15px 0;
}
.media-content {
margin-top: 3rem;
}
.article {
margin-top: 6rem;
}
@media screen and (min-width: 768px) {
.article-body {
margin: 0 6rem;
}
}
.article-body {
line-height: 1.4;
}
.hero-body {
height: 500px;
}
</style>
pages/blog/_handle/index.vue
+19 -53
View File
@@ -1,57 +1,27 @@
<template>
<div class="container">
<h1>{{ blog.title }}</h1>
<div class="columns is-multiline">
<div
v-for="article in blog.articles.edges"
:key="article.node.id"
class="column is-full-mobile is-half-tablet is-one-third-desktop"
>
<nuxt-link :to="`/blog/${blog.handle}/article/${article.node.handle}`">
<div class="card">
<div class="card-image">
<figure v-if="article.node.image !== null">
<img
:src="article.node.image.originalSrc"
:alt="article.node.image.altText"
>
</figure>
<figure v-else class="is-flex">
<img
src="/img/no-image.jpg"
alt="image-not-found"
>
</figure>
</div>
<div class="card-content">
<p class="title is-4">
{{ article.node.title }}
</p>
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
<div class="content">
<b-taglist class="is-marginless">
<b-tag
v-for="tag in article.node.tags"
:key="tag"
href="#"
type="is-primary"
>
#{{ tag }}
</b-tag>
</b-taglist>
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
</div>
</div>
</div>
</nuxt-link>
<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>
import BlogCardList from '../../../components/BlogCardList'
export default {
name: 'Index',
components: {
BlogCardList
},
asyncData ({ app, params }) {
return app.$axios({
method: 'POST',
@@ -84,18 +54,14 @@ export default {
blog: response.data.data.blogByHandle
}
})
},
head () {
return {
title: this.$store.state.shop.name + ' | ' + this.blog.title
}
}
}
</script>
<style scoped>
.subtitle {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1rem;
}
figure.is-flex {
justify-content: center;
}
</style>
pages/collection/_handle/index.vue
+46 -19
View File
@@ -1,43 +1,43 @@
<template>
<div>
<section class="hero 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">
<div class="columns">
<div class="column">
<p
class="subtitle"
v-html="collection.descriptionHtml"
/>
<section class="articles section">
<div class="card article">
<div class="card-content">
<div class="content article-body">
<p v-html="collection.descriptionHtml" />
</div>
</div>
</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">
</section>
<section class="section">
<div class="container">
<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>
</div>
</div>
</template>
@@ -60,4 +60,31 @@ export default {
</script>
<style scoped>
.container {
margin-bottom: 2.5rem;
}
.articles {
margin: -200px 0 5rem;
}
.articles .content p {
line-height: 1.9;
margin: 15px 0;
}
.media-content {
margin-top: 3rem;
}
.article {
margin-top: 6rem;
}
@media screen and (min-width: 768px) {
.article-body {
margin: 0 6rem;
}
}
.article-body {
line-height: 1.4;
}
.hero-body {
height: 500px;
}
</style>
pages/index.vue
+32 -41
View File
@@ -1,41 +1,39 @@
<template>
<div class="full-width">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="is-size-2">My home page</h1>
<p>ceci est la page d'acceuil, ce texte ne changera pas car c'est une boutique</p>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<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">
<div
class="hero-body"
:style="{
backgroundImage: `url(${collection.image.src})`,
backgroundPosition: 'center',
backgroundSize: 'cover'
}"
>
<div class="container">
<h1 class="title">
{{ collection.title }}
</h1>
<h2 class="subtitle">
{{ collection.description }}
</h2>
<nuxt-link :to="`/collection/${collection.handle}`" class="button is-primary">
<span>See</span>
</nuxt-link>
<nuxt-link :to="`/collection/${collection.handle}`">
<section class="hero is-large is-info">
<div
class="hero-body"
:style="{
backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
backgroundPosition: 'center',
backgroundSize: 'cover'
}"
>
<div class="container">
<h1 class="title is-shadow">
{{ collection.title }}
</h1>
</div>
</div>
</div>
</section>
</section>
</nuxt-link>
</div>
</div>
</div>
@@ -43,6 +41,7 @@
<script>
export default {
layout: 'noContainer',
asyncData ({ app }) {
return app.$axios({
method: 'POST',
@@ -50,16 +49,7 @@ export default {
query: `query {
shop {
name,
description,
privacyPolicy {
handle
},
termsOfService {
handle
},
refundPolicy {
handle
}
description
},
blogs(first: 10) {
edges {
@@ -100,7 +90,7 @@ export default {
},
head () {
return {
title: 'Home Page',
title: this.shop.name,
meta: [
{ hid: 'description', name: 'description', content: this.description }
]
@@ -110,7 +100,8 @@ export default {
</script>
<style>
.card-image {
height: 20rem;
.collection-banner {
margin-bottom: 2rem;
margin-top: 2rem !important;
}
</style>
pages/policy/_handle/index.vue
-15
View File
@@ -1,15 +0,0 @@
<template>
<div class="container">
<h1>Policy id</h1>
</div>
</template>
<script>
export default {
name: 'Index'
}
</script>
<style scoped>
</style>
pages/policy/privacy-policy/index.vue
+45
View File
@@ -0,0 +1,45 @@
<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 {
privacyPolicy {
title,
body
}
}
}`
}
}).then((response) => {
return {
policy: response.data.data.shop.privacyPolicy
}
})
},
head () {
return {
title: 'Privacy Policy'
}
}
}
</script>
<style scoped>
</style>
pages/policy/refund-policy/index.vue
+45
View File
@@ -0,0 +1,45 @@
<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
}
})
},
head () {
return {
title: 'Refund Policy'
}
}
}
</script>
<style scoped>
</style>
pages/policy/terms-of-service/index.vue
+45
View File
@@ -0,0 +1,45 @@
<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
}
})
},
head () {
return {
title: 'Terms of services'
}
}
}
</script>
<style scoped>
</style>
pages/products/_handle/index.vue
+12 -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>
@@ -94,6 +94,14 @@ export default {
product: {},
quantity: 1
}
},
head () {
return {
title: this.$store.state.shop.name + ' | ' + this.product.title,
meta: [
{ hid: 'description', name: 'description', content: this.product.description }
]
}
}
}
</script>
@@ -105,4 +113,7 @@ export default {
.al img {
filter: grayscale(100%);
}
.columns.is-flex {
align-items: center;
}
</style>
pages/products/index.vue
+5
View File
@@ -26,6 +26,11 @@ export default {
products () {
return this.$store.state.products
}
},
head () {
return {
title: this.$store.state.shop.name + ' | ' + 'Products'
}
}
}
</script>
plugins/moment.js
+10
View File
@@ -0,0 +1,10 @@
import Vue from 'vue'
import moment from 'moment'
moment.locale('fr')
Vue.use(moment)
export default ({ app }, inject) => {
app.$moment = moment
inject('moment', moment)
}