Dashboard Navigation Fix: - Fixed ActiveNavLink to only activate Dashboard on / or /dashboard/* paths - Dashboard no longer shows active when on other routes (Marketing, Settings, etc.) - Proper path matching logic for all main menu items Wishlist Settings - Full Implementation: Backend (PHP): 1. Guest Wishlist Support - Modified check_permission() to allow guests if enable_guest_wishlist is true - Guests can now add/remove wishlist items (stored in user meta when they log in) 2. Max Items Limit - Added max_items_per_wishlist enforcement in add_to_wishlist() - Returns error when limit reached with helpful message - 0 = unlimited (default) Frontend (React): 3. Show in Header Setting - Added useModuleSettings hook to customer-spa - Wishlist icon respects show_in_header setting (default: true) - Icon hidden when setting is false 4. Show Add to Cart Button Setting - Wishlist page checks show_add_to_cart_button setting - Add to cart buttons hidden when setting is false (default: true) - Allows wishlist-only mode without purchase prompts Files Added (1): - customer-spa/src/hooks/useModuleSettings.ts Files Modified (5): - admin-spa/src/App.tsx (dashboard active fix) - includes/Frontend/WishlistController.php (guest support, max items) - customer-spa/src/layouts/BaseLayout.tsx (show_in_header) - customer-spa/src/pages/Account/Wishlist.tsx (show_add_to_cart_button) - admin-spa/dist/app.js + customer-spa/dist/app.js (rebuilt) Implemented Settings (4 of 8): ✅ enable_guest_wishlist - Backend permission check ✅ show_in_header - Frontend icon visibility ✅ max_items_per_wishlist - Backend validation ✅ show_add_to_cart_button - Frontend button visibility Not Yet Implemented (4 of 8): - wishlist_page (page selector - would need routing logic) - enable_sharing (share functionality - needs share UI) - enable_email_notifications (back in stock - needs cron job) - enable_multiple_wishlists (multiple lists - needs data structure change) All core wishlist settings now functional!
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