From 560ee3b22025eeb5d994db99ff5e6a659777f0d4 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Thu, 26 Sep 2024 12:45:33 +0200 Subject: [PATCH] import vercel/commerce at 694c5c17 --- examples/vercel-commerce/.env.example | 7 + examples/vercel-commerce/.gitignore | 38 + examples/vercel-commerce/.vscode/launch.json | 28 + .../vercel-commerce/.vscode/settings.json | 9 + examples/vercel-commerce/README.md | 71 + .../vercel-commerce/app/[page]/layout.tsx | 12 + .../app/[page]/opengraph-image.tsx | 11 + examples/vercel-commerce/app/[page]/page.tsx | 45 + .../app/api/revalidate/route.ts | 6 + examples/vercel-commerce/app/error.tsx | 19 + examples/vercel-commerce/app/favicon.ico | Bin 0 -> 15086 bytes examples/vercel-commerce/app/globals.css | 21 + examples/vercel-commerce/app/layout.tsx | 58 + .../vercel-commerce/app/opengraph-image.tsx | 7 + examples/vercel-commerce/app/page.tsx | 20 + .../app/product/[handle]/page.tsx | 149 ++ examples/vercel-commerce/app/robots.ts | 15 + .../search/[collection]/opengraph-image.tsx | 11 + .../app/search/[collection]/page.tsx | 47 + .../app/search/children-wrapper.tsx | 10 + .../vercel-commerce/app/search/layout.tsx | 24 + .../vercel-commerce/app/search/loading.tsx | 18 + examples/vercel-commerce/app/search/page.tsx | 39 + examples/vercel-commerce/app/sitemap.ts | 54 + .../vercel-commerce/components/carousel.tsx | 40 + .../components/cart/actions.ts | 118 ++ .../components/cart/add-to-cart.tsx | 88 + .../components/cart/cart-context.tsx | 184 ++ .../components/cart/close-cart.tsx | 10 + .../components/cart/delete-item-button.tsx | 38 + .../cart/edit-item-quantity-button.tsx | 59 + .../vercel-commerce/components/cart/modal.tsx | 224 ++ .../components/cart/open-cart.tsx | 24 + .../vercel-commerce/components/grid/index.tsx | 21 + .../components/grid/three-items.tsx | 61 + .../vercel-commerce/components/grid/tile.tsx | 49 + .../vercel-commerce/components/icons/logo.tsx | 16 + examples/vercel-commerce/components/label.tsx | 34 + .../components/layout/footer-menu.tsx | 46 + .../components/layout/footer.tsx | 71 + .../components/layout/navbar/index.tsx | 61 + .../components/layout/navbar/mobile-menu.tsx | 100 + .../components/layout/navbar/search.tsx | 40 + .../components/layout/product-grid-items.tsx | 32 + .../components/layout/search/collections.tsx | 37 + .../layout/search/filter/dropdown.tsx | 64 + .../components/layout/search/filter/index.tsx | 41 + .../components/layout/search/filter/item.tsx | 67 + .../components/loading-dots.tsx | 15 + .../components/logo-square.tsx | 23 + .../components/opengraph-image.tsx | 40 + examples/vercel-commerce/components/price.tsx | 24 + .../components/product/gallery.tsx | 92 + .../components/product/product-context.tsx | 81 + .../product/product-description.tsx | 29 + .../components/product/variant-selector.tsx | 93 + examples/vercel-commerce/components/prose.tsx | 21 + .../components/welcome-toast.tsx | 35 + examples/vercel-commerce/fonts/Inter-Bold.ttf | Bin 0 -> 316100 bytes examples/vercel-commerce/lib/constants.ts | 31 + .../lib/shopify/fragments/cart.ts | 53 + .../lib/shopify/fragments/image.ts | 10 + .../lib/shopify/fragments/product.ts | 64 + .../lib/shopify/fragments/seo.ts | 8 + examples/vercel-commerce/lib/shopify/index.ts | 455 +++++ .../lib/shopify/mutations/cart.ts | 45 + .../lib/shopify/queries/cart.ts | 10 + .../lib/shopify/queries/collection.ts | 56 + .../lib/shopify/queries/menu.ts | 10 + .../lib/shopify/queries/page.ts | 41 + .../lib/shopify/queries/product.ts | 32 + examples/vercel-commerce/lib/shopify/types.ts | 272 +++ examples/vercel-commerce/lib/type-guards.ts | 27 + examples/vercel-commerce/lib/utils.ts | 39 + examples/vercel-commerce/license.md | 21 + examples/vercel-commerce/next.config.js | 13 + examples/vercel-commerce/package.json | 38 + examples/vercel-commerce/pnpm-lock.yaml | 1812 +++++++++++++++++ examples/vercel-commerce/postcss.config.js | 6 + examples/vercel-commerce/prettier.config.js | 9 + examples/vercel-commerce/tailwind.config.js | 54 + examples/vercel-commerce/tsconfig.json | 28 + 82 files changed, 5831 insertions(+) create mode 100644 examples/vercel-commerce/.env.example create mode 100644 examples/vercel-commerce/.gitignore create mode 100644 examples/vercel-commerce/.vscode/launch.json create mode 100644 examples/vercel-commerce/.vscode/settings.json create mode 100644 examples/vercel-commerce/README.md create mode 100644 examples/vercel-commerce/app/[page]/layout.tsx create mode 100644 examples/vercel-commerce/app/[page]/opengraph-image.tsx create mode 100644 examples/vercel-commerce/app/[page]/page.tsx create mode 100644 examples/vercel-commerce/app/api/revalidate/route.ts create mode 100644 examples/vercel-commerce/app/error.tsx create mode 100644 examples/vercel-commerce/app/favicon.ico create mode 100644 examples/vercel-commerce/app/globals.css create mode 100644 examples/vercel-commerce/app/layout.tsx create mode 100644 examples/vercel-commerce/app/opengraph-image.tsx create mode 100644 examples/vercel-commerce/app/page.tsx create mode 100644 examples/vercel-commerce/app/product/[handle]/page.tsx create mode 100644 examples/vercel-commerce/app/robots.ts create mode 100644 examples/vercel-commerce/app/search/[collection]/opengraph-image.tsx create mode 100644 examples/vercel-commerce/app/search/[collection]/page.tsx create mode 100644 examples/vercel-commerce/app/search/children-wrapper.tsx create mode 100644 examples/vercel-commerce/app/search/layout.tsx create mode 100644 examples/vercel-commerce/app/search/loading.tsx create mode 100644 examples/vercel-commerce/app/search/page.tsx create mode 100644 examples/vercel-commerce/app/sitemap.ts create mode 100644 examples/vercel-commerce/components/carousel.tsx create mode 100644 examples/vercel-commerce/components/cart/actions.ts create mode 100644 examples/vercel-commerce/components/cart/add-to-cart.tsx create mode 100644 examples/vercel-commerce/components/cart/cart-context.tsx create mode 100644 examples/vercel-commerce/components/cart/close-cart.tsx create mode 100644 examples/vercel-commerce/components/cart/delete-item-button.tsx create mode 100644 examples/vercel-commerce/components/cart/edit-item-quantity-button.tsx create mode 100644 examples/vercel-commerce/components/cart/modal.tsx create mode 100644 examples/vercel-commerce/components/cart/open-cart.tsx create mode 100644 examples/vercel-commerce/components/grid/index.tsx create mode 100644 examples/vercel-commerce/components/grid/three-items.tsx create mode 100644 examples/vercel-commerce/components/grid/tile.tsx create mode 100644 examples/vercel-commerce/components/icons/logo.tsx create mode 100644 examples/vercel-commerce/components/label.tsx create mode 100644 examples/vercel-commerce/components/layout/footer-menu.tsx create mode 100644 examples/vercel-commerce/components/layout/footer.tsx create mode 100644 examples/vercel-commerce/components/layout/navbar/index.tsx create mode 100644 examples/vercel-commerce/components/layout/navbar/mobile-menu.tsx create mode 100644 examples/vercel-commerce/components/layout/navbar/search.tsx create mode 100644 examples/vercel-commerce/components/layout/product-grid-items.tsx create mode 100644 examples/vercel-commerce/components/layout/search/collections.tsx create mode 100644 examples/vercel-commerce/components/layout/search/filter/dropdown.tsx create mode 100644 examples/vercel-commerce/components/layout/search/filter/index.tsx create mode 100644 examples/vercel-commerce/components/layout/search/filter/item.tsx create mode 100644 examples/vercel-commerce/components/loading-dots.tsx create mode 100644 examples/vercel-commerce/components/logo-square.tsx create mode 100644 examples/vercel-commerce/components/opengraph-image.tsx create mode 100644 examples/vercel-commerce/components/price.tsx create mode 100644 examples/vercel-commerce/components/product/gallery.tsx create mode 100644 examples/vercel-commerce/components/product/product-context.tsx create mode 100644 examples/vercel-commerce/components/product/product-description.tsx create mode 100644 examples/vercel-commerce/components/product/variant-selector.tsx create mode 100644 examples/vercel-commerce/components/prose.tsx create mode 100644 examples/vercel-commerce/components/welcome-toast.tsx create mode 100644 examples/vercel-commerce/fonts/Inter-Bold.ttf create mode 100644 examples/vercel-commerce/lib/constants.ts create mode 100644 examples/vercel-commerce/lib/shopify/fragments/cart.ts create mode 100644 examples/vercel-commerce/lib/shopify/fragments/image.ts create mode 100644 examples/vercel-commerce/lib/shopify/fragments/product.ts create mode 100644 examples/vercel-commerce/lib/shopify/fragments/seo.ts create mode 100644 examples/vercel-commerce/lib/shopify/index.ts create mode 100644 examples/vercel-commerce/lib/shopify/mutations/cart.ts create mode 100644 examples/vercel-commerce/lib/shopify/queries/cart.ts create mode 100644 examples/vercel-commerce/lib/shopify/queries/collection.ts create mode 100644 examples/vercel-commerce/lib/shopify/queries/menu.ts create mode 100644 examples/vercel-commerce/lib/shopify/queries/page.ts create mode 100644 examples/vercel-commerce/lib/shopify/queries/product.ts create mode 100644 examples/vercel-commerce/lib/shopify/types.ts create mode 100644 examples/vercel-commerce/lib/type-guards.ts create mode 100644 examples/vercel-commerce/lib/utils.ts create mode 100644 examples/vercel-commerce/license.md create mode 100644 examples/vercel-commerce/next.config.js create mode 100644 examples/vercel-commerce/package.json create mode 100644 examples/vercel-commerce/pnpm-lock.yaml create mode 100644 examples/vercel-commerce/postcss.config.js create mode 100644 examples/vercel-commerce/prettier.config.js create mode 100644 examples/vercel-commerce/tailwind.config.js create mode 100644 examples/vercel-commerce/tsconfig.json diff --git a/examples/vercel-commerce/.env.example b/examples/vercel-commerce/.env.example new file mode 100644 index 00000000..9ff0463d --- /dev/null +++ b/examples/vercel-commerce/.env.example @@ -0,0 +1,7 @@ +COMPANY_NAME="Vercel Inc." +TWITTER_CREATOR="@vercel" +TWITTER_SITE="https://nextjs.org/commerce" +SITE_NAME="Next.js Commerce" +SHOPIFY_REVALIDATION_SECRET="" +SHOPIFY_STOREFRONT_ACCESS_TOKEN="" +SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com" diff --git a/examples/vercel-commerce/.gitignore b/examples/vercel-commerce/.gitignore new file mode 100644 index 00000000..0298027e --- /dev/null +++ b/examples/vercel-commerce/.gitignore @@ -0,0 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage +.playwright + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env* +!.env.example + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/vercel-commerce/.vscode/launch.json b/examples/vercel-commerce/.vscode/launch.json new file mode 100644 index 00000000..448434dd --- /dev/null +++ b/examples/vercel-commerce/.vscode/launch.json @@ -0,0 +1,28 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Next.js: debug server-side", + "type": "node-terminal", + "request": "launch", + "command": "pnpm dev" + }, + { + "name": "Next.js: debug client-side", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000" + }, + { + "name": "Next.js: debug full stack", + "type": "node-terminal", + "request": "launch", + "command": "pnpm dev", + "serverReadyAction": { + "pattern": "started server on .+, url: (https?://.+)", + "uriFormat": "%s", + "action": "debugWithChrome" + } + } + ] +} diff --git a/examples/vercel-commerce/.vscode/settings.json b/examples/vercel-commerce/.vscode/settings.json new file mode 100644 index 00000000..8345c107 --- /dev/null +++ b/examples/vercel-commerce/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true, + "editor.codeActionsOnSave": { + "source.fixAll": "explicit", + "source.organizeImports": "explicit", + "source.sortMembers": "explicit" + } +} diff --git a/examples/vercel-commerce/README.md b/examples/vercel-commerce/README.md new file mode 100644 index 00000000..73299027 --- /dev/null +++ b/examples/vercel-commerce/README.md @@ -0,0 +1,71 @@ +[![Deploy with Vercel](https://vercel.com/button)](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 high-perfomance, server-rendered Next.js App Router ecommerce application. + +This template uses React Server Components, Server Actions, `Suspense`, `useOptimistic`, and more. + +

+ +> 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/)) +- [Ecwid by Lightspeed](https://github.com/Ecwid/ecwid-nextjs-commerce/) ([Demo](https://ecwid-nextjs-commerce.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. + +- [React Bricks](https://github.com/ReactBricks/nextjs-commerce-rb) ([Demo](https://nextjs-commerce.reactbricks.com/)) + - Edit pages, product details, and footer content visually using [React Bricks](https://www.reactbricks.com) visual headless CMS. + +## 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. + +> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store. + +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 +pnpm install +pnpm dev +``` + +Your app should now be running on [localhost:3000](http://localhost:3000/). + +
+ Expand if you work at Vercel and want to run locally and / or contribute + +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. +
+ +## Vercel, Next.js Commerce, and Shopify Integration Guide + +You can use this comprehensive [integration guide](https://vercel.com/docs/integrations/ecommerce/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. diff --git a/examples/vercel-commerce/app/[page]/layout.tsx b/examples/vercel-commerce/app/[page]/layout.tsx new file mode 100644 index 00000000..50614b5b --- /dev/null +++ b/examples/vercel-commerce/app/[page]/layout.tsx @@ -0,0 +1,12 @@ +import Footer from 'components/layout/footer'; + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( + <> +
+
{children}
+
+