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
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 From Scratch 2024

Next.js From Scratch 2024

Sources: Brad Traversy
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth al
11 hours 54 minutes 9 seconds
Full Stack Development

Full Stack Development

Sources: neetcode.io
This course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up. Whether you're a beg...
4 hours 24 minutes 36 seconds
The Joy of React

The Joy of React

Sources: Josh Comeau
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let’s be real. Learning React is hard. Over the past few years...
25 hours 35 minutes 33 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds