Skip to content

Instantly share code, notes, and snippets.

@martijnvdbrug
Last active January 18, 2021 13:15
Show Gist options
  • Save martijnvdbrug/6ecfe5cd2503e31e0e2f1bf5ca186b82 to your computer and use it in GitHub Desktop.
Save martijnvdbrug/6ecfe5cd2503e31e0e2f1bf5ca186b82 to your computer and use it in GitHub Desktop.
Gridsome Vendure hydration example
module.exports = {
siteName: 'Gridsome',
plugins: [
{
use: '@gridsome/source-graphql',
options: {
url: 'https://yourwebshop-api.com/graphql',
fieldName: 'Vendure'
},
},
],
}
<template>
<div>
<div v-for="product in $page.Vendure.products.items" >
<img :src="product.featuredAsset.preview" class="thumbnail" />
<p :class="product.soldOut ? 'sold-out' : ''" class="product-title">{{ product.name }}</p>
<p :class="product.soldOut ? 'sold-out' : ''">{{ product.variants[0].priceWithTax }}</p>
<p v-if="product.soldOut">SOLD OUT</p>
</div>
</div>
</template>
<page-query>
query {
Vendure {
products {
items {
id
name
featuredAsset {
preview
}
variants {
priceWithTax
}
}
}
}
}
</page-query>
<script>
import {GraphQLClient} from 'graphql-request';
export default {
async mounted() {
const client = new GraphQLClient('https://yourwebshop-api.com/graphql');
// Query all products, but this time with the `variants.available` field.
// `variants.available` is a custom field that displays the stock level of productVariants
const {products: {items: products}} = await client.request(`{
products {
items {
id
variants {
available
}
}
}
}`);
this.$page.Vendure.products.items = this.$page.Vendure.products.items.map(product => {
// Loop all products on the statically generated page, and check if its sold out
const clientSideProduct = products.find(p => p.id === product.id);
if (clientSideProduct) {
// Set product.soldOut
product.soldOut = !clientSideProduct.variants.find(variant => variant.available > 0);
}
return product;
})
}
}
</script>
<style>
.thumbnail {
width: 20%;
}
.product-title {
font-weight: bold;
}
.sold-out {
text-decoration: line-through;
}
</style>
<page-query>
query {
Vendure {
products {
items {
id
name
featuredAsset {
preview
}
variants {
priceWithTax
}
}
}
}
}
</page-query>
<script>
import {GraphQLClient} from 'graphql-request';
export default {
async mounted() {
const client = new GraphQLClient('https://yourwebshop-api.com/graphql');
// Query all products, but this time with the `variants.available` field.
// `variants.available` is a custom field that displays the stock level of productVariants
const {products: {items: products}} = await client.request(`{
products {
items {
id
variants {
available
}
}
}
}`);
this.$page.Vendure.products.items = this.$page.Vendure.products.items.map(product => {
// Loop all products on the statically generated page, and check if its sold out
const clientSideProduct = products.find(p => p.id === product.id);
if (clientSideProduct) {
// Set product.soldOut
product.soldOut = !clientSideProduct.variants.find(variant => variant.available > 0);
}
return product;
})
}
}
</script>
<template>
<div>
<div v-for="product in $page.Vendure.products.items" >
<img :src="product.featuredAsset.preview" class="thumbnail" />
<p :class="product.soldOut ? 'sold-out' : ''" class="product-title">{{ product.name }}</p>
<p :class="product.soldOut ? 'sold-out' : ''">{{ product.variants[0].priceWithTax }}</p>
<p v-if="product.soldOut">SOLD OUT</p>
</div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment