website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
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
Developer Tools
...
Gatsby
Guides

v3.x to v4.x Migration Guide

10min

Overview

Chord’s Gatsby starter relies on a companion Gatsby theme to power its interactions with the Chord ecosystem. With the release of the new of Chord’s new React-based SDK, react-autonomy, the theme will now be powered by this lower-level package.

As such, the refactored integration of the theme in the starter will contain breaking changes.

Why update?

Going forward, all new SDK features and fixes will be made to react-autonomy (and consumed in gatsby-theme-autonomy). The new implementation of our SDK also comes with some great new features!

Major Changes

Typescript support

react-autonomy and gatsby-theme-autonomy have Typescript support with type definitions.

Removed ability to import services, selectors and actions via

We have removed the ability to consume some internal parts of the Redux store in favour of better and more complete hooks.

JSdoc documentation

react-autonomy includes function documentation following the JSDoc specification.

Improved hooks and methods

Names, parameters, and behavior has been standardized across the SDK.

Environment variables

We have added and renamed some environment variables and their corresponding plugin options needed to correctly configure the theme in your starter. See the list below.

Removal of Sentry

We have removed Sentry support from our SDKs.

Migration Steps

Change your environment variables and/or update the theme configuration in your starter

In the newest version of the starter, we have renamed some and added new environment variables:

.env
|
// before
GATSBY_ACS_API_URL=
GATSBY_ACS_STORE_NAME=
GATSBY_ACS_BRAND_NAME=

// after
GATSBY_CHORD_OMS_BRAND_NAME= // replaces GATSBY_ACS_BRAND_NAME
GATSBY_CHORD_OMS_STORE_ID= // ID of the store, provided by Chord
GATSBY_CHORD_OMS_STORE_NAME= // replaces GATSBY_ACS_STORE_NAME
GATSBY_CHORD_OMS_ID= // UUID of the OMS instance, provided by Chord
GATSBY_CHORD_OMS_TENANT_ID= // UUID of the tenant in the OMS, provided by Chord
GATSBY_CHORD_OMS_API_URL= // replaces GATSBY_ACS_API_URL


While mirroring these changes is not mandatory, you will need to update the configuration passed from your starter to the gatsby-theme-autonomy in gatsby-plugin.js:

JS
|
{
	resolve: '@chordcommerce/gatsby-theme-autonomy',
	options: {
    // new configuration
	  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,
	  },
  },
}


Update dependencies

Update your theme package:

yarn
|
yarn upgrade @chordcommerce/gatsby-theme-autonomy@^4.0.0


Update React components

Hooks and method names have changed, so this will need to be updated throughout your code. Reference the documentation to see how they’ve changed. For example:

JS
|
- onClick={() => trackClickProduct(slug)}
+ onClick={() => trackProductClicked({ product: serializedProduct })}


Remove dependencies on deprecated exports and deep imports

We have simplified the list of methods and hooks exported from gatsby-theme-autonomy. This means that you will no longer have access to previously exported members, like services, selectors, etc.

For example:

JS
|
- import { selectors } from '@chordcommerce/gatsby-theme-autonomy'
- import { usePreloadedState } from '@chordcommerce/gatsby-theme-autonomy'
- import { logSentryError } from '@chordcommerce/gatsby-theme-autonomy'
- import { trackProductViewed } from '@chordcommerce/gatsby-theme-autonomy/src/redux/actions/analytics'


Add product serializer

As mentioned above, some methods now have a product argument you can include to add details about the product to the Segment tracking event. gatsby-starter-autonomy/src/utils/chord/serialize.js provides a couple of convenience methods that serialize the Chord CMS default content model into the correct object shape. You can customize these functions as needed, or write your own.

Updated 03 Mar 2023
Did this page help you?
PREVIOUS
v1.2.7 to v2.0.0 Migration Guide
NEXT
Authentication
Docs powered by
Archbee
TABLE OF CONTENTS
Overview
Major Changes
Migration Steps
Change your environment variables and/or update the theme configuration in your starter
Update dependencies
Update React components
Remove dependencies on deprecated exports and deep imports
Add product serializer
Docs powered by
Archbee