website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
SHIPPING - SETUP
Shipping Methods
Shipping Zones
Shipping Method Setup Examples
TAXES - Setup
Tax Automation with Stripe Tax
Tax Automation with Avalara
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by archbee 

SDK Reference 4.x

6min

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 themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project!

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

yarn
npm
|
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:

JS
|
// 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

Hook

Description

useAnalytics

Provides support for sending UI-related tracking events to Segment.

useAuth

Provides support for user authentication. Chord supports passwordless authentication with Magic.

useCart

Returns the current shopping cart, and functions for creating and interacting with the shopping cart.

useCheckout

Provides support for checkout.

useProduct

Provides support for interacting with products.

useSubscription

Provides support for managing user subscriptions.

useSubscriptions

Returns the current user's subscriptions.

useTranslate

Provides support for internationalization

useUser

Returns the current user, and functions for loading data about the user.



Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
SDK Reference 3.x
NEXT
useTranslate
Docs powered by archbee 
TABLE OF CONTENTS
Introduction
Installation
Hooks Reference