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
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/ProductCardList.vue
+32 -36
View File
@@ -1,42 +1,36 @@
<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">
<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>
</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>
@@ -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">