We launched this Next.js demo and resource back in July but have since added more functionality to it so thought I'd share again here for the dev community.
Check out the repo here https://github.com/chec/commercejs-nextjs-demo-store
What's in the demo
Products
Using our products API, lists product images, descriptions, and prices in the app. Our products API now automatically detects image height and width.
Carts
The shopping cart uses the Commerce.js cart API. Carts are persisted for up to 30 days, and Commerce.js automatically remembers carts for visitors.
The checkout
Commerce.js provides many tools to streamline checkout implementations. The checkout in this demo store makes use of:
Commerce.js's country and region APIs,
the shipping methods API, and
the discounts API (for validating and applying discounts at the checkout).
Customers
Commerce.js provides inbuilt functionality for supporting customer logins without any server-side code. This demo store features an existing customer login page, and provides detail about previous orders. The customer information is also used to pre-populate the checkout with known customer details.
Payment gateways
This demo store is configured with the Chec "test gateway" out of the box, which provides a handy payment option while testing your storefront. Additionally, support for Stripe Elements is included if Stripe is configured on the Chec Dashboard.
Enabling Stripe
You must enable Stripe in the Chec Dashboard by following the instructions provided. You may add your sandbox keys for Stripe, and use a sandbox Chec public API key to test with Stripe. Both the Chec public API key, and the Stripe "publishable" key are configured in the .env file. See step two of "Manual setup and Netlify deployment"
Motivation
We built this resource to show developers how they can build 100% custom eCommerce experiences from storefront to receipt with Commerce.js.
Due to the complexity of commerce and the proliferation of hosted checkout forms, too many eCom experiences look the same. We want developers (of all levels) to have better tools to create better experiences. Resources like these provide a building block so devs can build eCom projects that don't look and act like every other Shopify store out there.
Please checkout the repo, fork it, build on top of it, and let us know your thoughts!
Top comments (0)