Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2

Learn to implement add to cart functionality with WooCommerce REST API, using post, get, and delete endpoints, and manage sessions and cookies across domain scenarios.

Learn to implement add to cart in an advanced Next.js WooCommerce REST API course, including a cart module, handling simple and variable products, and session management with local storage.

Implement add to cart and view cart in a Next.js and WooCommerce Rest API setup, including local storage session handling under X WC session and header config for cart endpoints.

Add to cart and view cart explained using a post request to the backend, managing wc session in local storage, and displaying updated product quantities.

Customize Tailwind configuration to adjust container padding and spacing by editing tailwind.config.js, extending or overriding default values such as 1rem padding, and preview changes with npm run dev.

Use the React Context API to pass cart data to a global store via a provider. It syncs to local storage on the client for persistence.

Wrap the app with app provider to expose cart. Implement add to cart with loading and a disabled button, updating the cart via the set cart function using the context.

Learn to wire add-to-cart with loading state, update a global cart via context, compute total quantity and price, persist to local storage, and reveal a view cart button.

Pull the cart value from React context to display the total quantity in the header and update it in real time as items are added, linking to the cart.

learn to add google fonts to tailwindcss using the google font helper, download locally into a fonts folder, configure fontFamily, and apply with font-lato and font-lato-bold.

Learn typography and theme styling with TailwindCSS for a NextJS WooCommerce REST API project. Set brand colors, fonts, sizes, spacing, line height, and reusable global typography classes across breakpoints.

Build the cart page using the WooCommerce REST API, displaying added items with image, title, description, and price; manage quantity, delete items, and clear the cart.

Learn to manage the cart with add to cart, get cart, update cart, delete cart, and clear cart endpoints, using product IDs, quantities, and cart keys with authorized requests.

Build the cart page by implementing update and delete cart item endpoints, rename get cart config to API cart config, and manage loading with set processing.

Build the cart page and cart component, update and delete items via rest endpoints, and sync quantities, totals, currency, and loading state through a global context store with local storage.

Upgrade the app to the latest Next.js and React, then build a checkout page that fetches WooCommerce countries and states via REST endpoints and passes them to the checkout form.

Learn to build a checkout form in a React WooCommerce app by managing billing and shipping addresses, countries data, and form state with reusable address and input components.

Builds dynamic address input fields for a checkout form by creating a reusable input field with required abbreviation, error handling, prop types; integrates shipping details and prepares country selection.

Add country selection options in the checkout address fields using a dynamic select sourced from the rest API, with shipping and billing handling and state fetching per country.

Build a dynamic checkout with shipping and billing details, fetching countries and states from the WooCommerce REST API, using reusable components for state selection and checkboxes.

Display cart items in checkout and render your order components, then add payment methods such as direct bank transfer, PayPal, Stripe, and JC payment gateway, with order processing state.

Create a checkout flow by building a create order endpoint via WooCommerce Rest API, validating and sanitizing billing and shipping data, and surfacing errors before redirecting to payment gateway.

Prepare cart data for checkout by refactoring to handle other payment methods besides Stripe, implement form validation and loading states, and build order data with a server-side create order endpoint.

Learn how to create a WooCommerce order with the REST API and redirect to the payment URL, with custom handling for Stripe and other payment modes.

Learn to implement Stripe payments in a NextJS and WooCommerce REST API setup by creating checkout sessions, handling Stripe webhooks, and updating order status.

Create a client-side thank you page that fetches Stripe session data, clears the cart, and displays order details after checkout, with a loading state and test card flow.

Deploy a Next.js WooCommerce React project using GitHub and Versal, configure environment variables, build locally with npm run build, test, and publish a live storefront with checkout.

Create a dynamic single product page with a slug-based route, image gallery, and add-to-cart using getStaticPaths and getStaticProps with fallback in Next.js.

Create a dynamic Next.js single product page with getStaticPaths and getStaticProps from the WooCommerce Rest API, and render a React Image Gallery carousel.

Learn to add Yoast SEO support for pages with Next SEO by using REST API data to render canonical URLs, Open Graph, JSON-LD, and SEO meta tags.

Add a Yoast json-ld schema across all pages by injecting a sanitized script with next head, replacing backend URLs with frontend URLs while preserving uploads URLs.

Learn to integrate NProgress to show a slim progress bar during route changes in a Next.js app, including installation, wiring router events, and styling overrides.

create a blog page in the advanced nextjs WooCommerce theme, listing posts at /blog with dynamic post pages via get static props/paths, fetching data from a WordPress rest api.

Create a single post page by fetching post data from WordPress REST API, generating paths using get static paths, and enabling blocking fallback for on-demand post rendering.

Install WordPress base styles and the WordPress Block library to enable Gutenberg core styles in the front end, then import them via the styles index and run npm run dev.

Build a blog page that lists posts fetched from a rest API, displaying nine items with a header and footer. Implement a reusable post component and prepare for pagination.

Build a blog pagination system in Next.js by creating a reusable pagination component for the blog index, driven by the router page number, with a dot, dot, dot pagination array.

Create dynamic pagination pages for a Next.js blog using the WooCommerce Rest API, with a page number route, get static paths/props, and redirects for page one to the blog page.

Create a custom 404 page in Next.js using the shared layout with header and footer, via get static props, plus a back-to-home link and image.

Build dynamic pages in Next.js by implementing catch-all routes for WordPress pages, fetching data from the WordPress REST API, and using static paths with fallback to render on demand.

Implement dynamic single-page content by enabling Gutenberg styles, adding featured images and a persistent blog page, and refactoring menus to use front-end URLs with path-name extraction and caching.

Explore creating and retrieving post comments using WordPress REST API endpoints, implementing get and post requests in a decoupled Next.js WooCommerce theme.

Display blog post comments in a react woo commerce theme by fetching approved comments via a rest api, and render each with author, avatar, date, content, and a reply button.

Create a reusable comment form for a post that accepts post id and reply id, uses use state to manage input, and scrolls to itself via an href when replying.

Continue building the comment form for the advanced react WooCommerce theme, implementing handle change, input and error components, and a validated submit flow with a loading state via Rest API.