Merge branch 'master' of https://github.com/Thomas-Philippot/my-shop
This commit is contained in:
Thomas
Vendored
+7
-1
@@ -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;
|
||||
|
||||
+43
-33
@@ -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="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 class="image is-4by3">
|
||||
<img :src="article.image.src" :alt="product.images[0].altText">
|
||||
<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">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">
|
||||
{{ product.title }}
|
||||
{{ article.node.title }}
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
{{ product.variants[0].price }} €
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle is-6">{{ article.node.excerpt }}</p>
|
||||
<div class="content">
|
||||
<b-button
|
||||
tag="router-link"
|
||||
:to="'/products/' + product.handle"
|
||||
<b-taglist class="is-marginless">
|
||||
<b-tag
|
||||
v-for="tag in article.node.tags"
|
||||
:key="tag"
|
||||
href="#"
|
||||
type="is-primary"
|
||||
>
|
||||
See
|
||||
</b-button>
|
||||
<b-button
|
||||
type="is-primary"
|
||||
icon-left="cart"
|
||||
@click="addToCart(product.variants[0].id, 1)"
|
||||
>
|
||||
Buy
|
||||
</b-button>
|
||||
#{{ tag }}
|
||||
</b-tag>
|
||||
</b-taglist>
|
||||
<time datetime="2016-1-1">{{ article.node.publishedAt }}</time>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
@@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div v-for="product in products" :key="product.id" class="column is-one-third">
|
||||
<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">
|
||||
<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">
|
||||
@@ -18,15 +25,7 @@
|
||||
</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"
|
||||
@@ -37,6 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+14
-18
@@ -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>
|
||||
|
||||
|
||||
@@ -17,13 +17,6 @@ export default {
|
||||
components: {
|
||||
TheFooter,
|
||||
TheNavbar
|
||||
},
|
||||
asyncData ({ $shopify }) {
|
||||
return $shopify.collection.fetchAllWithProducts().then((collections) => {
|
||||
return {
|
||||
collections
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
+67
-1
@@ -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
|
||||
*/
|
||||
|
||||
Generated
+16
-30
@@ -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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,12 +11,14 @@
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1 class="is-size-1">
|
||||
Panier
|
||||
Cart
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<b-table :data="checkout.lineItems">
|
||||
<template slot-scope="props">
|
||||
<b-table-column field="image" label="Image">
|
||||
@@ -60,6 +62,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-button
|
||||
type="is-primary"
|
||||
@click="confirmCheckout"
|
||||
|
||||
@@ -1,29 +1,59 @@
|
||||
<template>
|
||||
<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">
|
||||
Article {{ params }}
|
||||
{{ article }}
|
||||
<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>
|
||||
|
||||
@@ -1,57 +1,27 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
<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>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p
|
||||
class="subtitle"
|
||||
v-html="collection.descriptionHtml"
|
||||
/>
|
||||
<h2 class="is-size-4">Products in this collection</h2>
|
||||
</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
|
||||
: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>
|
||||
|
||||
+15
-24
@@ -1,41 +1,39 @@
|
||||
<template>
|
||||
<div class="full-width">
|
||||
<section class="section">
|
||||
<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>
|
||||
<p>This website is for developpement purpose, please don't try to buy something here.</p>
|
||||
</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>
|
||||
@@ -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>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Policy id</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Index'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -26,6 +26,11 @@ export default {
|
||||
products () {
|
||||
return this.$store.state.products
|
||||
}
|
||||
},
|
||||
head () {
|
||||
return {
|
||||
title: this.$store.state.shop.name + ' | ' + 'Products'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
Reference in New Issue
Block a user