State Management

import { useCart } from "@/contexts/CartContext"; // Import Cart context

function MyComponent() { // My component to use cart context
  const { addToCart, updateQuantity, removeItem, cartData } = useCart(); // Get add to cart, update quantity, remove item and cart data from cart context
  
  await addToCart(productId, quantity); // Add product to cart with the given product id and quantity
  await updateQuantity(itemKey, newQuantity); // Update quantity of the item with the given key to the new quantity
  await removeItem(itemKey); // Remove item with the given key from the cart
}

"use client";

import { useCart } from "@/contexts/CartContext"; // Import Cart context

export default function AddToCartButton({ productId }) { // Client component to add to cart
  const { addToCart, isUpdating } = useCart();
  
  return (
     addToCart(productId, 1)} disabled={isUpdating}>
      Add to Cart
    
  );
}

const { updateQuantity } = useCart(); // Get update quantity function from cart context

 updateQuantity(itemKey, quantity + 1)}>+
 updateQuantity(itemKey, quantity - 1)}>-

import { useWishlist } from "@/contexts/WishlistContext";

const { toggle, isInWishlist } = useWishlist();

toggle(productId);
if (isInWishlist(productId)) { /* in wishlist */ }

const { toggle, isInWishlist } = useWishlist(); // Get toggle and isInWishlist functions from wishlist context

 toggle(productId)}> // Toggle product in/out of wishlist with the given product id

// app/layout.js
import { CartProvider } from "@/contexts/CartContext"; // Import Cart provider
import { WishlistProvider } from "@/contexts/WishlistContext"; // Import Wishlist provider

export default function RootLayout({ children }) { // Root layout to wrap pages and persist across navigation
  return (
     // Wrap pages with Cart provider
       // Wrap pages with Wishlist provider
        {children}
       // Wrap pages with Wishlist provider
    
  ); // Return wrapped pages
}