diff --git a/README.md b/README.md
index bd3516b..8cbadb1 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,9 @@ 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 to `process.env.SHOPIFY_URL`.
- `storefront:`
- `token` - The Storefront API token of your custom app. Defaults to `process.env.SHOPIFY_STOREFRONT_TOKEN`.
- - `version` - The [Storefront API version](https://shopify.dev/api/usage/versioning) to use. Defaults to `unstable` (aka, latest).
+ - `version` - The [Storefront API version](https://shopify.dev/api/usage/versioning) to use. Defaults to `2022-04`.
+ - `language` - A Storefront API recognized [LanguageCode](https://shopify.dev/api/storefront/2022-04/enums/LanguageCode). Defaults to the 1st part of `process.env.CMS_SITE` if it is ISO-like (ex: if `en_US` or `en-US` then `EN`).
+ - `country` - A Storefront API recognized [CountryCode](https://shopify.dev/api/storefront/2022-04/enums/CountryCode). Defaults to the 2nd part of `process.env.CMS_SITE` if it is ISO-like (ex: if `en_US` or `en-US` then `US`).
- `injectClient` - Boolean for whether to inject the `$storefront` client globally. Defaults to `true`. You would set this to `false` when this module is a depedency of another module (like [@cloak-app/algolia](https://github.com/BKWLD/cloak-algolia)) that is creating `$storefront` a different way.
- `mocks` - An array of objects for use with [`mockAxiosGql`](https://github.com/BKWLD/cloak-utils/blob/main/src/axios.js).
@@ -47,10 +49,12 @@ You can make an instance of the Storefront Axios client when outside of Nuxt (li
```js
import { makeStorefrontClient } from '@cloak-app/shopify/factories'
-const storefront = makeStorefrontClient({
+import mergeClientHelpers from '@cloak-app/shopify/factories/merge-helpers'
+const storefront = mergeClientHelpers(makeStorefrontClient({
url: process.env.SHOPIFY_URL,
token: process.env.SHOPIFY_STOREFRONT_TOKEN,
-})
+ version: '2022-04', // Optional
+}))
// Optional, inject it globally into Vue components
import Vue from 'vue'
diff --git a/demo/components/merge-demo.vue b/demo/components/merge-demo.vue
new file mode 100644
index 0000000..bfe394c
--- /dev/null
+++ b/demo/components/merge-demo.vue
@@ -0,0 +1,38 @@
+
+
+
+
+ul.merge-demo: li(v-for='product in products')
+ | {{ product.title }}
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/content/demo.md b/demo/content/demo.md
index fe15cef..1b873d6 100644
--- a/demo/content/demo.md
+++ b/demo/content/demo.md
@@ -24,16 +24,42 @@ export default
data: -> products: []
- fetch: ->
- { @products } = await @$storefront.execute query: '''
- query getSomeProducts {
- products(first: 5) {
- edges {
- node { ...product }
- }
+ fetch: -> { @products } = await @$storefront.execute query: '''
+ query getSomeProducts {
+ products(first: 5) {
+ edges {
+ node { ...product }
}
}
- ''' + productFragment
+ }
+ ''' + productFragment
+
+
+```
+
+## Merge Example
+
+This uses live Shopify data and the `$mergeShopifyProductCards` helper to simulate merging Shopify data into an array of product data from another source, like Craft.
+
+
+
+```vue
+
+
+ul: li(v-for='product in products')
+ | {{ product.title }}
+
+
+
+
```
diff --git a/demo/nuxt.config.js b/demo/nuxt.config.js
index 472636a..f6de858 100644
--- a/demo/nuxt.config.js
+++ b/demo/nuxt.config.js
@@ -1,5 +1,7 @@
// Mock stubs
import someProducts from './stubs/some-products.json'
+import productsForSsgVariants from './stubs/products-for-ssg-variants.json'
+import productVariantsForSsgVariants from './stubs/product-variants-for-ssg-variants.json'
// Nuxt config
export default {
@@ -8,6 +10,7 @@ export default {
buildModules: [
'@cloak-app/boilerplate',
'@cloak-app/demo-theme',
+ '@cloak-app/craft',
'../nuxt',
],
@@ -30,10 +33,24 @@ export default {
{
query: 'getSomeProducts',
response: someProducts,
- }
+ },
+ {
+ query: 'getProductVariantsForSsgVariants',
+ response: productVariantsForSsgVariants
+ },
],
},
+ // Mock Craft queries
+ craft: {
+ mocks: [
+ {
+ query: 'getProductsForSsgVariants',
+ response: productsForSsgVariants
+ }
+ ]
+ }
+
},
// @nuxt/content can't be loaded from module
diff --git a/demo/pages/index.vue b/demo/pages/index.vue
index b1714fa..a4f9e37 100644
--- a/demo/pages/index.vue
+++ b/demo/pages/index.vue
@@ -11,7 +11,7 @@ nuxt-content(:document='page')