diff --git a/.env.template b/.env.template index 9d2f8f1bf..9e42e2f31 100644 --- a/.env.template +++ b/.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= diff --git a/README.md b/README.md index 885c95e85..cd4351911 100644 --- a/README.md +++ b/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 } diff --git a/commerce.config.json b/commerce.config.json index bef7db222..08ea78814 100644 --- a/commerce.config.json +++ b/commerce.config.json @@ -1,5 +1,4 @@ { - "provider": "bigcommerce", "features": { "wishlist": true, "customCheckout": false diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index cb7f8600e..e6820d32c 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -92,15 +92,18 @@ const CartItem = ({ })} {...rest} > -
- {item.variant.image!.altText} +
+ + closeSidebarIfPresent()} + className={s.productImage} + width={150} + height={150} + src={item.variant.image!.url} + alt={item.variant.image!.altText} + unoptimized + /> +
diff --git a/framework/commerce/config.js b/framework/commerce/config.js new file mode 100644 index 000000000..2dd3284bc --- /dev/null +++ b/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 } diff --git a/framework/commerce/with-config.js b/framework/commerce/with-config.js deleted file mode 100644 index 1eb1acc19..000000000 --- a/framework/commerce/with-config.js +++ /dev/null @@ -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 -} diff --git a/framework/shopify/README.md b/framework/shopify/README.md index fc6a70ce3..eeae73afc 100644 --- a/framework/shopify/README.md +++ b/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: diff --git a/next.config.js b/next.config.js index 7e86695a0..c8694f1e0 100644 --- a/next.config.js +++ b/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))