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 

Quick Start

4min

Installing

In order to install the necessary Chord packages, follow the guide below on how to configure your package manager to access Chord's packages.

npm Access for @chordcommerce Packages

After completing the steps in the guide above, you can install the package and its peer dependencies:

yarn
npm
|
yarn add @chordcommerce/react-autonomy @chordcommerce/chord-magic react react-dom react-redux redux


Developing

Your application needs to be wrapped in the Function: ChordProvider component. react-autonomy keeps track of your application state and makes it available to components. For example, what is currently in a user's cart is automatically persisted. <ChordProvider> makes the state available throughout your application.

<ChordProvider> requires a configuration object with information about your storefront. Here's an example:

<ChordProvider>


The config object requires these keys:

Name

Type

Description

brandName

String

The store's name.

currency

String

The store's currency. For example, USD.

domain

String

The base URL of the OMS API to use for requests. For example, https://my-store.assembly-api.com.

locale

String

The store's locale. For example, en-US.

omsId

String

A unique identifier generated by Chord during provisioning.

storeId

String

A unique identifier generated by Chord during provisioning.

tenantId

String

A unique identifier generated by Chord during provisioning.

Once your application is wrapped in the <ChordProvider> component, you can use SDK methods throughout your code. For example, here's a React component for adding an item to the cart:

<AddToCartButton>




Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
React
NEXT
Release Notes
Docs powered by archbee 
<ChordProvider>