https://github.com/travis-r6s/gridsome-source-shopify
Shopify source plugin for Gridsome
https://github.com/travis-r6s/gridsome-source-shopify
gridsome gridsome-source gridsome-source-shopify shopify
Last synced: 4 months ago
JSON representation
Shopify source plugin for Gridsome
- Host: GitHub
- URL: https://github.com/travis-r6s/gridsome-source-shopify
- Owner: travis-r6s
- License: mit
- Created: 2019-05-11T15:54:13.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-12-27T12:27:06.000Z (over 2 years ago)
- Last Synced: 2025-08-30T17:59:13.592Z (10 months ago)
- Topics: gridsome, gridsome-source, gridsome-source-shopify, shopify
- Language: JavaScript
- Homepage: https://gridsome-shopify-starter.netlify.com
- Size: 480 KB
- Stars: 15
- Watchers: 5
- Forks: 14
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gridsome-source-shopify
> Shopify source plugin for Gridsome
This plugin supports the Storefront API's [`transformedSrc` image field](#transformsrc), as well as [currency formatting](#amount).
1. [Install](#install)
2. [Usage](#usage)
3. [Routes & Templates](#routes--templates)
4. [Page Query](#page-query)
5. [Metafields](#metafields)
6. [Additional Resolvers](#additional-resolvers)
7. [Helpful Snippets](#helpful-snippets)
## Install
yarn:
```bash
yarn add gridsome-source-shopify
```
npm:
```bash
npm install gridsome-source-shopify
```
## Usage
`gridsome.config.js`
```js
module.exports = {
plugins: [
{
use: 'gridsome-source-shopify',
options: {
storeName: '', // OR
storeUrl: 'https://.myshopify.com',
storefrontToken: '', //Required
typeName: 'Shopify', // Optional, default is 'Shopify'
types: [ 'Product', 'Collection' ], // Optional, default is all types
perPage: 100 // Optional, default is 100
}
}
]
}
```
## Routes & Templates
Now you can create a template called `ShopifyProduct.vue`, and specify the route for it - Gridsome will automatically generate pages for all products.
`gridsome.config.js`
```js
module.exports = {
templates: {
ShopifyProduct: '/product/:handle'
}
}
```
You can also specify templates to use if you do not want to name the template files `Shopify`, or if you want to change the page routes:
`gridsome.config.js`
```js
module.exports = {
templates: {
ShopifyProduct: [
{
path: '/product/:handle',
component: './src/templates/Product.vue'
}
],
ShopifyCollection: [
{
path: '/collection/:handle',
component: './src/templates/Collection.vue'
}
]
},
}
```
## Page Query
Once you have specified the route for a type, you can query it by ID.
```vue
query Product ($id: ID!) {
shopifyProduct (id: $id) {
id
descriptionHtml
title
}
}
```
Now this product will be available at `this.$page.shopifyProduct`:
```vue
{{ $page.shopifyProduct.title }}
```
## Metafields
To make metafields available to query in the Storefront API, you should follow this guide: [Retrieve metafields with the Storefront API](https://shopify.dev/tutorials/retrieve-metafields-with-storefront-api).
Then metafields will be available in your product query.
## Additional Resolvers
This plugin adds a couple of custom resolvers to help with image sizing, and currency formatting.
#### `transformSrc`
Each image type includes a `transformSrc` field, similar to the Shopify Storefront's. You can create different image sizes and scales with this - for example, creating a thumbnail image, and a card/cover image:
```graphql
...
image {
...
thumbnail: transformedSrc(maxWidth: 100, maxHeight: 100, crop: CENTER)
coverImage: transformedSrc(maxWidth: 600, maxHeight: 400, crop: CENTER)
}
...
```
#### `amount`
Each price type includes extra formatting arguments in the `amount` field, where you can specify if you want to, and how to, format the price asa currency:
```graphql
...
price {
amount(format: true) # Defaults to en-US locale, and the store's currency code.
# Result: $25.00
}
...
...
priceRange {
minVariantPrice {
amount(locale: "en-GB", currency: "GBP") # Specify a locale and a currency code to use.
# Result: £25.00
}
}
...
```
## Helpful Snippets
You will probably need to find a product variant by the options that have been selected - computed properties are your friend...
```vue
...
{{ option.name }}
{{ value }}
![]()
...
export default {
data: () => ({
selectedOptions: {}
}),
computed: {
currentVariant () {
// Find a variant where every variants options matches those that are currently selected
return this.$page.shopifyProduct.variants.find(variant => variant.selectedOptions.every(({ name, value }) => value === this.selectedOptions[ name ]))
}
},
// Set the first variant as a default option
mounted () {
const [firstVariant] = this.$page.shopifyProduct.variants
this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) => ({ [ name ]: value, ...options }), {})
},
// The mounted hook doesn't always run on page change - so make sure we set the first variant if the route changes
watch: {
$route (to, from) {
const [firstVariant] = this.$page.shopifyProduct.variants
this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) => ({ [ name ]: value, ...options }), {})
}
}
}
```
All Shopify products have at least one variant - even if a product has no options (i.e. colour/size), it will have a default variant that contains the base product price/title etc. This single variant will also create a default option (`title`), which you will most likely want to filter out, as there is only one variant you can select anyway. If this is the case then the product options should be hidden, and the single variant set as the default selected option (as above):
```vue
...
...
...
export default {
...
computed: {
// Single variants have an default option called 'Title' - filter this out.
productOptions () { return this.product.options.filter(({ name }) => name !== 'Title') },
}
...
}
```
You can also create relationships from products/product variants to other types, if they return an ID or array of ID's as one of their fields. For example, with Contentful's integration you could do something like the below:
`gridsome.server.js`
```js
module.exports = api => {
api.loadSource(actions => {
const contentfulProducts = actions.getCollection('ContentfulProduct')
contentfulProducts.addReference('shopifyProductVariantId', 'ShopifyProductVariant')
}
}
```
Then query the actual product/product variant from within a query:
```graphql
query {
allContentfulProduct {
edges {
node {
name
shopifyProductVariantId {
id
title
price {
amount
}
}
}
}
}
}
```