mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Wishlist
This commit is contained in:
okbel
parent
b907c31ef2
commit
4dd2c3fde0
118
README.md
118
README.md
@ -42,57 +42,6 @@ Additionally, we need to ensure feature parity (not all providers have e.g. wish
|
||||
|
||||
People actively working on this project: @okbel & @lfades.
|
||||
|
||||
## Troubleshoot
|
||||
|
||||
<details>
|
||||
<summary>I already own a BigCommerce store. What should I do?</summary>
|
||||
<br>
|
||||
First thing you do is: <b>set your environment variables</b>
|
||||
<br>
|
||||
<br>
|
||||
.env.local
|
||||
|
||||
```sh
|
||||
BIGCOMMERCE_STOREFRONT_API_URL=<>
|
||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
|
||||
BIGCOMMERCE_STORE_API_URL=<>
|
||||
BIGCOMMERCE_STORE_API_TOKEN=<>
|
||||
BIGCOMMERCE_STORE_API_CLIENT_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.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
|
||||
<br>
|
||||
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
|
||||
<br>
|
||||
<br>
|
||||
BigCommerce team has been notified and they plan to add more detailed about this subject.
|
||||
</details>
|
||||
|
||||
## 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`.
|
||||
|
||||
## Framework
|
||||
|
||||
Framework is where the data comes from. It contains mostly hooks and functions.
|
||||
@ -132,3 +81,70 @@ import { useUI } from '@components/ui'
|
||||
import { useCustomer } from '@framework/customer'
|
||||
import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'
|
||||
```
|
||||
|
||||
## Config
|
||||
|
||||
### Features
|
||||
|
||||
In order to make the UI entirely functional, we need to specify which features certain providers do not **provide**.
|
||||
|
||||
**Disabling wishlist:**
|
||||
|
||||
```
|
||||
{
|
||||
"features": {
|
||||
"wishlist": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
<details>
|
||||
<summary>I already own a BigCommerce store. What should I do?</summary>
|
||||
<br>
|
||||
First thing you do is: <b>set your environment variables</b>
|
||||
<br>
|
||||
<br>
|
||||
.env.local
|
||||
|
||||
```sh
|
||||
BIGCOMMERCE_STOREFRONT_API_URL=<>
|
||||
BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
|
||||
BIGCOMMERCE_STORE_API_URL=<>
|
||||
BIGCOMMERCE_STORE_API_TOKEN=<>
|
||||
BIGCOMMERCE_STORE_API_CLIENT_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.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
|
||||
<br>
|
||||
After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
|
||||
<br>
|
||||
<br>
|
||||
BigCommerce team has been notified and they plan to add more detailed about this subject.
|
||||
</details>
|
||||
|
||||
5
framework/bigcommerce/config.json
Normal file
5
framework/bigcommerce/config.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"features": {
|
||||
"wishlist": false
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import useSearch, { UseSearch } from '@commerce/products/use-search'
|
||||
import useSearch, { UseSearch } from '@commerce/cart/products/use-search'
|
||||
import type { BigcommerceProvider } from '..'
|
||||
|
||||
export default useSearch as UseSearch<BigcommerceProvider>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import type { SearchProductsData } from '../types'
|
||||
import type { SearchProductsData } from '../../types'
|
||||
import type {
|
||||
Prop,
|
||||
HookFetcherFn,
|
||||
UseHookInput,
|
||||
UseHookResponse,
|
||||
} from '../utils/types'
|
||||
import defaultFetcher from '../utils/default-fetcher'
|
||||
import useData from '../utils/use-data'
|
||||
import { Provider, useCommerce } from '..'
|
||||
} from '../../utils/types'
|
||||
import defaultFetcher from '../../utils/default-fetcher'
|
||||
import useData from '../../utils/use-data'
|
||||
import { Provider, useCommerce } from '../..'
|
||||
import { BigcommerceProvider } from '@framework'
|
||||
|
||||
export type UseSearchHandler<P extends Provider> = Prop<
|
||||
5
framework/commerce/config.json
Normal file
5
framework/commerce/config.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"features": {
|
||||
"wishlist": true
|
||||
}
|
||||
}
|
||||
@ -148,3 +148,10 @@ export interface RemoveCartItemBody {
|
||||
export interface RemoveCartItemHandlerBody extends Partial<RemoveCartItemBody> {
|
||||
cartId?: string
|
||||
}
|
||||
|
||||
// Features API
|
||||
type Features = 'wishlist' | 'checkout'
|
||||
|
||||
export interface FrameworkConfig {
|
||||
features: Record<Features, boolean>
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import '@assets/main.css'
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
import '@assets/chrome-bug.css'
|
||||
import 'keen-slider/keen-slider.min.css'
|
||||
|
||||
import { FC, useEffect } from 'react'
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
import { ManagedUIContext } from '@components/ui/context'
|
||||
import { Head } from '@components/common'
|
||||
import { ManagedUIContext } from '@components/ui/context'
|
||||
|
||||
const Noop: FC = ({ children }) => <>{children}</>
|
||||
|
||||
|
||||
@ -1,28 +1,43 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import type { GetStaticPropsContext } from 'next'
|
||||
import { getConfig } from '@framework/api'
|
||||
import getAllPages from '@framework/common/get-all-pages'
|
||||
import useWishlist from '@framework/wishlist/use-wishlist'
|
||||
import { Layout } from '@components/common'
|
||||
|
||||
import { Heart } from '@components/icons'
|
||||
import { Layout } from '@components/common'
|
||||
import { Text, Container } from '@components/ui'
|
||||
import { WishlistCard } from '@components/wishlist'
|
||||
import { defaultPageProps } from '@lib/defaults'
|
||||
import { getConfig } from '@framework/api'
|
||||
import { useCustomer } from '@framework/customer'
|
||||
import { WishlistCard } from '@components/wishlist'
|
||||
import useWishlist from '@framework/wishlist/use-wishlist'
|
||||
import getAllPages from '@framework/common/get-all-pages'
|
||||
import frameworkConfig from '@framework/config.json'
|
||||
|
||||
export async function getStaticProps({
|
||||
preview,
|
||||
locale,
|
||||
}: GetStaticPropsContext) {
|
||||
// Disabling page if Feature is not available
|
||||
if (!frameworkConfig.features.wishlist) {
|
||||
return {
|
||||
notFound: true,
|
||||
}
|
||||
}
|
||||
|
||||
const config = getConfig({ locale })
|
||||
const { pages } = await getAllPages({ config, preview })
|
||||
return {
|
||||
props: { ...defaultPageProps, pages },
|
||||
props: {
|
||||
pages,
|
||||
...defaultPageProps,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default function Wishlist() {
|
||||
const { data: customer } = useCustomer()
|
||||
const { data, isLoading, isEmpty } = useWishlist()
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<Container>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user