[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT) # Next.js Commerce The all-in-one starter kit for high-performance e-commerce sites. With a few clicks, Next.js developers can clone, deploy and fully customize their own store. Start right now at [nextjs.org/commerce](https://nextjs.org/commerce) Demo live at: [demo.vercel.store](https://demo.vercel.store/) This project is currently under development. ## Features - Performant by default - SEO Ready - Internationalization - Responsive - UI Components - Theming - Standardized Data Hooks - Integrations - Integrate seamlessly with the most common ecommerce platforms. - Dark Mode Support ## Work in progress We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1) ## Integrations Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends. ## Goals - **Next.js Commerce** should have a completely data **agnostic** UI - **Aware of schema**: should ship with the right data schemas and types. - All providers should return the right data types and schemas to blend correctly with Next.js Commerce. - `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._ There is a `framework` folder in the root folder that will contain multiple ecommerce providers. Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) so we also have a feature API to disable/enable features in the UI. People actively working on this project: @okbel & @lfades. ## Framework Framework is where the data comes from. It contains mostly hook handlers and functions. ## Structure Main folder and its exposed functions - `product` - usePrice - useSearch - getProduct - getAllProducts - `wishlist` - useWishlist - useAddItem - useRemoveItem - `auth` - useLogin - useLogout - useSignup - `customer` - useCustomer - getCustomerId - getCustomerWistlist - `cart` - useCart - useAddItem - useRemoveItem - useUpdateItem - `config.json` - README.md #### Example of correct usage of the Commerce Framework ```js import { useUI } from '@components/ui' import { useCustomer } from '@framework/customer' import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist' ``` ## Configuration ### How to change providers First, update the provider selected in `commerce.config.json`: ```json { "provider": "bigcommerce", "features": { "wishlist": true } } ``` Then, change the paths defined in `tsconfig.json` and update the `@framework` paths to point to the right folder provider: ```json "@framework": ["framework/bigcommerce"], "@framework/*": ["framework/bigcommerce/*"] ``` Make sure to add the environment variables required by the new provider. ### Features Every provider defines the features that it supports under `framework/{provider}/commerce.config.json` #### How to turn Features on and off > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box) - Open `commerce.config.json` - You'll see a config file like this: ```json { "provider": "bigcommerce", "features": { "wishlist": false } } ``` - Turn wishlist on by setting wishlist to true. - Run the app and the wishlist functionality should be back on. ### How to create a new provider We'd recommend to duplicate a provider folder and push your providers SDK. If you succeeded building a provider, submit a PR so we can all enjoy it. ## Contribute Our commitment to Open Source can be found [here](https://vercel.com/oss). 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. 2. Create a new branch `git checkout -b MY_BRANCH_NAME` 3. Install yarn: `npm install -g yarn` 4. Install the dependencies: `yarn` 5. Duplicate `.env.template` and rename it to `.env.local`. 6. Add proper store values to `.env.local`. 7. Run `yarn dev` to build and watch for code changes 8. The development branch is `canary` (this is the branch pull requests should be made against). On a release, `canary` branch is rebased into `master`. ## Troubleshoot
I already own a BigCommerce store. What should I do?
First thing you do is: set your environment variables

.env.local ```sh BIGCOMMERCE_STOREFRONT_API_URL=<> BIGCOMMERCE_STOREFRONT_API_TOKEN=<> BIGCOMMERCE_STORE_API_URL=<> BIGCOMMERCE_STORE_API_TOKEN=<> BIGCOMMERCE_STORE_API_CLIENT_ID=<> BIGCOMMERCE_CHANNEL_ID=<> ``` If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials. 1. Install Vercel CLI: `npm i -g vercel` 2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link` 3. Download your environment variables: `vercel env pull .env.local` Next, you're free to customize the starter. More updates coming soon. Stay tuned.
BigCommerce shows a Coming Soon page and requests a Preview Code
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.

BigCommerce team has been notified and they plan to add more detailed about this subject.