Files
WooNooW/customer-spa
Dwindi Ramadhana 942fb48a0b fix: critical - add shipping_cost/title to sanitize_payload whitelist
ROOT CAUSE: The sanitize_payload() method was returning a whitelist of
allowed fields, but shipping_cost, shipping_title, custom_fields, and
customer_note were NOT included. This caused these values to be null
even though the frontend was sending them correctly.

Added:
- shipping_cost (float)
- shipping_title (sanitized text)
- custom_fields (array)
- customer_note (sanitized textarea)

This should fix shipping not being applied to order totals.
2026-01-09 09:45:46 +07:00
..

WooNooW Customer SPA

Modern React-based storefront and customer portal for WooNooW.

Features

  • Product Catalog - Browse products with filters and search
  • Shopping Cart - Add to cart with real-time updates
  • Checkout - Single-page checkout with address autocomplete
  • My Account - Order history, profile, and addresses
  • Mobile-First - Responsive design for all devices
  • PWA Ready - Offline support and app-like experience

Development

# Install dependencies
npm install

# Start dev server (https://woonoow.local:5174)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

Project Structure

customer-spa/
├── src/
│   ├── pages/          # Page components (Shop, Cart, Checkout, Account)
│   ├── components/     # Reusable UI components
│   ├── lib/
│   │   ├── api/        # API client and endpoints
│   │   ├── cart/       # Cart state management (Zustand)
│   │   ├── checkout/   # Checkout logic
│   │   └── tracking/   # Analytics and pixel tracking
│   ├── hooks/          # Custom React hooks
│   ├── contexts/       # React contexts
│   └── types/          # TypeScript type definitions
├── public/             # Static assets
└── dist/               # Build output (generated)

Tech Stack

  • React 18 - UI framework
  • TypeScript - Type safety
  • Vite - Build tool
  • React Router - Routing
  • TanStack Query - Data fetching
  • Zustand - State management
  • TailwindCSS - Styling
  • shadcn/ui - UI components
  • React Hook Form - Form handling
  • Zod - Schema validation

API Integration

The SPA communicates with WordPress via REST API endpoints:

  • /wp-json/woonoow/v1/shop/* - Product catalog
  • /wp-json/woonoow/v1/cart/* - Shopping cart
  • /wp-json/woonoow/v1/checkout/* - Checkout process
  • /wp-json/woonoow/v1/account/* - Customer account

Deployment Modes

1. Shortcode Mode (Default)

Works with any WordPress theme via shortcodes:

  • [woonoow_shop]
  • [woonoow_cart]
  • [woonoow_checkout]
  • [woonoow_account]

2. Full SPA Mode

Takes over entire frontend for maximum performance.

3. Hybrid Mode

SSR for product pages (SEO), SPA for cart/checkout/account.

SEO & Tracking

  • SEO-Friendly - Server-side rendering for product pages
  • Analytics - Google Analytics, GTM support
  • Pixels - Facebook, TikTok, Pinterest pixel support
  • PixelMySite - Full compatibility

License

Proprietary - Part of WooNooW plugin