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

blog added

Browse Source
This commit is contained in:
thomas
2020-02-28 23:34:43 +01:00
parent 8ef2c5ff30
commit a1f2a5bf02
16 changed files with 295 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bulma.scss
Vendored
+4
View File
@@ -47,6 +47,10 @@ p.footer-link > a:hover {
border-bottom: 2px solid $primary;
}
.card {
border-radius: .6rem;
overflow: hidden;
}
ul {
@extend .list;
components/BlogCardList.vue
+43 -33
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="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>
components/ProductCardList.vue
+7 -11
View File
@@ -1,6 +1,7 @@
<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">
@@ -18,15 +19,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 +30,7 @@
</div>
</div>
</div>
</nuxt-link>
</div>
</div>
</template>
@@ -57,5 +51,7 @@ export default {
</script>
<style scoped>
.card-image {
height: 22rem;
}
</style>
components/TheFooter.vue
+2 -11
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,13 +13,6 @@
<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">
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
+4 -1
View File
@@ -26,7 +26,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', ssr: false }
],
/*
** Nuxt.js dev-modules
*/
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
+6 -2
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,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"
pages/blog/_handle/article/_articleHandle/index.vue
+53 -7
View File
@@ -1,28 +1,54 @@
<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>
<div class="container">
Article {{ params }}
{{ article }}
<section class="articles">
<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).format('DD MMMM Y') }}</span>
</div>
</div>
</div>
<div class="content article-body">
<p v-html="article.contentHtml" />
</div>
</div>
</div>
</section>
</div>
</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
},
image (maxWidth: 2000) {
altText,
@@ -42,4 +68,24 @@ export default {
</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;
}
.article-body {
line-height: 1.4;
margin: 0 6rem;
}
.hero-body {
height: 500px;
}
</style>
pages/blog/_handle/index.vue
+7 -54
View File
@@ -1,57 +1,19 @@
<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>
</div>
<blog-card-list
:blog="blog"
/>
</div>
</template>
<script>
import BlogCardList from '../../../components/BlogCardList'
export default {
name: 'Index',
components: {
BlogCardList
},
asyncData ({ app, params }) {
return app.$axios({
method: 'POST',
@@ -89,13 +51,4 @@ export default {
</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
+34 -15
View File
@@ -1,6 +1,6 @@
<template>
<div>
<section class="hero is-primary" style="margin-bottom: 2rem">
<section class="hero is-medium is-primary" style="margin-bottom: 2rem">
<div
class="hero-body"
:style="{
@@ -17,29 +17,25 @@
</div>
</section>
<div class="container">
<section class="articles">
<div class="card article">
<div class="card-content">
<div class="content article-body">
<p v-html="collection.descriptionHtml" />
</div>
</div>
</div>
</section>
<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>
</div>
</div>
</template>
<script>
@@ -60,4 +56,27 @@ 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;
}
.article-body {
line-height: 1.4;
margin: 0 6rem;
}
.hero-body {
height: 500px;
}
</style>
pages/index.vue
+2 -1
View File
@@ -4,7 +4,7 @@
<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>
@@ -43,6 +43,7 @@
<script>
export default {
layout: 'noContainer',
asyncData ({ app }) {
return app.$axios({
method: 'POST',
pages/policy/_handle/index.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="container">
<h1>Policy id</h1>
<h1>Policy</h1>
</div>
</template>
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)
}