Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

8h 6m 25s
English
Paid

Welcome to Part Two of the course "Advanced NextJS WooCommerce with REST API and TailwindCSS." If you haven't completed the first part yet, we strongly recommend doing so to maximize your understanding. The first part is available under "My Courses". Below, you'll find what this continuation will cover.

Course Curriculum

Building a React Application

  • Creating a React Application with the Next.js framework.
  • Utilizing the WordPress REST API to retrieve data for frontend rendering.

Integrating WooCommerce

  • Exploring the WooCommerce WordPress plugin's functionality.
  • Running a production build for deployment.
  • Understanding and implementing Add to Cart APIs.

Enhancing Using TailwindCSS

  • Customizing the Tailwind configuration to suit the application's requirements.
  • Learning how to incorporate static Google Fonts with Tailwind CSS.

Developing E-commerce Features

  • Writing functions for Add To Cart and View Cart.
  • Utilizing React Context API to store cart data efficiently.
  • Implementing "Add to Bag" features.
  • Handling cart operations:
    • Add to Cart
    • Get Cart
    • Update Cart
    • Delete Cart

Creating an Enhanced Cart Page

  • Building a cart page to display products with details such as title, description, and product image.

Exploring the WordPress REST API

Every developer seems to have a perspective on WordPress, not all of which are complimentary. Despite this, the WordPress REST API has significantly altered perceptions by enabling the blending of WordPress with popular JavaScript frameworks like React or Vue.js.

Today's goal is to demonstrate the practical uses of the WordPress REST API and how it can enable using WordPress as a headless CMS in conjunction with WooCommerce.

Using WordPress as a headless CMS opens a realm of possibilities. Developers can now harness the power of diverse frontend frameworks, linking them to a WordPress backend for dynamic application and website development, free from PHP-generated views.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 47 lessons

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