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
|
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 |
|