Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

8h 6m 25s
English
Paid

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 Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Similar courses to Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Next.js Complex State Management Patterns with RSC

Next.js Complex State Management Patterns with RSCfullstack.io

Category: Next.js
Duration 2 hours 56 minutes 24 seconds
React Simplified - Next.js

React Simplified - Next.jswebdevsimplified.com

Category: Next.js
Duration 9 hours 33 minutes 4 seconds
Next.js 14 Real-Time Chat App using Socket IO

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

Category: Next.js, Socket.IO
Duration 12 hours 22 minutes 25 seconds
Next.js From Scratch 2024

Next.js From Scratch 2024Brad Traversy

Category: Next.js
Duration 11 hours 54 minutes 9 seconds
Full Stack Development

Full Stack Developmentneetcode.io

Category: TypeScript, Next.js
Duration 4 hours 24 minutes 36 seconds
Building a Full-stack Multilingual Blog with Next.js 13.4

Building a Full-stack Multilingual Blog with Next.js 13.4udemy

Category: Next.js
Duration 9 hours 15 minutes 4 seconds
Duolingo Clone

Duolingo CloneCode With Antonio

Category: Next.js
Duration 11 hours 12 minutes 32 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platformudemy

Category: React.js, Next.js, Node.js
Duration 20 hours 25 minutes 13 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)udemy

Category: React.js, Next.js, Node.js, GraphQL
Duration 28 hours 38 minutes 19 seconds
Build a Jira clone

Build a Jira cloneCode With Antonio

Category: React.js, Next.js
Duration 16 hours 26 minutes 4 seconds