Add a Shopping Cart & Checkout to a Next.js App with Snipcart
Learn how to add a full end-to-end shopping cart and checkout funnel to a Next.js app using Snipcart. We'll walk through setting up a Snipcart account, setting up Snipcart in a Next.js app, and how you can programmatically add products from a dynamic source for purchase in an online store.
This is a preview of my course: Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js
🚀 https://spacejelly.dev/ecommcourse
This course will walk you step-by-step through the entire process including:
Creating a new React app with Next.js
Manage product data from a GraphQL API with dynamic routes using GraphCMS
Adding a shopping cart with Snipcart with Stripe as a payment gateway
Easy product image management and optimization with Cloudinary
Using Leaflet to add a map of all of our IRL store locations
Deploying a Next.js app to Vercel
The course is FREE for launch, so head over to egghead.io right away to jump in!
🚀 https://spacejelly.dev/ecommcourse
🧐 What's Inside
00:00 - Intro
00:12 - Course Preview
00:54 - Setting up a new free Snipcart account
02:11 - Add Snipcart tags to a Next.js app
03:58 - Using a custom document file to set up global tags and scripts
05:49 - Configuring dynamically sourced products to add to a shopping cart
08:11 - Setting up Snipcart to only open as a sidebar
09:35 - Wrapping the app globally with useSnipcart to access Snipcart context
10:53 - Listening to Snipcart state in the header with useSnipcart to update the cart total
12:39 - Opening up the shopping cart when clicking the cart with Snipcart class attributes
13:08 - Review
13:42 - Outro
💾 Code
https://github.com/colbyfayock/my-spa...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
ECommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js
https://spacejelly.dev/ecommcourse
Snipcart
https://snipcart.com/
https://spacejelly.dev/snipcart (Free 1 month!)
useSnipcart
https://github.com/colbyfayock/use-sn...
🎼 Music
Music from Uppbeat (free for Creators!):
http://uppbeat.io/t/dope-cat/purple-s...
License code: 52V3XK3BYHAVCLWY
#colbyfayock #nextjs #ecommerce #snipcart #reactjs #onlinestore #ecomm #webdevelopment