A simple React app for testing various API functions from the browser. This example calls the product projections Search API to fetch a list of products. Optionally, you can use commercetools' price selection logic to fetch the correct price for a product using a combination of currency, country, channel, and customer group parameters
The motivation for building this application is to provide some working examples of working with commercetools APIs from a simple, bare-bones, React front-end.
The code to authenticate with commercetools and call the APIs is encapsulated inside src/commercetools-ts.js. This is a simple "wrapper" for the commercetools TypeScript SDK, exposing apiRoot (with project key)
src/components/search:
Displays an input form that lets the user search for products
src/components/product-detail:
Display a single product & variants
src/components/context:
This displays a set of input elements to allow the user to choose the 'context' for product/price lookup: Country, Currency, Channel, and Customer Group.
src/components/cart:
Display the shopping cart with detailed discount information.
src/components/payment:
Renders an payment page uzing the Zuora client library.
src/components/discount-detail:
Searches for product that are a part of the given discount id.
- Head on over to https://mc.us-central1.gcp.commercetools.com/unity-store/settings/developer/api-clients and generate your API client (use an admin scope for ease of development for now)
- Copy the
.env.samplefile as.envand include the values from your generated API client - Get secrets from here
- Install Dependencies:
yarn
yarn start
Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.