Jamstack eCommerce 101

Rate this content
Bookmark

Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify.

This workshop has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

JAMstack is an acronym for JavaScript, APIs, and Markup Stack. It is a modern architecture used to build web applications, where websites are plain HTML pages pre-generated by static site generators during build time, enhancing flexibility and performance.

Headless commerce is the practice of separating the front end and back end of an ecommerce store. It allows for more flexibility, better performance, and efficient development by decoupling the presentation layer from core business transactions.

Commerce Layer is a headless commerce platform and order management system that lets developers add global shopping capabilities to their presentation layer with ease. It provides several commerce APIs to handle transactional functionalities of an ecommerce platform.

Headless commerce offers benefits such as speed and flexibility, improved security and reliability, and modularity. It allows developers to work on independent models, makes it easier to leverage JAMstack for faster performance, and enables the reuse of functionalities across different parts of the application.

JAMstack improves web development by allowing the separation of the UI from data, similar to mobile app development. It enhances flexibility and performance, enabling the use of third-party APIs to encapsulate server-side functionalities and dynamic content.

Commerce Layer enables global ecommerce by allowing businesses to sell in multiple markets with independent business logic without data duplication. It provides APIs to manage transactions and integrates with any CMS to handle content, making it easier to add international shopping capabilities.

SKUs (Stock Keeping Units) in Commerce Layer are unique identifiers for each product item and its variations within an ecommerce system. They help track availability, manage inventory, and link product information between the content management system and Commerce Layer.

In Commerce Layer, an order process involves creating an order in draft state, selecting items (SKUs), adding shipping and billing information, applying discounts (if any), selecting a shipping method, and finally, confirming and fulfilling the order.

The workshop uses tools and technologies such as Commerce Layer, JAMstack, static site generators, APIs, headless CMSs like Strapi, JavaScript, and various libraries like Lodash and js-cookie for building and managing an ecommerce platform.

You can seed an organization with test data in Commerce Layer using the CLI by running commands like 'clayer seed' with a resource URL. This process imports demo content such as addresses, SKUs, stock locations, and other ecommerce resources into your Commerce Layer organization.

Bolaji Ayodeji
Bolaji Ayodeji
199 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Workshop on JAMstack e-commerce introduces the concept of JAMstack and headless commerce, highlighting their benefits in enhancing the shopping experience. The workshop covers the process of building a static products page using the headless commerce architecture and Commerce Layer. It also explores configuring the application, adding product details and variants, and working with the UI. Troubleshooting authentication issues and the process of creating orders are also addressed. The workshop concludes by emphasizing the advantages of the headless commerce architecture and providing additional resources for building storefronts.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
Building High-Performance Online Stores with Shopify Hydrogen and Remix
React Advanced 2023React Advanced 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
Crash Course into the Jamstack with Next.js & Storyblok
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!
- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.
Prerequisites- Any Text . Visual Studio Code recommended- Node.js LTS- NPM or Yarn- GitHub account- Vercel account- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus
What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel
Build a Custom Storefront on Shopify with Hydrogen
React Advanced 2021React Advanced 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
Building custom storefronts on Shopify with Hydrogen
React Summit 2022React Summit 2022
71 min
Building custom storefronts on Shopify with Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.
How do Localise and Personalize Content with Sanity.io and Next.js
React Advanced 2021React Advanced 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Keeping It Simple
React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Keeping It Simple
React brought simplicity to building browser-based applications, but as new concepts like context, hooks, server components, and streaming are introduced, it's important to know the current state of the application. The JAMstack simplifies reasoning about the state of web properties through immutable assets and atomic deploys. However, as the JAMstack evolves, challenges arise in areas such as build times and API caching for large projects, especially e-commerce.
API-first Development with Headless WordPress
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
This Talk discusses API-first development with headless WordPress, highlighting its benefits and the availability of resources. It explores the use of plugins and frameworks like WPGraphQL and the headless framework from WP Engine to create custom post types and make GraphQL calls. The Talk also covers building websites, querying and caching data, deploying apps with the Atlas platform, and improving user experience. It touches on authentication, efficiency, backend resources, and WooCommerce integration in headless WordPress, as well as WordPress accessibility and SEO optimization.