Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

8h 6m 25s
English
Paid

Course description

This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the course first. It's available under my courses. What this course will cover:

Read more about the course
  • How to create a react Application with next js framework.
  • This uses the WordPress REST API to pull the data and render on the front-end.
  • It uses the WooCommerce WordPress plugin.
  • We will learn:
  • Run a production build
  • Understanding Add to cart APIs
  • Writing functions for Add To Cart, View cart
  • Customizing Tailwind configuration
  • Using React Context API to store the cart data.
  • Add to Bag Features
  • Add To Cart
  • Get Cart
  • Update Cart.
  • Delete Cart
  • You will also learn how to add static Google Fonts with Tailwind CSS.
  • Creating cart page and displaying all the products with their title, description, product image etc.

Every developer has something to say about WordPress, and it's not always flattering. Far from it. However, even its most avid detractors are forced to take notice of this feature, because it has already transformed the way we use the popular CMS.

WordPress REST API is a huge step forward for frontend developers looking to combine the power of JavaScript frameworks like React (or Vue.js) with WordPress.

This is exactly what I want to do today with this demo of the WordPress REST API in the work.

WordPress can now be used as a headless CMS with WooCommerce.

This offers a whole new world of possibilities for developers, as the frontend of WordPress doesn't need to be "WordPress"—PHP-generated views. The ever-growing number of frontend frameworks can now be hooked up to a WordPress backend to develop websites and applications.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 47 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

0:00
/
#1: Introduction

All Course Lessons (47)

#Lesson TitleDurationAccess
1
Introduction Demo
04:11
2
Running production build
06:24
3
Add To Cart APIs
07:32
4
Creating Add To Cart Function
09:57
5
Creating View Cart Functions
03:49
6
Demo - Add To Cart And View Cart Explained
08:09
7
Customizing Tailwind Configuration
02:51
8
Using Context API To Store Cart Data - Create AppContext
07:06
9
Add To Cart And setCart With Loading
08:35
10
Add View Cart Button
09:32
11
Add To Bag
05:59
12
Adding Google Fonts Using TailwindCSS
06:01
13
Adding Typography and Theme Styles
05:16
14
Creating Cart Page
12:30
15
Cart Endpoints - Add To Cart | Get Cart | Update Cart | Delete Cart
29:51
16
Cart Page - Endpoints
09:10
17
Cart Page - Cart Component And Functions
10:13
18
Creating Checkout Page & Getting WooCommerce Countries Data for Checkout Form
06:59
19
Create Checkout Form Address Fields
15:20
20
Create Address Input Fields
11:10
21
Add Country Selection Options In Address Fields
13:19
22
Adding Billing And Shipping Details
11:28
23
Add Payment Methods
08:21
24
Handle Checkout Form Errors - Validation And Sanitization
10:58
25
Prepare Cart Data
11:24
26
WooCommerce Create Order API Demo, Customising Payment Modes
06:37
27
Create Stripe Webook And Sessions
15:41
28
Creating Thank You Page And Stripe Demo
08:13
29
Deploying Your Next.js WooCommerce React Project
04:05
30
Create Single Product Pages And Using getStaticPaths
17:16
31
Create Single Product Component And Product Gallery Carousel
12:46
32
Add Yoast SEO support for Pages
17:23
33
Add JSON+LD Yoast Schema
08:10
34
Add NProgress - A progress bar for route change.
07:15
35
Create a Blog Page
11:16
36
Create Single Post Page
28:07
37
Add Gutenberg Blocks Style Support
05:10
38
Display Posts On A Blog Page
12:29
39
Create Blog Pagination
12:43
40
Create Pagination Pages
11:44
41
Create a 404 Page
02:49
42
Create a Single Page
15:10
43
Displaying the content for Single Page
06:57
44
REST API Endpoint for Creating and Getting Post Comment
08:41
45
Display Post Comments
12:47
46
Creating A Comment Form
09:27
47
Create a Comment Form Part 2
15:34

Unlock unlimited learning

Get instant access to all 46 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Server side rendering with Next + React

Server side rendering with Next + React

Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds
Build and Deploy a B2B SaaS AI Support Platform

Build and Deploy a B2B SaaS AI Support Platform

Sources: Code With Antonio
In this course, we will build a customer support platform powered by AI from scratch: we will set up a live chat using Convex Agents, add voice support through.
22 hours 20 minutes 55 seconds
Full-Stack Project with Claude Code

Full-Stack Project with Claude Code

Sources: Mckay Wrigley (takeoff)
In this workshop, participants step by step create an MVP clone of FigJam - a visual collaboration editor - using Claude Code, Opus 4, Cursor IDE, and...
1 hour 12 minutes 14 seconds
Complete Next.js Developer in 2023: Zero to Mastery

Complete Next.js Developer in 2023: Zero to Mastery

Sources: zerotomastery.io
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R
27 hours 12 minutes 37 seconds
Next.js 14 Real-Time Chat App using Socket IO

Next.js 14 Real-Time Chat App using Socket IO

Sources: udemy
This course will introduce you to creating a real-time chat application using Next.js 14 and Socket.IO. We will cover both the latest features of Next.js and...
12 hours 22 minutes 25 seconds