Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2
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
| # | 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 |
Comments
0 commentsSimilar courses
Nest.js Microservices: Build & Deploy a Scaleable Backend
Next40. Master Next.js 14 in 40 days of epic projects
Complete Next.js with React & Node - Beautiful Portfolio App
NextJS E-Com Masterclass: Learn The All New Next JS
Want to join the conversation?
Sign in to comment