Merge branch 'master' of https://github.com/vercel/commerce into nodejs-provider

.env.template

@@ -1,3 +1,6 @@
+# Available providers: bigcommerce, shopify
+COMMERCE_PROVIDER=bigcommerce
+
 BIGCOMMERCE_STOREFRONT_API_URL=
 BIGCOMMERCE_STOREFRONT_API_TOKEN=
 BIGCOMMERCE_STORE_API_URL=

README.md

@@ -71,25 +71,7 @@ Next.js Commerce provides a set of utilities and functions to create new provide
 
 ### 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.
+Open `.env.local` and change the value of `COMMERCE_PROVIDER` to the provider you would like to use, then set the environment variables for that provider (use `.env.template` as the base).
 
 ### Features
 
@@ -103,7 +85,6 @@ Every provider defines the features that it supports under `framework/{provider}
 - You'll see a config file like this:
   ```json
   {
-    "provider": "bigcommerce",
     "features": {
       "wishlist": false
     }

commerce.config.json

@@ -1,5 +1,4 @@
 {
-  "provider": "bigcommerce",
   "features": {
     "wishlist": true,
     "customCheckout": false

components/cart/CartItem/CartItem.tsx

@@ -92,8 +92,10 @@ const CartItem = ({
       })}
       {...rest}
     >
-      <div className="w-16 h-16 bg-violet relative overflow-hidden">
+      <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
+        <Link href={`/product/${item.path}`}>
           <Image
+            onClick={() => closeSidebarIfPresent()}
             className={s.productImage}
             width={150}
             height={150}
@@ -101,6 +103,7 @@ const CartItem = ({
             alt={item.variant.image!.altText}
             unoptimized
           />
+        </Link>
       </div>
       <div className="flex-1 flex flex-col text-base">
         <Link href={`/product/${item.path}`}>

framework/commerce/config.js

@@ -0,0 +1,66 @@
+/**
+ * This file is expected to be used in next.config.js only
+ */
+
+const path = require('path')
+const fs = require('fs')
+const merge = require('deepmerge')
+const prettier = require('prettier')
+
+const PROVIDERS = ['bigcommerce', 'shopify']
+
+function getProviderName() {
+  return (
+    process.env.COMMERCE_PROVIDER ||
+    (process.env.BIGCOMMERCE_STOREFRONT_API_URL
+      ? 'bigcommerce'
+      : process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+      ? 'shopify'
+      : null)
+  )
+}
+
+function withCommerceConfig(nextConfig = {}) {
+  const commerce = nextConfig.commerce || {}
+  const name = commerce.provider || getProviderName()
+
+  if (!name) {
+    throw new Error(
+      `The commerce provider is missing, please add a valid provider name or its environment variables`
+    )
+  }
+  if (!PROVIDERS.includes(name)) {
+    throw new Error(
+      `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
+        ', '
+      )}"`
+    )
+  }
+
+  const commerceNextConfig = require(path.join('../', name, 'next.config'))
+  const config = merge(commerceNextConfig, nextConfig)
+
+  config.env = config.env || {}
+
+  Object.entries(config.commerce.features).forEach(([k, v]) => {
+    if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
+  })
+
+  // Update paths in `tsconfig.json` to point to the selected provider
+  if (config.commerce.updateTSConfig !== false) {
+    const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
+    const tsconfig = require(tsconfigPath)
+
+    tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
+    tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
+
+    fs.writeFileSync(
+      tsconfigPath,
+      prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
+    )
+  }
+
+  return config
+}
+
+module.exports = { withCommerceConfig, getProviderName }

framework/commerce/with-config.js

@@ -1,41 +0,0 @@
-/**
- * This file is expected to be used in next.config.js only
- */
-
-const merge = require('deepmerge')
-
-const PROVIDERS = ['bigcommerce', 'shopify']
-
-function getProviderName() {
-  // TODO: OSOT.
-  return process.env.BIGCOMMERCE_STOREFRONT_API_URL ? 'bigcommerce' : null
-}
-
-module.exports = (nextConfig = {}) => {
-  const commerce = nextConfig.commerce || {}
-  const name = commerce.provider || getProviderName()
-
-  if (!name) {
-    throw new Error(
-      `The commerce provider is missing, please add a valid provider name or its environment variables`
-    )
-  }
-  if (!PROVIDERS.includes(name)) {
-    throw new Error(
-      `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
-        ', '
-      )}"`
-    )
-  }
-
-  const commerceNextConfig = require(`../${name}/next.config`)
-  const config = merge(commerceNextConfig, nextConfig)
-
-  config.env = config.env || {}
-
-  Object.entries(config.commerce.features).forEach(([k, v]) => {
-    if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
-  })
-
-  return config
-}

framework/shopify/README.md

@@ -27,8 +27,8 @@ Collection of hooks and data fetching functions to integrate Shopify in a React
 1. Install dependencies:
 
 ```
-yarn install shopify-buy
-yarn install -D @types/shopify-buy
+yarn add shopify-buy
+yarn add @types/shopify-buy
 ```
 
 3. Environment variables need to be set:

next.config.js

@@ -1,8 +1,12 @@
 const commerce = require('./commerce.config.json')
-const withCommerceConfig = require('./framework/commerce/with-config')
+const {
+  withCommerceConfig,
+  getProviderName,
+} = require('./framework/commerce/config')
 
-const isBC = commerce.provider === 'bigcommerce'
-const isShopify = commerce.provider === 'shopify'
+const provider = commerce.provider || getProviderName()
+const isBC = provider === 'bigcommerce'
+const isShopify = provider === 'shopify'
 
 module.exports = withCommerceConfig({
   commerce,
@@ -39,3 +43,6 @@ module.exports = withCommerceConfig({
     ].filter((x) => x)
   },
 })
+
+// Don't delete this console log, useful to see the commerce config in Vercel deployments
+console.log('next.config.js', JSON.stringify(module.exports, null, 2))