Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brob/sanity-commercelayer
Commerce Layer Starter
https://github.com/brob/sanity-commercelayer
Last synced: 11 days ago
JSON representation
Commerce Layer Starter
- Host: GitHub
- URL: https://github.com/brob/sanity-commercelayer
- Owner: brob
- License: mit
- Created: 2021-04-12T14:16:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-05T23:46:55.000Z (about 1 month ago)
- Last Synced: 2024-12-06T00:27:43.255Z (about 1 month ago)
- Language: TypeScript
- Size: 14.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Commerce Layer Starter
A multi-country ecommerce starter that features the sanity studio built with Commerce Layer, Next.js, and deployed to Netlify.
## What is Commerce Layer?
[Commerce Layer](https://commercelayer.io) is a headless commerce platform and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, or IoT device, with ease. Perfect fit for the best-of-breed CMSs, static site generators, and any other tools you already master and love, our blazing-fast and secure API will help you make your content shoppable on a global scale.
## Table of contents
- [Starter features](#starter-features)
- [Getting started](#getting-started)
- [⚙️ Installation guide](#%EF%B8%8F-installation-guide)
- [⬇️ Import test studio content](#%EF%B8%8F-import-test-studio-content)
- [⬇️ Seed Commerce Layer data](#%EF%B8%8F-seed-commerce-layer-data)
- [Contributors guide](#contributors-guide)
- [Need help?](#need-help)
- [License](#license)
## Starter features
- An ecommerce storefront built with Nextjs, [Commerce Layer react components library](https://github.com/commercelayer/commercelayer-react-components), and Tailwind CSS.
- International shopping capabilities powered by [Commerce Layer](https://commercelayer.io) APIs.
- [Micro CLI seeder](https://github.com/commercelayer/commercelayer-seeder-cli) to import Commerce Layer data.
- Structured content on Sanity CMS.
- Localization support.
- Deployment configuration to Netlify.
## Getting started
The quickest way to get up and running is to go to https://www.sanity.io/create?template=commercelayer/sanity-template-commercelayer and create a new project by following the instructions on Sanity.
Alternatively, you can clone this repository, configure the starter, import the dataset into your Sanity studio, import some test data into your Commerce Layer organization, and deploy your application.
### ⚙️ Installation guide
1. Clone this repository ([learn how to do this](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository)).
2. Rename the `/env.example` file to `.env` and add the following:
- Your project ID, dataset, and token from [manage.sanity.io](https://manage.sanity.io).
- Your client ID and client endpoint from [Commerce Layer](https://core.commercelayer.io/users/sign_up).
3. Run the command below to install the necessary dependencies of your project:
```bash
npm install && cd /studio && sanity install
```
4. Add your `projectTitle`, `projectId,` and `dataset` in `/studio/sanity.json`.
5. Run the command below to start the development server:
```bash
npm run dev
```
This will run the frontend at `localhost:3000` and studio at `localhost:3333`.
### ⬇️ Import test studio content
> If you set up your project from the starters page on Sanity, you should skip this step as Sanity will automatically add the dataset's content.
1. Extract the `production.tar.gz` file in `/.sanity-template/data` directory using the command below:
```bash
tar -xf production.tar.gz
```
The extracted folder name should look like `production-export-2021-02-26t14-15-56-557z`.
2. Run the command below in `/studio` to import the `data.ndjson` file in the extracted folder.
```bash
sanity dataset import ../.sanity-template/data//data.ndjson
```
3. Check the frontend and studio now to preview the imported content.
### ⬇️ Seed Commerce Layer data
1. Create a [Commerce Layer account](https://core.commercelayer.io/users/sign_up).
2. Create a new organization.
3. Create a new application in **Settings > Applications** with **Kind** set to `sanity`.
4. In your newly created application, copy your Client ID.
5. Install the Commerce Layer Seeder which is available as an [npm package](https://www.npmjs.com/package/@commercelayer/commercelayer-seeder-cli):
```
// npm
npm install -g @commercelayer/commercelayer-seeder-cli
// yarn
yarn global add @commercelayer/commercelayer-seeder-cli
```
6. Run the command below to import a [set of products](https://data.commercelayer.app/seed/skus.json), related [prices](https://data.commercelayer.app/seed/prices.json), and [inventory](https://data.commercelayer.app/seed/stock_items.json) into your organization.
```bash
commercelayer-seeder -i your-client-id -e https://.commercelayer.io
```
7. To see the commands for other seeder options, type the command below:
```bash
commercelayer-seeder --help
```
## Contributors guide
1. Fork [this repository](https://github.com/commercelayer/sanity-template-commercelayer) (learn how to do this [here](https://help.github.com/articles/fork-a-repo)).
2. Clone the forked repository like so:
```bash
git clone https://github.com//sanity-template-commercelayer.git && cd sanity-template-commercelayer
```
3. Make your changes and create a pull request ([learn how to do this](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)).
4. Someone will attend to your pull request and provide some feedback.
## Need help?
1. Request an invite to join [Commerce Layer's Slack community](https://commercelayer.io/developers) (kindly scroll down to the bottom of the page).
2. Create an [issue](https://github.com/commercelayer/sanity-template-commercelayer/issues) in this repository.
3. Ping us [on Twitter](https://twitter.com/commercelayer).
## License
This repository is published under the [MIT](LICENSE) license.
---
Want to learn more about how we built this starter and how you can build yours? Sign up for our [newsletter](https://commercelayer.io) to get notified once we publish the article.