gatsby-plugin-shopify-buy

Install

npm install --save gatsby-plugin-shopify-buy

Usage

Add the plugin to your gatsby-config.js:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-shopify-buy`,
      options: {
        stores: {
          anyKeyForYourStore: {
            domain: `your-store.myshopify.com`,
            accessToken: `xxxxx`,
          },
          anotherStore: {
            domain: `store-with-custom-domain.com`,
            accessToken: `xxxxx`,
          },
        }
      }
    }
  ]
];

With the StoreContext React.Context component

// component-in-your-app.js
import StoreContext from 'gatsby-plugin-shopify-buy'

class StoreInfo extends React.Component {
  state = {
    shopName: null,
  }

  fetchInfo = () => {
    const { client } = this.props

    client.shop.fetchInfo().then(
      shop => {
        this.setState({
          shopName: shop.name,
        })
      }
    ).catch(console.error)
  }

  componentDidMount() {
    this.fetchInfo()
  }

  render() {
    const { shopName } = this.state
    return (
      <>
        <h2>{ this.state.shopName || 'loading...' }</h2>
      </>
    )
  }
}

const StoreInfoContainer = () => (
  <StoreContext.Consumer>
    { context => (
      <StoreInfo
        client={context.client}
      />
    ) }
  </StoreContext.Consumer>
)

export default StoreInfoContainer

With the withStoreContext higher order component

// component-in-your-app.js
import { withStoreContext } from 'gatsby-plugin-shopify-buy'

class StoreInfo extends React.Component {
  state = {
    shopName: null,
  }

  fetchInfo = () => {
    const client = this.props.storeContext.client

    client.shop.fetchInfo().then(
      shop => {
        this.setState({
          shopName: shop.name,
        })
      }
    ).catch(console.error)
  }

  componentDidMount() {
    this.fetchInfo()
  }

  render() {
    const { shopName } = this.state
    return (
      <>
        <h2>{ this.state.shopName || 'loading...' }</h2>
      </>
    )
  }
}

export default withStoreContext(StoreInfo)

Context API

The context passed to the StoreContext.Consumer or as the prop storeContext to withStoreContext child components

Properties

• activeStoreKey:String : the key of the store which the client is currently configured to access
• client:ShopifyBuySDKClient : instance of the shopify buy sdk client for the active store. See https://shopify.github.io/js-buy-sdk/Client.html for docs
• storeKeys:Array[String] : a list of available store keys that were passed to the plugin configuration

Methods

• changeStore(storeKey:String):void : method for changing the active store configured for the client