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 @@ + + + + + + + + + + + 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 + + + ``` 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')