Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Learn how to build a React WooCommerce Theme With Next.js and REST API

4.83 (9 reviews)
Udemy
platform
English
language
Web Development
category
instructor
164
students
8 hours
content
Oct 2023
last update
$49.99
regular price

What you will learn

Building Nextjs Application

Decoupled Application With WordPress And WooCommerce

Building A Headless CMS

WooCommerce REST API

Add To Cart, View Cart, Checkout, Stripe Integration.

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:

  • 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.

Content

Introduction

Introduction
Running production build

Add To Cart And View Cart

Add To Cart APIs
Creating Add To Cart Function
Creating View Cart Functions
Demo - Add To Cart And View Cart Explained
Customizing Tailwind Configuration
Using Context API To Store Cart Data - Create AppContext
Add To Cart And setCart With Loading
Add View Cart Button
Add To Bag

Theme Styles and Typography

Adding Google Fonts Using TailwindCSS
Adding Typography and Theme Styles

Cart Page

Creating Cart Page
Cart Endpoints - Add To Cart | Get Cart | Update Cart | Delete Cart
Cart Page - Endpoints
Cart Page - Cart Component And Functions

Screenshots

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Screenshot_01Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Screenshot_02Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Screenshot_03Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Screenshot_04

Charts

Price

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Price chart

Rating

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Ratings chart

Enrollment distribution

Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2 - Distribution chart
4331854
udemy ID
10/3/2021
course created date
4/21/2022
course indexed date
Bot
course submited by