@cloak-app/shopify
v2.1.0
Published
Shopify Storefront API client and related helpers.
Downloads
75
Keywords
Readme
@cloak-app/shopify
Shopify Storefront API client and related helpers.
Install
- Install with
yarn add @cloak-app/shopify
- Add to
nuxt.config
withbuildModules: ['@cloak-app/shopify']
Module Options
Set these properties within cloak: { shopify: { ... } }
in the nuxt.config.js:
url
- Your public Shopify store URL, for example: https://brand.myshopify.com or https://shop.brand.com. Defaults toprocess.env.SHOPIFY_URL
.storefront:
token
- The Storefront API token of your custom app. Defaults toprocess.env.SHOPIFY_STOREFRONT_TOKEN
.language
- A Storefront API recognized LanguageCode. Defaults to the 1st part ofprocess.env.CMS_SITE
if it is ISO-like (ex: ifen_US
oren-US
thenEN
).country
- A Storefront API recognized CountryCode. Defaults to the 2nd part ofprocess.env.CMS_SITE
if it is ISO-like (ex: ifen_US
oren-US
thenUS
).injectClient
- Boolean for whether to inject the$storefront
client globally. Defaults totrue
. You would set this tofalse
when this module is a depedency of another module (like @cloak-app/algolia) that is creating$storefront
a different way.
mocks
- An array of objects for use withmockAxiosGql
.
Usage
Inside of Nuxt app
The storefront
Nuxt plugin injects $storefront
globally. This is an Axios instance with it's baseUrl
set to cloak.shopify.endpoint
. In addition, you can call:
$storefront.execute({ query, variables })
- Executes a GraphQL request that automatically adds asite
GraphQL variable with the value from thecloak.craft.site
value.
Inside of Nuxt module
You can use the makeModuleStorefrontClient()
factory method within a Nuxt module to build a $storefront
instance. In a module, we can't use the instance that is injected by the storefront-client
plugin because that is constructed later in the lifecycle.
// A Nuxt module
import { makeModuleStorefrontClient } from '@cloak-app/shopify/factories'
export default function() {
const $storefront = makeModuleStorefrontClient(this)
}
Outside of Nuxt
You can make an instance of the Storefront Axios client when outside of Nuxt (like in a Shopify JS entry point) as follows:
import { makeStorefrontClient } from '@cloak-app/shopify/factories'
import mergeClientHelpers from '@cloak-app/shopify/factories/merge-helpers'
const storefront = mergeClientHelpers(makeStorefrontClient({
url: process.env.SHOPIFY_URL,
token: process.env.SHOPIFY_STOREFRONT_TOKEN,
}))
// Optional, inject it globally into Vue components
import Vue from 'vue'
Vue.prototype.$storefront = storefront
Contributing
Run yarn dev
to open a Nuxt dev build of the demo directory.