Quick Start

3 min

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 docid\ fm833n8omgr3pwlk8hvpq after completing the steps in the guide above, you can install the package and its peer dependencies yarn yarn add @chordcommerce/react autonomy @chordcommerce/chord magic react react dom react redux redux npm npm install @chordcommerce/react autonomy @chordcommerce/chord magic react react dom react redux redux developing your application needs to be wrapped in the docid\ gnqxgtjo29ortoe2e6mt2 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 import chordprovider from '@chordcommerce/react autonomy' import magicclient from '@chordcommerce/chord magic' const app = ({ children }) => { const magicclient = new magicclient(process env magic api key) return ( \<chordprovider config={{ brandname process env chord oms brand name, currency 'usd', domain process env chord oms api url, locale 'en us', omsid process env chord oms id, storeid process env chord oms store id, tenantid process env chord oms tenant id }} authclient={magicclient} \> {children} \</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 import { usecart } from '@chordcommerce/react autonomy' export default () => { const { addtocart } = usecart() const onsubmit = ({ sku, quantity }) => { addtocart({ sku, quantity }) } }