Forem: Andrew Underwood

Next.js Commerce.js starter kit, one-click to Vercel

Andrew Underwood — Fri, 05 Feb 2021 01:10:17 +0000

Your headless commerce starter kit

ChopChop is a beautifully designed, elegantly developed, ope-source demo store and starter kit that sells fine tools for thoughtful cooks.

The TLDR

Stack includes:

Next.js
React Stripe Elements
Commerce.js
Vercel
Supports physical shipping and digital fulfillment
Accepts 135+ currencies
Is open-source on GitHub
Utilizes the most recent Next.js features (Next Image, Dynamic Routes)

Motivation

In 2020 we saw headless commerce and the Jamstack really take off, with developers flocking to this new way of building, optimizing, and maintaining sites.

Last year in August we launched our first open-source demo store to illustrate how our commerce APIs can be leveraged to build unique, high-performance purchasing experiences.

Since we release our first demo store, there’s been the Next.js 10 release, we’ve written React hooks for cart and checkout, and the focus on commerce has intensified as more businesses look to differentiate and elevate their online presence.

For developers

This open-source Commerce.js demo is statically built with Next.js, uses Stripe for payment, and is one-click deployable to Vercel. Product data (assets, prices, descriptions) and logic are all handled by Commerce.js.

The power of Next.js allows us to create static pages at build time by simply exporting the functions getStaticProps and getStaticPath``s inside our pages.

`javascript

export async function getStaticProps({ params }) {
const { permalink } = params;
const product = await commerce.products.retrieve(permalink, {
type: "permalink",
});
return {
props: {
product,
},
revalidate: 60,
};
}
export async function getStaticPaths() {
const { data: products } = await commerce.products.list();
return {
paths: products.map(({ permalink }) => ({
params: {
permalink,
},
})),
fallback: false,
};
}

Above we are fetching a list of products from Commerce.js, and following Next.js conventions to create paths, configure cache revalidation, and provide data to each of the dynamic pages.

The ChopChop demo leverages React context to store and mutate the current product theme (button colors), as well cart and checkout context to reduce network requests and latency for shoppers.

We’ve made this demo a shining example of both Next.js and Commerce.js, a powerful tech stack for high performance commerce experiences.

Make ChopChop your own

This is an open source demo that can be freely downloaded, built on top of, pulled apart, and rebranded. You can also;

Integrate another payment gateway, either one of our supported gateways or your own with our manual gateway API
Integrate with the Google Calendar API to automatically add ticketed items to a customer’s calendars
Suggest products from other sources based on items purchased, i.e. a book on knife skills if you buy the knife set
Add Algolia for integrated search
Add additional modules to the checkout flow to handle other content types, like booking a time to pickup in-store purchases
Integrate with a CMS to make the content editable
Create a customers login section using our customers endpoint
Use webhooks to deliver SMS notifications about orders

ChopChop, what are you waiting for?

There’s never been a better time to level up your customer experience or build a modern commerce site, so what are you waiting for? Create your free account with Commerce.js, or check out the demo store on our GitHub.

Next.js commerce app, one-click deploy to Netlify

Andrew Underwood — Wed, 25 Nov 2020 01:13:13 +0000

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!

Create static commerce sites with Gatsby

Andrew Underwood — Fri, 09 Oct 2020 22:05:18 +0000

Today we are excited to introduce a new way you can query products with Commerce.js when building static sites with Gatsby.

Static Site Generators (SSGs) really took off in 2019. One of the most notable SSGs to dominate the space has been Gatsby. Gatsby is a React-based, open source framework for creating websites and apps.

However, don’t be fooled by Static Site Generators. While they offer huge benefits for decreasing the time it takes for your product pages to load, it doesn’t mean they’re static. Once loaded, your blazing-fast static eCommerce store transforms via React hydration, giving you a real app-like look and feel, with a sprinkle of Commerce.js for managing cart and checkout.

With Gatsby now being a staple for front-end developers, we’ve made a Gatsby source plugin and are excited to get this into the hands of as many developers as possible. We’ve even seen community contributions for other SSGs since we started working on this, so it’s clear that this area is moving fast.

The Gatsby ecosystem consists of plugins, source plugins, and themes. Plugins enable you to inject scripts like Commerce.js, and source plugins allow you query data from almost any data source using GraphQL, meanwhile themes allow you to embed full Gatsby sites inside your existing Gatsby site.

We built the @chec/gatsby-source plugin to remove the boilerplate we’ve seen Commerce.js users write over the last year when working with Gatsby. We invite you to give it a try, and submit any feedback you have.

If you’re running a Gatsby site already, it’s incredibly easy to enable commerce to your project. Simply install the source plugin and query for products, categories, and information about your merchant account.

Step 1 - Install

npm install @chec/gatsby-source-chec # yarn add @chec/gatsby-source

Step 2 - Configure

// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...'
    }
  }
]

Step 3 - Query

{
  checMerchant {
    id
    business_name
  }

  allChecCategory {
    nodes {
      name
      slug
      description
      created
      id
    }
  }

  allChecProduct {
    nodes {
        id
        name
        price {
            formatted_with_symbol
        }
      }
  }
}

The best place to get started exploring query types is GraphiQL. Explore the Chec query types, and start building your website or app.

We’ve also made it even easier to work with Gatsby Image by automatically downloading product image assets, and creating local nodes for each. This means you can take advantage of all the features Gatsby Image brings, and serve product images even quicker alongside your static site.

To opt-in to downloading image assets automatically, enable downloadImageAssets inside your plugin options.

// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...',
      downloadImageAssets: true
    }
  }
]

You can see an example in the source plugin repository here, and watch a short video series on building with this plugin.

If you’re new to Gatsby, they have a handful of useful recipes to get started - start building with Gatsby today.

Introducing: HeadlessCommerce.org

Andrew Underwood — Mon, 29 Jun 2020 18:30:15 +0000

We're excited to introduce the launch of HeadlessCommerce.org, a community-curated list of best-in-class headless tools, technologies, and resources for website builders and businesses owners.

If your business is fast-moving, complex, or just ambitious, a headless commerce strategy will help you serve your customers faster, approach businesses problems creatively, and stay resource lean.

Why we built HeadlessCommerce.org

As an industry, “eCommerce” has become highly stratified, not to mention the “e” is a bit irrelevant now, so we built HeadlessCommerce.org for businesses and developers who want to explore and discover modern commerce technologies, and their complementary services.

At Chec and Commerce.js, we’re helping businesses navigate this shift to a headless stack. We believe that businesses, big and small, built on top of monolithic platforms will be left behind by modular, decoupled, API-driven businesses who can be anywhere and move quickly. So to accelerate this shift, we’re set on helping others in the community to discover and asses suitable tools for projects.

We want HeadlessCommerce to be the hub people go to when looking to decouple their business or starting a new headless project.

How you can use it

We’ve made it easy to browse the list with Categories and Filters. You can also bookmark resources to save for later reference.

If you think there are resources that play nice in the headless ecosystem and that we have missed, please feel free to add a recommendation.

What’s next

We’ve got plenty of ideas of how we can make HeadlessCommerce.org more valuable for developers and decision-makers. If you’ve got an idea you’d like to share or just want to give feedback, email us at hello@headlesscommerce.org.

You can read more about Chec/Commerce.js over on our blog.