Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hygraph/hygraph-commerce-starter
https://github.com/hygraph/hygraph-commerce-starter
graphcms graphql nextjs reference-implementation stripe tailwindcss
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hygraph/hygraph-commerce-starter
- Owner: hygraph
- License: mit
- Created: 2021-01-28T15:24:09.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T18:28:49.000Z (4 months ago)
- Last Synced: 2024-08-02T20:46:34.560Z (3 months ago)
- Topics: graphcms, graphql, nextjs, reference-implementation, stripe, tailwindcss
- Language: JavaScript
- Homepage: https://commerce.withheadlesscms.com
- Size: 319 KB
- Stars: 169
- Watchers: 24
- Forks: 68
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hygraph Commerce Starter
Build modern, SEO ready commerce storefronts with Hygraph, Next.js, Stripe and Tailwind CSS
[](https://app.graphcms.com/clone/d6ae678601534be5a7bde7fba69acd24?name=Commerce%20Shop)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter&env=HYGRAPH_MUTATION_TOKEN,HYGRAPH_QUERY_TOKEN,HYGRAPH_ENDPOINT,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY&envDescription=Stripe%20keys%20and%20GraphCMS%20tokens&envLink=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter%23usage&demo-title=GraphCMS%20Commerce%20Starter&demo-description=Build%20modern%2C%20SEO%20ready%20commerce%20storefronts%20with%20GraphCMS%2C%20Next.js%2C%20Stripe%20and%20Tailwind%20CSS&demo-url=https%3A%2F%2Fcommerce.withheadlesscms.com)
## About
This project is an example of how to build fully-functioning Next.js commerce storefront with Hygraph and Stripe. View the demo on [https://commerce.withheadlesscms.com/](https://commerce.withheadlesscms.com/).
## Features
- Fully localized product catalogue built with [Hygraph localization](https://hygraph.com/content-localization) and [Next.js](https://nextjs.org/docs/advanced-features/i18n-routing).
- Pre-rendered catalogue pages via [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation).
- Dynamic client-side data fetching via [SWR](https://swr.vercel.app).
- Localized shopping cart with [`react-use-cart`](https://github.com/notrab/react-use-cart).
- Hosted checkout and payment flow with [Stripe Checkout](https://stripe.com/docs/payments/checkout).
- Use the [Hygraph mutation API](https://hygraph.com/mutation-api) with [API Routes](https://nextjs.org/docs/api-routes/introduction) to create orders on successful checkout (via webhook).
- Multiple currency support.
## Usage
> This reference application requires a Stripe account
1. Clone the repository with [`degit`](https://github.com/Rich-Harris/degit) and install project dependencies.
```bash
npx degit Hygraph/hygraph-commerce-starter#main hygraph-commerce-starter
cd hygraph-commerce-starter
npm install
```
2. Create a new Hygraph project using the `Commerce Starter` template.
3. Add a `.env` file by cloning `.env.sample` and providing the required variable values.
> It is recommended you create separate Hygraph [auth tokens](https://hygraph.com/docs/authorization#permanent-auth-tokens) to handle querying and mutating data.
```
HYGRAPH_MUTATION_TOKEN=
HYGRAPH_QUERY_TOKEN=
HYGRAPH_ENDPOINT=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SIGNING_SECRET=
```
4. Setup a [Stripe webhook](https://stripe.com/docs/payments/handling-payment-events) for the `checkout.session.completed` event to order to enable Hygraph fulfilment via the mutation API.
5. Configure support for more locales or currencies in [`hygraph.config.js`](hygraph.config.js) if required. Learn more [here](#configuration).
6. Run `npm run dev`
## Configuration
Project configuration for supported locales and currencies is managed in [`hygraph.config.js`](hygraph.config.js).
> It is important that the `locales` array reflects the enabled locales in your Hygraph project.
```js
module.exports = {
locales: [
{
value: 'en',
label: 'English',
default: true
},
{
value: 'de',
label: 'German'
}
],
currencies: [
{
code: 'GBP',
default: true
},
{
code: 'EUR'
}
]
}
```