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

Next.js Ecommerce

Next.js Ecommerce

Sources: Brad Traversy
The Next.js Ecommerce course is an extensive 22-hour program that teaches you step by step how to create a full-fledged e-commerce platform with...
22 hours 12 minutes 23 seconds
Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Sources: udemy
Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards...
8 hours 12 minutes 38 seconds
Next.js Complex State Management Patterns with RSC

Next.js Complex State Management Patterns with RSC

Sources: fullstack.io
In the dynamic world of web development, mastering complex state management is an essential skills. And since version 13, Next.js introduced a new type of compo
2 hours 56 minutes 24 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 seconds