SDK Reference 4.x

Introduction

The React can be installed via a Gatsby theme. It's available as an npm package, @chordcommerce/gatsby-theme-autonomy, via GitHub Packages.

Despite the name, this package does not provide a visual theme. To quote from the Gatsby documentation:

gatsby-theme-autonomy includes the React, a set of React hooks that offer an easy way to interact with Chord's order management system, for common operations like adding items to a cart. These hooks provide access to SDK methods that handle communication with Chord's order management system and keep the site's Redux state up to date. They also automatically send tracking events to Segment.

The theme also pre-configures your Gatsby site with a number of useful ecommerce features like sitemaps and internationalization support.

Installation

npx install-peerdeps --yarn @chordcommerce/gatsby-theme-autonomy

This theme uses a significant amount of Gatsby plugins and transformers. We provide these as peer dependencies instead of vendoring them so that you can upgrade them at your own pace. A couple of major things to keep in mind as you upgrade them:

1. First party Gatsby plugins and Gatsby itself should have the same minor version to ensure they are compatible (if you are on the current release of Gatsby). For example, we have gatsby@4.13.1, gatsby-plugin-image@2.13.0 and gatsby-plugin-sitemap@5.13.0. Note that all of them share a minor version of 13 while the major and patch versions differ. This isn't a hard and fast rule but something that you should strive to maintain where possible.
2. gatsby-plugin-sharp and gatsby-transformer-sharp must be the same version. This is because they bundle a binary that having multiple versions of will break builds.

After installing the package, add the following configuration to your gatsby-config.js file:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-autonomy',
      options: {
        contentfulConfig: {
          spaceId: process.env.CONTENTFUL_SPACE_ID,
          accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
          host: process.env.CONTENTFUL_API_URL,
          environment: process.env.CONTENTFUL_ENVIRONMENT,
        },
        omsConfig: {
          brandName: process.env.GATSBY_CHORD_OMS_BRAND_NAME,
          storeId: process.env.GATSBY_CHORD_OMS_STORE_ID,
          omsId: process.env.GATSBY_CHORD_OMS_ID,
          tenantId: process.env.GATSBY_CHORD_OMS_TENANT_ID,
          domain: process.env.GATSBY_CHORD_OMS_API_URL,
        },
        intlConfig: {
          languages: [`en-US`],
          defaultLanguage: `en-US`,
          path: path.resolve(__dirname, 'src/intl'),
        },
        siteMetadata: {
          title: `Chord Commerce Starter`,
          siteUrl: `https://www.chord.co`,
          description: `A starter kit.`,
          social: {
            facebook: 'chordcommerce',
            instagram: 'chordcommerce',
            pinterest: 'chordcommerce',
          },
        },
      },
    },
  ],
}

Run your site as usual, using yarn start.

Hooks Reference