Files
WooNooW/customer-spa
Dwindi Ramadhana 863610043d fix: Dashboard always active + Full wishlist settings implementation
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!
2025-12-26 21:57:56 +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