mirror of
https://github.com/vercel/commerce.git
synced 2025-06-19 21:51:21 +00:00
George FitzGibbons
GitHub
commit
cf17b4c76c
10
README.md
10
README.md
@ -66,14 +66,20 @@ Every provider defines the features that it supports under `framework/{provider}
|
||||
|
||||
#### Features Available
|
||||
|
||||
The following features can be enabled or disabled. This means that the UI will remove all code related to the feature.
|
||||
For example: Turning `cart` off will disable Cart capabilities.
|
||||
|
||||
- cart
|
||||
- search
|
||||
- wishlist
|
||||
- customerAuth
|
||||
- customCheckout
|
||||
|
||||
#### 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`
|
||||
- Open `commerce.config.json`
|
||||
- You'll see a config file like this:
|
||||
```json
|
||||
{
|
||||
@ -83,7 +89,7 @@ Every provider defines the features that it supports under `framework/{provider}
|
||||
}
|
||||
}
|
||||
```
|
||||
- Turn wishlist on by setting wishlist to true.
|
||||
- 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
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
{
|
||||
"features": {
|
||||
"cart": true,
|
||||
"search": true,
|
||||
"wishlist": false,
|
||||
"customerAuth": false,
|
||||
"customCheckout": false
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.root {
|
||||
@apply sticky top-0 bg-primary z-40 transition-all duration-150;
|
||||
min-height: 74px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
||||
@ -34,9 +34,11 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
</div>
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && (
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-end flex-1 space-x-8">
|
||||
<UserNav />
|
||||
</div>
|
||||
|
||||
@ -25,10 +25,12 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
return (
|
||||
<nav className={cn(s.root, className)}>
|
||||
<ul className={s.list}>
|
||||
<li className={s.item} onClick={toggleSidebar}>
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
</li>
|
||||
{process.env.COMMERCE_CART_ENABLED && (
|
||||
<li className={s.item} onClick={toggleSidebar}>
|
||||
<Bag />
|
||||
{itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
|
||||
</li>
|
||||
)}
|
||||
{process.env.COMMERCE_WISHLIST_ENABLED && (
|
||||
<li className={s.item}>
|
||||
<Link href="/wishlist">
|
||||
@ -38,7 +40,7 @@ const UserNav: FC<Props> = ({ className }) => {
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
{process.env.COMMERCE_CUSTOMER_ENABLED && (
|
||||
{process.env.COMMERCE_CUSTOMERAUTH_ENABLED && (
|
||||
<li className={s.item}>
|
||||
{customer ? (
|
||||
<DropdownMenu />
|
||||
|
||||
@ -11,7 +11,7 @@ interface Props {
|
||||
className?: string
|
||||
product: Product
|
||||
noNameTag?: boolean
|
||||
imgProps?: Omit<ImageProps, 'src'>
|
||||
imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
|
||||
variant?: 'default' | 'slim' | 'simple'
|
||||
}
|
||||
|
||||
|
||||
@ -56,18 +56,20 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
|
||||
<div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
aria-label="Add to Cart"
|
||||
type="button"
|
||||
className={s.button}
|
||||
onClick={addToCart}
|
||||
loading={loading}
|
||||
disabled={variant?.availableForSale === false}
|
||||
>
|
||||
{variant?.availableForSale === false
|
||||
? 'Not Available'
|
||||
: 'Add To Cart'}
|
||||
</Button>
|
||||
{process.env.COMMERCE_CART_ENABLED && (
|
||||
<Button
|
||||
aria-label="Add to Cart"
|
||||
type="button"
|
||||
className={s.button}
|
||||
onClick={addToCart}
|
||||
loading={loading}
|
||||
disabled={variant?.availableForSale === false}
|
||||
>
|
||||
{variant?.availableForSale === false
|
||||
? 'Not Available'
|
||||
: 'Add To Cart'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<Collapse title="Care">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"provider": "bigcommerce",
|
||||
"features": {
|
||||
"wishlist": true
|
||||
"wishlist": true,
|
||||
"customerAuth": true
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,11 +57,27 @@ function withCommerceConfig(nextConfig = {}) {
|
||||
|
||||
// Update paths in `tsconfig.json` to point to the selected provider
|
||||
if (config.commerce.updateTSConfig !== false) {
|
||||
const staticTsconfigPath = path.join(process.cwd(), 'tsconfig.json')
|
||||
const tsconfig = require('../../tsconfig.js')
|
||||
const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
|
||||
const tsconfig = require(tsconfigPath)
|
||||
|
||||
tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
|
||||
tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
|
||||
|
||||
// When running for production it may be useful to exclude the other providers
|
||||
// from TS checking
|
||||
if (process.env.VERCEL) {
|
||||
const exclude = tsconfig.exclude.filter(
|
||||
(item) => !item.startsWith('framework/')
|
||||
)
|
||||
|
||||
tsconfig.exclude = PROVIDERS.reduce((exclude, current) => {
|
||||
if (current !== name) exclude.push(`framework/${current}`)
|
||||
return exclude
|
||||
}, exclude)
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
staticTsconfigPath,
|
||||
tsconfigPath,
|
||||
prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import useSWR, { responseInterface } from 'swr'
|
||||
import useSWR, { SWRResponse } from 'swr'
|
||||
import type {
|
||||
HookSWRInput,
|
||||
HookFetchInput,
|
||||
@ -11,7 +11,7 @@ import type {
|
||||
import defineProperty from './define-property'
|
||||
import { CommerceError } from './errors'
|
||||
|
||||
export type ResponseState<Result> = responseInterface<Result, CommerceError> & {
|
||||
export type ResponseState<Result> = SWRResponse<Result, CommerceError> & {
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ const useData: UseData = (options, input, fetcherFn, swrOptions) => {
|
||||
})
|
||||
}
|
||||
|
||||
return response
|
||||
return response as typeof response & { isLoading: boolean }
|
||||
}
|
||||
|
||||
export default useData
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
{
|
||||
"provider": "local",
|
||||
"features": {
|
||||
"wishlist": false
|
||||
"wishlist": false,
|
||||
"cart": false,
|
||||
"search": false,
|
||||
"customerAuth": false
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,9 +12,6 @@ const isSwell = provider === 'swell'
|
||||
const isVendure = provider === 'vendure'
|
||||
|
||||
module.exports = withCommerceConfig({
|
||||
future: {
|
||||
webpack5: true,
|
||||
},
|
||||
commerce,
|
||||
i18n: {
|
||||
locales: ['en-US', 'es'],
|
||||
|
||||
11033
package-lock.json
generated
11033
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@ -7,7 +7,7 @@
|
||||
"start": "next start",
|
||||
"analyze": "BUNDLE_ANALYZE=both yarn build",
|
||||
"prettier-fix": "prettier --write .",
|
||||
"find:unused": "next-unused",
|
||||
"find:unused": "npx next-unused",
|
||||
"generate": "graphql-codegen",
|
||||
"generate:shopify": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config framework/shopify/codegen.json",
|
||||
"generate:vendure": "graphql-codegen --config framework/vendure/codegen.json",
|
||||
@ -23,39 +23,35 @@
|
||||
"@vercel/fetch": "^6.1.0",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"body-scroll-lock": "^3.1.5",
|
||||
"bowser": "^2.11.0",
|
||||
"classnames": "^2.3.1",
|
||||
"cookie": "^0.4.1",
|
||||
"dot-object": "^2.1.4",
|
||||
"email-validator": "^2.0.4",
|
||||
"immutability-helper": "^3.1.1",
|
||||
"isomorphic-unfetch": "^3.1.0",
|
||||
"js-cookie": "^2.2.1",
|
||||
"keen-slider": "^5.4.1",
|
||||
"keen-slider": "^5.5.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.random": "^3.2.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"next": "10.0.9-canary.5",
|
||||
"next-seo": "^4.24.0",
|
||||
"next": "^11.0.0",
|
||||
"next-seo": "^4.26.0",
|
||||
"next-themes": "^0.0.14",
|
||||
"postcss": "^8.3.0",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-nesting": "^8.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-fast-marquee": "^1.1.3",
|
||||
"react-fast-marquee": "^1.1.4",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
"react-use-measure": "^2.0.4",
|
||||
"shopify-buy": "^2.11.0",
|
||||
"swell-js": "^4.0.0-next.0",
|
||||
"swr": "^0.5.6",
|
||||
"tabbable": "^5.2.0",
|
||||
"tailwindcss": "^2.1.2"
|
||||
"tailwindcss": "^2.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@graphql-codegen/cli": "^1.21.5",
|
||||
"@graphql-codegen/schema-ast": "^1.18.3",
|
||||
"@graphql-codegen/typescript": "^1.22.1",
|
||||
"@graphql-codegen/typescript-operations": "^1.18.0",
|
||||
"@graphql-codegen/typescript": "^1.22.2",
|
||||
"@graphql-codegen/typescript-operations": "^1.18.1",
|
||||
"@next/bundle-analyzer": "^10.2.3",
|
||||
"@types/body-scroll-lock": "^2.6.1",
|
||||
"@types/cookie": "^0.4.0",
|
||||
@ -63,18 +59,16 @@
|
||||
"@types/lodash.debounce": "^4.0.6",
|
||||
"@types/lodash.random": "^3.2.6",
|
||||
"@types/lodash.throttle": "^4.1.6",
|
||||
"@types/node": "^15.6.1",
|
||||
"@types/node": "^15.12.4",
|
||||
"@types/react": "^17.0.8",
|
||||
"@types/shopify-buy": "^2.10.5",
|
||||
"deepmerge": "^4.2.2",
|
||||
"graphql": "^15.5.0",
|
||||
"graphql": "^15.5.1",
|
||||
"husky": "^6.0.0",
|
||||
"lint-staged": "^11.0.0",
|
||||
"next-unused": "^0.0.6",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"prettier": "^2.3.0",
|
||||
"typescript": "4.2.4"
|
||||
"typescript": "4.3.4"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
||||
57
tsconfig.js
57
tsconfig.js
@ -1,57 +0,0 @@
|
||||
const PROVIDERS = ['bigcommerce', 'shopify', 'swell', 'vendure', 'saleor']
|
||||
|
||||
function getProviderName() {
|
||||
return (
|
||||
process.env.COMMERCE_PROVIDER ||
|
||||
(process.env.BIGCOMMERCE_STOREFRONT_API_URL
|
||||
? 'bigcommerce'
|
||||
: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
|
||||
? 'shopify'
|
||||
: process.env.NEXT_PUBLIC_SWELL_STORE_ID
|
||||
? 'swell'
|
||||
: 'local')
|
||||
)
|
||||
}
|
||||
|
||||
const name = getProviderName()
|
||||
const EXCLUDED_PROVIDERS = PROVIDERS.filter((p) => p !== name).map(
|
||||
(p) => `./framework/${p}`
|
||||
)
|
||||
|
||||
module.exports = {
|
||||
compilerOptions: {
|
||||
baseUrl: '.',
|
||||
target: 'esnext',
|
||||
lib: ['dom', 'dom.iterable', 'esnext'],
|
||||
allowJs: true,
|
||||
skipLibCheck: true,
|
||||
strict: true,
|
||||
forceConsistentCasingInFileNames: true,
|
||||
noEmit: true,
|
||||
esModuleInterop: true,
|
||||
module: 'esnext',
|
||||
moduleResolution: 'node',
|
||||
resolveJsonModule: true,
|
||||
isolatedModules: true,
|
||||
jsx: 'preserve',
|
||||
paths: {
|
||||
'@lib/*': ['lib/*'],
|
||||
'@utils/*': ['utils/*'],
|
||||
'@config/*': ['config/*'],
|
||||
'@assets/*': ['assets/*'],
|
||||
'@components/*': ['components/*'],
|
||||
'@commerce': ['framework/commerce'],
|
||||
'@commerce/*': ['framework/commerce/*'],
|
||||
// Update paths to point to the selected provider
|
||||
'@framework': [`framework/${name}`],
|
||||
'@framework/*': [`framework/${name}/*`],
|
||||
},
|
||||
},
|
||||
include: ['next-env.d.ts', '**/*.d.ts', '**/*.ts', '**/*.tsx', '**/*.js'],
|
||||
exclude: [
|
||||
'node_modules',
|
||||
// It may be useful to exclude the other providers
|
||||
// from TS checking
|
||||
...EXCLUDED_PROVIDERS,
|
||||
],
|
||||
}
|
||||
@ -14,6 +14,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@lib/*": ["lib/*"],
|
||||
"@utils/*": ["utils/*"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user