132 lines
4.4 KiB
Markdown
132 lines
4.4 KiB
Markdown
|
||
|
||
|
||
# WooNooW
|
||
|
||
**WooNooW** is a modern experience layer for WooCommerce — enhancing UX, speed, and reliability **without data migration**.
|
||
It keeps WooCommerce as the core engine while providing a modern React-powered interface for both the **storefront** (cart, checkout, my‑account) and the **admin** (orders, dashboard).
|
||
|
||
**Three Admin Modes:**
|
||
- **Normal Mode:** Traditional wp-admin integration (`/wp-admin/admin.php?page=woonoow`)
|
||
- **Fullscreen Mode:** Distraction-free interface (toggle in header)
|
||
- **Standalone Mode:** Complete standalone app at `yoursite.com/admin` with custom login ✨
|
||
|
||
---
|
||
|
||
## 🔍 Background
|
||
|
||
WooCommerce is the most used e‑commerce engine in the world, but its architecture has become heavy and fragmented.
|
||
With React‑based blocks (Checkout, Cart, Product Edit) and HPOS now rolling out, many existing addons are becoming obsolete or unstable.
|
||
WooNooW bridges the gap between Woo’s legacy PHP system and the new modern stack — so users get performance and simplicity without losing compatibility.
|
||
|
||
---
|
||
|
||
## 🚀 Key Principles
|
||
|
||
- **No Migration Needed** – Woo data stays intact.
|
||
- **Safe Activate/Deactivate** – revert to native Woo anytime, no data loss.
|
||
- **Hybrid by Default** – SSR + React islands for Cart/Checkout/My‑Account.
|
||
- **Full SPA Toggle** – optional React‑only mode for max performance.
|
||
- **HPOS Mandatory** – optimized datastore and async operations.
|
||
- **Compat Layer** – hook mirror + slot rendering for legacy addons.
|
||
- **Async Mail & Tasks** – powered by Action Scheduler.
|
||
|
||
---
|
||
|
||
## 🧱 Tech Stack
|
||
|
||
| Layer | Technology |
|
||
|--------|-------------|
|
||
| Backend | PHP 8.2+, WordPress, WooCommerce (HPOS), Action Scheduler |
|
||
| Frontend | React 18 + TypeScript, Vite, React Query, Tailwind (optional) |
|
||
| Build & Package | Composer, NPM, ESM scripts, Zip automation |
|
||
| Architecture | Modular PSR‑4 classes, REST‑driven SPA islands |
|
||
|
||
---
|
||
|
||
## 🧩 Project Structure
|
||
|
||
```
|
||
woonoow/
|
||
├── admin-spa/
|
||
│ ├── src/
|
||
│ │ ├── components/
|
||
│ │ │ ├── filters/
|
||
│ │ │ │ ├── DateRange.tsx
|
||
│ │ │ │ └── OrderBy.tsx
|
||
│ │ │ └── CommandPalette.tsx
|
||
│ │ ├── hooks/
|
||
│ │ │ └── useShortcuts.tsx
|
||
│ │ ├── lib/
|
||
│ │ │ ├── api.ts
|
||
│ │ │ ├── currency.ts
|
||
│ │ │ ├── dates.ts
|
||
│ │ │ ├── query-params.ts
|
||
│ │ │ ├── useCommandStore.ts
|
||
│ │ │ └── utils.ts
|
||
│ │ ├── pages/
|
||
│ │ │ └── orders/
|
||
│ │ │ ├── partials
|
||
│ │ │ │ └── OrderForm.tsx
|
||
│ │ │ ├── Orders.tsx
|
||
│ │ │ ├── OrdersNew.tsx
|
||
│ │ │ └── OrderShow.tsx
|
||
│ │ ├── routes/
|
||
│ │ │ └── Dashboard.tsx
|
||
│ │ ├── types/
|
||
│ │ │ └── qrcode.d.ts
|
||
│ │ ├── App.tsx
|
||
│ │ ├── index.css
|
||
│ │ └── main.tsx
|
||
│ └── vite.config.ts
|
||
├── includes/
|
||
│ ├── Admin/
|
||
│ │ ├── Assets.php
|
||
│ │ └── Menu.php
|
||
│ ├── Api/
|
||
│ │ ├── CheckoutController.php
|
||
│ │ ├── OrdersController.php
|
||
│ │ ├── Permissions.php
|
||
│ │ └── Routes.php
|
||
│ ├── Compat/
|
||
│ │ ├── HideWooMenus.php
|
||
│ │ └── HooksShim.php
|
||
│ └── Core/
|
||
│ ├── DataStores/
|
||
│ │ ├── OrderStore_HPOS.php
|
||
│ │ └── OrderStore.php
|
||
│ ├── Mail/
|
||
│ │ ├── MailQueue.php
|
||
│ │ └── WooEmailOverride.php
|
||
│ ├── Bootstrap.php
|
||
│ └── Features.php
|
||
├── woonoow.php
|
||
└── docs (project notes, SOP, etc.)
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ Development Workflow
|
||
|
||
1. **LocalWP / Docker setup** with WordPress + WooCommerce.
|
||
2. Activate plugin: `WooNooW` should appear in the admin menu.
|
||
3. Build SPAs:
|
||
```bash
|
||
npm run build
|
||
```
|
||
4. Package zip:
|
||
```bash
|
||
npm run pack
|
||
```
|
||
5. Upload `dist/woonoow.zip` into WordPress → Plugins → Add New → Upload.
|
||
|
||
---
|
||
|
||
## 🧭 Vision
|
||
|
||
> “WooCommerce, reimagined for now.”
|
||
|
||
WooNooW delivers modern speed and UX while keeping WooCommerce’s ecosystem alive.
|
||
No migration. No lock‑in. Just Woo, evolved.
|
||
|
||
--- |