Dwindi Ramadhana
9ac09582d2
feat: implement header/footer visibility controls for checkout and thankyou pages
...
- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages
2025-12-25 22:20:48 +07:00
Dwindi Ramadhana
c37ecb8e96
feat: Implement complete product page with industry best practices
...
Phase 1 Implementation:
- Horizontal scrollable thumbnail slider with arrow navigation
- Variation selector with auto-image switching
- Enhanced buy section with quantity controls
- Product tabs (Description, Additional Info, Reviews)
- Specifications table from attributes
- Responsive design with mobile optimization
Features:
- Image gallery: Click thumbnails to change main image
- Variation selector: Auto-updates price, stock, and image
- Stock status: Color-coded indicators (green/red)
- Add to cart: Validates variation selection
- Breadcrumb navigation
- Product meta (SKU, categories)
- Wishlist button (UI only)
Documentation:
- PRODUCT_PAGE_SOP.md: Industry best practices guide
- PRODUCT_PAGE_IMPLEMENTATION.md: Implementation plan
Admin:
- Sortable images with visual dropzone indicators
- Dashed borders show drag-and-drop capability
- Ring highlight on drag-over
- Opacity change when dragging
Files changed:
- customer-spa/src/pages/Product/index.tsx: Complete rebuild
- customer-spa/src/index.css: Add scrollbar-hide utility
- admin-spa/src/routes/Products/partials/tabs/GeneralTab.tsx: Enhanced dropzone
2025-11-26 16:29:02 +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
dwindown
342104eeab
feat: Initialize customer-spa project structure
...
Sprint 1 - Foundation Setup:
Created customer-spa/ folder structure:
```
customer-spa/
├── src/
│ ├── pages/ # Customer pages (Shop, Cart, Checkout, Account)
│ ├── components/ # Reusable components
│ ├── lib/
│ │ ├── api/ # API client
│ │ ├── cart/ # Cart state management
│ │ ├── checkout/ # Checkout logic
│ │ └── tracking/ # Analytics & pixel tracking
│ ├── hooks/ # Custom React hooks
│ ├── contexts/ # React contexts
│ └── types/ # TypeScript types
├── public/ # Static assets
├── package.json # Dependencies
├── vite.config.ts # Vite configuration (port 5174)
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # TailwindCSS configuration
├── postcss.config.js # PostCSS configuration
└── .eslintrc.cjs # ESLint configuration
```
Configuration:
✅ Vite dev server on port 5174 (admin-spa uses 5173)
✅ HTTPS with shared SSL cert
✅ TypeScript + React 18
✅ TailwindCSS + shadcn/ui
✅ React Query for data fetching
✅ Zustand for state management
✅ React Hook Form + Zod for forms
✅ React Router for routing
Dependencies Added:
- Core: React 18, React DOM, React Router
- UI: Radix UI components, Lucide icons
- State: Zustand, TanStack Query
- Forms: React Hook Form, Zod, @hookform/resolvers
- Styling: TailwindCSS, class-variance-authority
- Utils: clsx, tailwind-merge, sonner (toast)
Next Steps:
- Create main.tsx entry point
- Create App.tsx with routing
- Create base layout components
- Setup API client
- Implement cart state management
Ready for Sprint 1 implementation!
2025-11-21 13:05:04 +07:00
