Commercejs Examples Save
🚀 Example projects and code to help you get started with Commerce.js
Project README
Commerce.js Examples
Example projects to help you get started with Commerce.js.
Join our Slack · Read the Docs · Learn more about Commerce.js
Examples
We have broken down our examples into categories with descriptions:
| Example | Description | Where are these hosted? |
|---|---|---|
| Demo stores | Open source demo stores for you to fork, pull apart and build on top of | |
| Code Examples | Examples of granular eCommerce functionality demonstrated via IDE editors/code playgrounds | CodePenCodeSandbox Community docs page |
| Guides | Step-by-step guides on eCommerce functionality and instructions on using other Commerce.js tools | BlogCommunity docs page |
| Tutorials | Step-by-step tutorial of building a full Commerce.js app with products list, cart and checkout flow | BlogCommunity docs page |
| Videos | Short sharp video guides demonstrating how to use the Commerce.js SDK to build projects | Youtube |
Demo stores
| Examples | Description |
|---|---|
| Next.js - ChopChop starter kit | Open source demo and starker kit built with Next.js and Commerce.js. One click deploy to Vercel, read the blog |
| Next.js - Fullly fledged eCommerce store | Open source demo store that can be one click deployed to Netlify. Read the integration blog |
| Next.js - Fully fledged eCommerce store | Open source demo store that can be one click deployed to Vercel |
| Vue.js - Shoppable campaign demo | Boilerplate and live demo |
| React.js - Socks and Shoes demo | Lightweight demo store in React.js |
| Vue.js - Socks and Shoes demo | Lightweight demo store in Vue.js |
| Ionic - Native mobile application | ChopChop demo for Android and iOS using Ionic Framworkd |
Code Examples
| Examples | Description |
|---|---|
| React.js + Three.js - Product display | Displaying a Three.js product animation in a React app |
| React.js + Three.js - Interactive cart | An interactive cart with Three.js renderend products |
| React.js + Three.js - Animated checkout form | An animated, interactive checkout form |
| React.js - Product catalogue | A simple product catalogue built with Commerce.js SDK v2 and React.js |
| Vue.js - Full eCommerce app | A complete eCommerce app with cart, checkout and receipt |
| Vue.js - Product catalogue | A basic product catalogue built with Commerce.js SDK v2 and Vue.js |
| Vue.js - Product card | A product card layout built with Commerce.js SDK v2 installed as CDN |
| Vue.js - Add to Cart | A cart with cart total display built with Commerce.js SDK v2 |
| Vue.js - Cart Modal | A cart application built with Commerce.js SDK v2 |
| Vue.js - Checkout | A checkout for capturing orders built with Vue.js and Commerce.js SDK v2 |
| HTML + CSS - Checkout | A vanilla checkout form, built with the Commerce.js SDK v2 installed as a CDN |
Guides
| Guides | Description |
|---|---|
| Chec CLI | Guide on getting started with using the Chec CLI |
| Email receipt template | Create an email order receipt using MJML |
| Email - Adding customers to Drip at checkout | Add your customers to Drip for more contextual email marketing |
| Webhooks - Slack notifications for new orders | Get notified via Slack when you receive new orders |
| Webhooks - Twilio notifications for new orders | Recieve SMS notificatons via Twilio when a new order is placed |
| Nuxt.js - Listing products in a catalogue | Create a simple Vuex store and rendered your data server-side using Nuxt.js |
| Nuxt.js - Adding products to a dynamic cart | Create a dynamic sliding cart and add products to it using Nuxt.js and Commerce.js SDK |
| Nuxt.js - Creating a checkout | Build a simple checkout using Nuxt.js and Commerce.js |
| Nuxt.js - Order confirmation and webhooks | Create a webhook to send an email via SendGrid to the customer after the checkout |
| Vue.js - Adding products to a cart | Create a simple shopping cart for your Vue.js app |
| Vue.js - Handling the checkout | Create a checkout form to capture an order in Vue.js |
| React.js - Displaying products in a catalogue | Display products in your React app |
| React.js - Listing products in a catalogue | Using React and Bootstrap, list your products with the Commerce.js SDK |
| React.js - Adding products to a cart with reccomended products | Create a simple cart for a React.js app that also displays recommended products |
| React.js - Adding products to cart | Create and add products to cart in your React eCommerce app |
| React.js - Creating a single page checkout | Build a single page checkout with Stripe and the Commerce.js SDK |
| React.js - Displaying a receipt + webhook notification | Create an order confirmation display to the customer plus build a webhook notification with Slack |
| Three.js - Building a product display page with React | Create a product display page with a Three.js rendered product image |
| Three.js - Creating a cart with React | Create an interactive cart with Three.js rendered products |
| Gatsby - Building static product pages | Build static product pages on the JAMstack with Gatsby and Commerce.js |
Tutorials
| Tutorials | Description |
|---|---|
| Vue.js demo store | A fully-fledged demo store handling eCommerce logic such as product catalogue, product variants, cart, checkout, and receipt confirmation built with Commerce.js SDK v2 |
| Vue.js demo store | A simple demo store with a product catalogue, cart and checkout built with Commerce.js SDK v2 |
| Nuxt.js storefront | Build a simple storefront with categories and individual product pages using Nuxt.js |
| Next.js - Create a Next.js store | Build a simple storefront with categories and individual product pages using Next.js |
| Gatsby - Create a Gatsby storefront | Build a simple storefront with categories and individual product pages using Gatsby |
Videos
| Video | Description |
|---|---|
| Nuxt.js - Storefront, categories and product pages | Build a simple storefront with categories and individual product pages using Nuxt.js |
| Next.js - Storefront, categories and product pages | Create a storefront with categories and individual product pages using Next.js |
| Gatsby - build a gatsby storefront | Create a storefront with categories and individual product pages using Gatsby |
| Svelte - build a store in Svelte | Create a storefront with categories and individual product pages using Svelte |
Contributing to our resources
If you'd like to contribute with an example project you have developed using Chec API and the Commerce.js SDK, please refer to our template guidelines on writing guides and tutorial:
Internal
**Naming convention for demo repositories: **
commercejs-{FRONT-END}-demo-{SCOPE}
Examples:
- commercejs-nextjs-demo-cart
- commercejs-react-demo-store
- commercejs-react-demo-cart
Open Source Agenda is not affiliated with "Commercejs Examples" Project. README Source: chec/commercejs-examples
Stars
67
Open Issues
78
Last Commit
1 year ago
Repository
Homepage
Open Source Agenda Badge
