mirror of
https://github.com/vercel/commerce.git
synced 2025-05-12 20:57:51 +00:00
fix: update README
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
parent
1a0d183681
commit
4d9f4fe822
@ -1,6 +1,4 @@
|
|||||||
COMPANY_NAME="Vercel Inc."
|
COMPANY_NAME="Vercel Inc."
|
||||||
TWITTER_CREATOR="@vercel"
|
|
||||||
TWITTER_SITE="https://nextjs.org/commerce"
|
|
||||||
SITE_NAME="Next.js Commerce"
|
SITE_NAME="Next.js Commerce"
|
||||||
SHOPIFY_REVALIDATION_SECRET=""
|
SHOPIFY_REVALIDATION_SECRET=""
|
||||||
SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
|
SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
|
||||||
|
68
README.md
68
README.md
@ -1,58 +1,8 @@
|
|||||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
|
|
||||||
|
|
||||||
# Next.js Commerce
|
|
||||||
|
|
||||||
A Next.js 14 and App Router-ready ecommerce template featuring:
|
|
||||||
|
|
||||||
- Next.js App Router
|
|
||||||
- Optimized for SEO using Next.js's Metadata
|
|
||||||
- React Server Components (RSCs) and Suspense
|
|
||||||
- Server Actions for mutations
|
|
||||||
- Edge Runtime
|
|
||||||
- New fetching and caching paradigms
|
|
||||||
- Dynamic OG images
|
|
||||||
- Styling with Tailwind CSS
|
|
||||||
- Checkout and payments with Shopify
|
|
||||||
- Automatic light/dark mode based on system settings
|
|
||||||
|
|
||||||
<h3 id="v1-note"></h3>
|
|
||||||
|
|
||||||
> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
|
|
||||||
|
|
||||||
## Providers
|
|
||||||
|
|
||||||
Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
|
|
||||||
|
|
||||||
Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
|
|
||||||
|
|
||||||
- Shopify (this repository)
|
|
||||||
- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
|
|
||||||
- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
|
|
||||||
- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
|
|
||||||
- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
|
|
||||||
- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
|
|
||||||
- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
|
|
||||||
- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
|
|
||||||
|
|
||||||
> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
|
|
||||||
|
|
||||||
## Integrations
|
|
||||||
|
|
||||||
Integrations enable upgraded or additional functionality for Next.js Commerce
|
|
||||||
|
|
||||||
- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
|
|
||||||
- Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
|
|
||||||
- Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
|
|
||||||
|
|
||||||
## Running locally
|
## Running locally
|
||||||
|
|
||||||
You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
|
You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce.
|
||||||
|
|
||||||
> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
|
> Note: Get the environment variables from 1password under CPP vault name `Storefront ENV`.
|
||||||
|
|
||||||
1. Install Vercel CLI: `npm i -g vercel`
|
|
||||||
2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
|
|
||||||
3. Download your environment variables: `vercel env pull`
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm install
|
pnpm install
|
||||||
@ -60,17 +10,3 @@ pnpm dev
|
|||||||
```
|
```
|
||||||
|
|
||||||
Your app should now be running on [localhost:3000](http://localhost:3000/).
|
Your app should now be running on [localhost:3000](http://localhost:3000/).
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
|
|
||||||
|
|
||||||
1. Run `vc link`.
|
|
||||||
1. Select the `Vercel Solutions` scope.
|
|
||||||
1. Connect to the existing `commerce-shopify` project.
|
|
||||||
1. Run `vc env pull` to get environment variables.
|
|
||||||
1. Run `pnpm dev` to ensure everything is working correctly.
|
|
||||||
</details>
|
|
||||||
|
|
||||||
## Vercel, Next.js Commerce, and Shopify Integration Guide
|
|
||||||
|
|
||||||
You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
|
|
||||||
|
@ -394,7 +394,6 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
|
|||||||
}) || [];
|
}) || [];
|
||||||
|
|
||||||
if (productVariantPromises.length) {
|
if (productVariantPromises.length) {
|
||||||
const coreVariantIds = [] as string[];
|
|
||||||
const productVariantsById = (await Promise.allSettled(productVariantPromises))
|
const productVariantsById = (await Promise.allSettled(productVariantPromises))
|
||||||
.filter((result) => result.status === 'fulfilled')
|
.filter((result) => result.status === 'fulfilled')
|
||||||
.reduce(
|
.reduce(
|
||||||
@ -409,12 +408,10 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// add core charge field to cart line item if any
|
// add core charge field to cart line item if any
|
||||||
extendedCartLines = cart?.lines
|
extendedCartLines = cart?.lines.reduce((lines, item) => {
|
||||||
.reduce((lines, item) => {
|
|
||||||
const productVariant = productVariantsById[item.merchandise.id];
|
const productVariant = productVariantsById[item.merchandise.id];
|
||||||
if (productVariant && productVariant.coreVariantId) {
|
if (productVariant && productVariant.coreVariantId) {
|
||||||
const coreCharge = productVariantsById[productVariant.coreVariantId];
|
const coreCharge = productVariantsById[productVariant.coreVariantId];
|
||||||
coreVariantIds.push(productVariant.coreVariantId);
|
|
||||||
return lines.concat([
|
return lines.concat([
|
||||||
{
|
{
|
||||||
...item,
|
...item,
|
||||||
@ -423,8 +420,7 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
return lines;
|
return lines;
|
||||||
}, [] as CartItem[])
|
}, [] as CartItem[]);
|
||||||
.filter((item) => !coreVariantIds.includes(item.merchandise.id)); // remove core charge items from cart lines as it's not a separate line item
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const totalQuantity = extendedCartLines.reduce((sum, line) => sum + line.quantity, 0);
|
const totalQuantity = extendedCartLines.reduce((sum, line) => sum + line.quantity, 0);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user