chec / commercejs-nextjs-vercel Goto Github PK

Serverless eCommerce demo store built for the Jamstack. Built with Commerce.js, Next.js and can be one click deployed to Vercel. Includes product catalogue, categories, variants, cart, checkout, order confirmation and printable receipts. This is an open source project.

Home Page: https://commercejs-nextjs-vercel.vercel.app/

License: BSD 3-Clause "New" or "Revised" License

JavaScript 75.99% Shell 0.25% SCSS 23.76%

ecommerce commercejs chec open-source nextjs vercel one-click-deploy serverless jamstack demo-store

commercejs-nextjs-vercel's Introduction

Demo Store with Commerce.js and Next.js 🛍️💳

A high-fidelity fully-fledged eCommerce demo store built using the Commerce.js SDK and Next.js with live deployment to Vercel.

Note

This app is built using Commerce.js v2 SDK

Overview

This README will guide you in getting up and running with a fully-fledged eCommerce template. We have configured this template for you to one-click deploy directly to Vercel. Alternatively, you can manually deploy to your choice of hosting platform.

Prequisites

IDE or code editor of your choice
Node (v8.2.0 or higher)
NPM or Yarn
Chec CLI yarn global add @chec/cli

Setup

Create a Chec account.

Now that you’ve installed Chec CLI globally, you will be able to access the list of chec [COMMANDS], one of which is registering for a Chec account. Let’s go ahead and get that set up!

# Open the Chec registration page in your browser
chec register

Follow the rest of the walk-through to set up your merchant details. Alternatively, you can go here to register for a Chec account.

One-click Deploy with Vercel (recommended)

The one-click deploy allows you to add the Vercel application to your GitHub account to clone the commercejs-nextjs-vercel repository and deploy it automatically. Be sure to go to Vercel and sign up for an account with Github, GitLab, or GitBucket before clicking the deploy button.

Please note that the site deploy will first fail as we have yet to enter in the environment variables for your Vercel site. Configure your site by going under the Project Settings in the General tab then scroll down to Environment Variables to enter your public API key. The value is automatically encrypted and stored in Vercel system. The variable name input is CHEC_PUBLIC_KEY and the value input is the Public Key. Please note that for the purpose of getting you up and running with a live deploy preview of the demo store, we have provided you with the public_key from our demo merchant account. Access this key here and copy over the CHEC_PUBLIC_KEY value.

🥞 Stack

Framework - Next.js
eCommerce - Chec/Commerce.js
Hosting - Vercel
Styling - Bootstrap and SASS

Customization and Extendability

Add shipping zones and enable shipping options in each product
Adding new features or extending existing features
Customizing the styling
- All global styles are done using SASS and Bootstrap
A/B testing unique checkout designs and flow
Integrating other backend tools like Content Management Systems, Customer Support, Fulfillment services, and more.
Fetching real client reviews from reviews APIs
Adding search functionality
Leveraging webhooks to automate post checkout actions

commercejs-nextjs-vercel's People

Contributors

Stargazers

Watchers

commercejs-nextjs-vercel's Issues

Null pointer errors in production build

The build is successfully deployed and I have no error in dev env but when I got to the production url I have the following error screen.

An unexpected error has occurred.

And this in console:

framework.0bfd43c6146a5dba8d12.js:1 TypeError: Cannot read property 'trim' of undefined
at d (commons.ccaa6ed8e52a07b02bab.js:1)
at b (commons.ccaa6ed8e52a07b02bab.js:1)
at l.value (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at l.value (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at ref (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at Fu (framework.0bfd43c6146a5dba8d12.js:1)
at t.unstable_runWithPriority (framework.0bfd43c6146a5dba8d12.js:1)
at ql (framework.0bfd43c6146a5dba8d12.js:1)
at Ru (framework.0bfd43c6146a5dba8d12.js:1)
at ku (framework.0bfd43c6146a5dba8d12.js:1)
vo @ framework.0bfd43c6146a5dba8d12.js:1
main-91b36d8235fedba5b259.js:1 TypeError: Cannot read property 'trim' of undefined
at d (commons.ccaa6ed8e52a07b02bab.js:1)
at b (commons.ccaa6ed8e52a07b02bab.js:1)
at l.value (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at l.value (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at ref (084d51adf43dd2d7326ea0fbfb8671e688ad3cdb.9356addacf4eb76817cf.js:1)
at Fu (framework.0bfd43c6146a5dba8d12.js:1)
at t.unstable_runWithPriority (framework.0bfd43c6146a5dba8d12.js:1)
at ql (framework.0bfd43c6146a5dba8d12.js:1)
at Ru (framework.0bfd43c6146a5dba8d12.js:1)
at ku (framework.0bfd43c6146a5dba8d12.js:1)
(anonymous) @ main-91b36d8235fedba5b259.js:1
08dcbcd9148ab9537593b0245b36b2b2f30850b6.c5fa99948ff0e1873b9b.js:1 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
at s.value (08dcbcd9148ab9537593b0245b36b2b2f30850b6.c5fa99948ff0e1873b9b.js:1)
Failed to load resource: the server responded with a status of 404 ()

Get this issue when using already put fake payment in log

Unhandled Promise Rejection: TypeError: a.message.forEach is not a function. (In 'a.message.forEach((function(e,n){var a=e.param,i=e.error;t.setState({errors:q({},t.state.errors,Object(o.a)({},a,i))})}))', 'a.message.forEach' is undefined)

index.js:1 Warning: Received `false` for a non-boolean attribute `disable`.

Add a product to cart
Go to checkout
See console error

index.js:1 Warning: Received `false` for a non-boolean attribute `disable`.

If you want to write it to the DOM, pass a string instead: disable="false" or disable={value.toString()}.

If you used to conditionally omit it with disable={condition && value}, pass disable={condition ? value : undefined} instead.
    in button (at checkout/index.js:460)
    in form (at checkout/index.js:452)
    in div (at checkout/index.js:421)
    in div (at checkout/index.js:420)
    in div (at checkout/index.js:346)
    in div (at checkout/index.js:328)
    in Root (at checkout/index.js:323)
    in CheckoutPage (created by ConnectFunction)

Sunset this repository in favour of commercejs-nextjs-demo-store

This repository was originally created as a copy of https://github.com/chec/commercejs-nextjs-demo-store. It has some different products in it, and the readme is focussed around deploying it to Vercel rather than Netlify.

We want to sunset/archive this repository and focus on the other one, which can be configured to deploy to both Vercel and Netlify.

Tasks:

Make https://github.com/chec/commercejs-nextjs-demo-store deployable to Vercel
Update readme in that repo so the deployment instructions are clearly separated for each provider
Add build badge for Vercel deployment status to that repo
Archive this repo

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Add a product to cart
Go to the checkout
See error in the console

index.js:1 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (at ShippingForm.js:51)
    in label (at ShippingForm.js:47)
    in div (at ShippingForm.js:46)
    in div (at ShippingForm.js:45)
    in ShippingForm (at checkout/index.js:369)
    in div (at checkout/index.js:368)
    in form (at checkout/index.js:363)
    in div (at checkout/index.js:347)
    in div (at checkout/index.js:346)
    in div (at checkout/index.js:328)
    in Root (at checkout/index.js:323)
    in CheckoutPage (created by ConnectFunction)

Why do I need chec account

Is it possible to use it without registering on chec?