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 is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.

Table of contents

• Starter features
• Getting started
  • ⚙️ Installation guide
  • ⬇️ Import test studio content
  • ⬇️ Seed Commerce Layer data
• Contributors guide
• Need help?
• License

Starter features

• An ecommerce storefront built with Nextjs, Commerce Layer react components library, and Tailwind CSS.
• International shopping capabilities powered by Commerce Layer APIs.
• Micro CLI seeder 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).

2. Rename the /env.example file to .env and add the following:

• Your project ID, dataset, and token from manage.sanity.io.
• Your client ID and client endpoint from Commerce Layer.

3. Run the command below to install the necessary dependencies of your project:

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:

npm run dev

This will run the frontend at http://localhost:3000

and Sanity studio at http://localhost:3333/desk

⬇️ Import test studio content (ignore if you created via Sanity dataset creation)

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:

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.

sanity dataset import ../.sanity-template/data/<name of extracted folder>/data.ndjson <your_dataset>

3. Check the frontend and studio now to preview the imported content.

⬇️ Seed Commerce Layer data

1. Create a Commerce Layer account.

Also, general info here: https://docs.commercelayer.io/developers/v/how-tos/

2. Create a new organization.

3. Create a new application in Settings > Applications with Kind set to integration, and Role set to admin.

4. In your newly created application, copy your Client ID and Client Secret.

5. Install the Commerce Layer Seeder which is available as an npm package:

// npm
npm install -g @commercelayer/commercelayer-seeder-cli

// yarn
yarn global add @commercelayer/commercelayer-seeder-cli

Output

✓ Importing the seed in Commerce Layer... 21.3 secs
🎉The seed has been imported with success.

https://dashboard.commercelayer.io/

6. Run the command below to import a set of products, related prices, and inventory into your organization.

commercelayer-seeder -i <your-client-id> -s <your-client-secret> -e https://<yourdomain>.commercelayer.io

7. To see the commands for other seeder options, type the command below:

commercelayer-seeder --help

Output

Usage: commercelayer-seeder [options]

Import a Commerce Layer seeder in your organization

Options:
  -v, --version                        output the current version
  -V, --version                        output the version number
  -i, --clientId <clientId>            your Commerce Layer application client ID
  -s, --clientSecret <clientSecret>    your Commerce Layer application client secret
  -e, --endpoint <endpoint>            your Commerce Layer application endpoint
  -b, --businessModel <businessModel>  the kind of business model you want to import
  -m, --maxItems <maxItems>            the maximum number of SKUs that will be imported
  -u, --resourcesUrl <resourcesUrl>    the resources URL or local path
  -h, --help                           display help for command

Contributors guide

1. Fork this repository (learn how to do this here).

2. Clone the forked repository like so:

git clone https://github.com/<your username>/sanity-template-commercelayer.git && cd sanity-template-commercelayer

3. Make your changes and create a pull request (learn how to do this).

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 (kindly scroll down to the bottom of the page).

2. Create an issue in this repository.

3. Ping us on Twitter.

License

This repository is published under the MIT license.

Want to learn more about how we built this starter and how you can build yours? Sign up for our newsletter to get notified once we publish the article.