Add Mailchimp Open Commerce Provider

[vannguyenn]

DEMO: https://commerce-nine-brown-79.vercel.app/

Mailchimp Open Commerce Provider

• Docs: https://mailchimp.com/developer/open-commerce/
• API endpoint: https://api.open-commerce.io/graphql

Open Commerce Provider

Preview: https://commerce-nine-brown-79.vercel.app/

We are using this admin interface for demo: https://admin.open-commerce.io/
Storefront API URL: https://api.open-commerce.io/graphql

Available Features

• Cart
• Search
• Custom Checkout
• Custom Navigation

Steps to get started:

1. Duplicate site/.env.template and rename it to site/.env.local
2. Setup env variables related to open commerce provider, something looks like this:

COMMERCE_PROVIDER=@vercel/commerce-opencommerce
NEXT_PUBLIC_OPENCOMMERCE_API_URL=http://api.open-commerce.io/graphql
NEXT_PUBLIC_OPENCOMMERCE_IMAGE_DOMAIN=api.open-commerce.io

3. Run pnpm install and cd site && pnpm dev in the root folder

Troubleshoot

https://github.com/reactioncommerce/commerce#troubleshoot

For more information about the repository, check out the README file here: https://github.com/reactioncommerce/commerce

Custom Checkouts

The demo site use Example Payment Plugin for processing payments. To make the checkout flow works as expected, some prerequisite steps need to be handled:

• Add and enable at least one flat-rate shipping option on the admin setting page. By default, we select the first shipping option to create the order
• Enable the IOU Example payment method in the admin setting page
• Fill in all the required fields in the Add Shipping Address step in the storefront
• After processing checkout, check the orders page in the admin interface to confirm the order has been successfully created

We can also use Stripe as the default payment method by following steps:

• Add and enable at least one flat-rate shipping option in the admin setting page. By default, we select the first shipping option to create the order
• Enable the Stripe (SCA) payment method in the admin setting page
• Add OPENCOMMERCE_STRIPE_PUBLIC_API_KEY env variable to the site/.env.local file
• Add STRIPE_API_KEY env variable to the reaction API .env file with the private API key from Stripe
• Modify the submit-checkout api endpoint to include additional steps for Stripe payment (eg: create/confirm payment intent, pass payment intent id to placeOrder request body,...).

Custom Navigation

By default NextJS only display two categories/tags of products in the navbar. This feature enables us to show the organized categories/tags as navigation in the admin to our storefront. Also, we can leverage this feature to show URLs that are not relative to the shop (eg: admin page, documentation page, ...). This feature is enabled by default, we can turn it off anytime by modifying the value in the commerce.config.json file.

[vannguyenn]

Hi @cond0r, this PR is updated with the latest changes, please help to review it when you have time. Thank you! c/c @zenweasel

[loan-laux]

Really looking forward to having this merged. This will be huge for the Mailchimp Open Commerce community. Thanks @vannguyenn for working on this. 🙏🏻

[loan-laux]

@cond0r is there any timeline for review on this PR? I don't mean to bug you, just curious as I'm excited for this provider to be merged.

[cond0r]

@cond0r is there any timeline for review on this PR? I don't mean to bug you, just curious as I'm excited for this provider to be merged.

Hi, @loan-laux I am no longer involved in Next.js commerce, so I cannot help here.

[loan-laux]

My bad @cond0r, sorry for disturbing you then. @okbel @lfades, who should be assigned for review here?

[MichaelRouly]

#759

[leerob]

Hey there! Thank you for your contribution. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: #966