Dwindi Ramadhana
90169b508d
feat: product page layout toggle (flat/card), fix email shortcode rendering
...
- Add layout_style setting (flat default) to product appearance
- AppearanceController: sanitize & persist layout_style, add to default settings
- Admin SPA: Layout Style select in Appearance > Product
- Customer SPA: useEffect targets <main> bg-white in flat mode (full-width),
card mode uses per-section white floating cards on gray background
- Accordion sections styled per mode: flat=border-t dividers, card=white cards
- Fix email shortcode gaps (EmailRenderer, EmailManager)
- Add missing variables: return_url, contact_url, account_url (alias),
payment_error_reason, order_items_list (alias for order_items_table)
- Fix customer_note extra_data key mismatch (note → customer_note)
- Pass low_stock_threshold via extra_data in low_stock email send
2026-03-04 01:14:56 +07:00
Dwindi Ramadhana
2939ebfe6b
feat(checkout): searchable address fields and Rajaongkir integration
...
Admin SPA:
- Changed billing/shipping state from Select to SearchableSelect
Customer SPA:
- Added cmdk package for command palette
- Created popover, command, and searchable-select UI components
- Added searchable country and state fields to checkout
- Fetches countries/states from /countries API
- Auto-clears state when country changes
Backend:
- Added generic woonoow/shipping/before_calculate hook
- Removed hardcoded Rajaongkir session handling
Documentation:
- Updated RAJAONGKIR_INTEGRATION.md with:
- Complete searchable destination selector plugin code
- JavaScript implementation
- React component version
- REST API endpoint for destination search
2026-01-08 11:19:37 +07:00
Dwindi Ramadhana
75a82cf16c
feat: add dynamic meta tags for social sharing (Phase 4-5)
...
Phase 4: Dynamic Meta Tags
- Added react-helmet-async dependency
- Created SEOHead component with Open Graph and Twitter Card support
- Added HelmetProvider wrapper to App.tsx
- Integrated SEOHead in Product page (title, description, image, product info)
- Integrated SEOHead in Shop page (basic meta tags)
Phase 5: Auto-Flush Permalinks
- Enhanced settings change handler to only flush when spa_mode,
spa_page, or use_browser_router changes
- Plugin already flushes on activation (Installer.php)
This enables proper link previews when sharing product URLs
on Facebook, Twitter, Slack, etc.
2026-01-04 10:40:10 +07:00
Dwindi Ramadhana
4fcc69bfcd
chore: add input and label UI components for customer-spa
2025-12-31 22:44:35 +07:00
Dwindi Ramadhana
f397ef850f
feat: Add product images support with WP Media Library integration
...
- Add WP Media Library integration for product and variation images
- Support images array (URLs) conversion to attachment IDs
- Add images array to API responses (Admin & Customer SPA)
- Implement drag-and-drop sortable images in Admin product form
- Add image gallery thumbnails in Customer SPA product page
- Initialize WooCommerce session for guest cart operations
- Fix product variations and attributes display in Customer SPA
- Add variation image field in Admin SPA
Changes:
- includes/Api/ProductsController.php: Handle images array, add to responses
- includes/Frontend/ShopController.php: Add images array for customer SPA
- includes/Frontend/CartController.php: Initialize WC session for guests
- admin-spa/src/lib/wp-media.ts: Add openWPMediaGallery function
- admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: WP Media + sortable images
- admin-spa/src/routes/Products/partials/tabs/VariationsTab.tsx: Add variation image field
- customer-spa/src/pages/Product/index.tsx: Add gallery thumbnails display
2025-11-26 16:18:43 +07:00
dwindown
909bddb23d
feat: Create customer-spa core foundation (Sprint 1)
...
Sprint 1 - Foundation Complete! ✅
Created Core Files:
✅ src/main.tsx - Entry point
✅ src/App.tsx - Main app with routing
✅ src/index.css - Global styles (TailwindCSS)
✅ index.html - Development HTML
Pages Created (Placeholders):
✅ pages/Shop/index.tsx - Product listing
✅ pages/Product/index.tsx - Product detail
✅ pages/Cart/index.tsx - Shopping cart
✅ pages/Checkout/index.tsx - Checkout process
✅ pages/Account/index.tsx - My Account with sub-routes
Library Setup:
✅ lib/api/client.ts - API client with endpoints
✅ lib/cart/store.ts - Cart state management (Zustand)
✅ types/index.ts - TypeScript definitions
Configuration:
✅ .gitignore - Ignore node_modules, dist, logs
✅ README.md - Documentation
Features Implemented:
1. Routing (React Router v7)
- /shop - Product listing
- /shop/product/:id - Product detail
- /shop/cart - Shopping cart
- /shop/checkout - Checkout
- /shop/account/* - My Account (dashboard, orders, profile)
2. API Client
- Fetch wrapper with error handling
- WordPress nonce authentication
- Endpoints for shop, cart, checkout, account
- TypeScript typed responses
3. Cart State (Zustand)
- Add/update/remove items
- Cart drawer (open/close)
- LocalStorage persistence
- Quantity management
- Coupon support
4. Type Definitions
- Product, Order, Customer types
- Address, ShippingMethod, PaymentMethod
- Cart, CartItem types
- Window interface for WordPress globals
5. React Query Setup
- QueryClient configured
- 5-minute stale time
- Retry on error
- No refetch on window focus
6. Toast Notifications
- Sonner toast library
- Top-right position
- Rich colors
Tech Stack:
- React 18 + TypeScript
- Vite (port 5174)
- React Router v7
- TanStack Query
- Zustand (state)
- TailwindCSS
- shadcn/ui
- React Hook Form + Zod
Dependencies Installed:
✅ 437 packages installed
✅ All peer dependencies resolved
✅ Ready for development
Next Steps (Sprint 2):
- Implement Shop page with product grid
- Create ProductCard component
- Add filters and search
- Implement pagination
- Connect to WordPress API
Ready to run:
```bash
cd customer-spa
npm run dev
# Opens https://woonoow.local:5174
```
2025-11-21 13:53:38 +07:00
