/commercejs-examples

๐Ÿš€ Example projects and code to help you get started with Commerce.js

Primary LanguageVue

Commerce.js

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 CodePen
CodeSandbox
Community docs page
Guides Step-by-step guides on eCommerce functionality and instructions on using other Commerce.js tools Blog
Community docs page
Tutorials Step-by-step tutorial of building a full Commerce.js app with products list, cart and checkout flow Blog
Community 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