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.

199 min
17 Jun, 2021

Comments

Sign in or register to post your comment.
AI generated transcription, chapters and summary will be available later.

Watch more workshops on topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
WorkshopFree
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.


React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
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
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- 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
React Day Berlin 2022React Day Berlin 2022
161 min
Crash Course into the Jamstack with Next.js & Storyblok
WorkshopFree
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 included
1. Introduction and overview of the workshop
2. Introduction to Jamstack
3. Introduction to Atomic Design
4. Overview of Headless CMS
5. Introduction to Storyblok
6. Next.js app creation
7. Storyblok space creation
8. Next.js and Storyblok connection
9. Custom components creation
10.First-page creation
11. Introduction to Visual
12. Dynamic pages addition
13. Blog section creation
14. Deployment on Vercel
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
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.


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

React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This talk will look at the evolution of web rendering modes and what the Jamstack movement is all about. We will build a demo project to show how a static site generator and a Headless CMS can be combined to create dynamic and engaging stories while maintaining a static site's performance and scalability benefits.
You will learn about the advantages and limitations of each rendering mode and gain a deeper understanding of how to use Jamstack to build powerful and dynamic storytelling experiences.
React Advanced Conference 2021React Advanced Conference 2021
8 min
How do Localise and Personalize Content with Sanity.io and Next.js
Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel.


Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure.


React Summit Remote Edition 2021React Summit Remote Edition 2021
9 min
Keeping It Simple
Netlify CEO and co-founder Matt Biilmann reflects on the history of React, the promises of the Jamstack, and the complexity that can creep into developer workflows if we don't continue to defend simplicity over time. In this lightning talk, Matt describes the trade-offs developers face to deliver large sites and introduces a new idea for a more scalable future solution.


React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
API-first Development with Headless WordPress
When the burden of rendering is removed from WordPress, it becomes an open source API platform. With a few plugins like WPGraphQL, you can create an extensible backend for your React apps to consume which enables modern architectures and development practices in WordPress.