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
This commit is contained in:
Dwindi Ramadhana
212
APPEARANCE_MENU_RESTRUCTURE.md
Normal file
212
APPEARANCE_MENU_RESTRUCTURE.md
Normal file
@@ -0,0 +1,212 @@
|
||||
# Appearance Menu Restructure ✅
|
||||
|
||||
**Date:** November 27, 2025
|
||||
**Status:** IN PROGRESS
|
||||
|
||||
---
|
||||
|
||||
## 🎯 GOALS
|
||||
|
||||
1. ✅ Add Appearance menu to both Sidebar and TopNav
|
||||
2. ✅ Fix path conflict (was `/settings/customer-spa`, now `/appearance`)
|
||||
3. ✅ Move CustomerSPA.tsx to Appearance folder
|
||||
4. ✅ Create page-specific submenus structure
|
||||
5. ⏳ Create placeholder pages for each submenu
|
||||
6. ⏳ Update App.tsx routes
|
||||
|
||||
---
|
||||
|
||||
## 📁 NEW FOLDER STRUCTURE
|
||||
|
||||
```
|
||||
admin-spa/src/routes/
|
||||
├── Appearance/ ← NEW FOLDER
|
||||
│ ├── index.tsx ← Redirects to /appearance/themes
|
||||
│ ├── Themes.tsx ← Moved from Settings/CustomerSPA.tsx
|
||||
│ ├── Shop.tsx ← Shop page appearance
|
||||
│ ├── Product.tsx ← Product page appearance
|
||||
│ ├── Cart.tsx ← Cart page appearance
|
||||
│ ├── Checkout.tsx ← Checkout page appearance
|
||||
│ ├── ThankYou.tsx ← Thank you page appearance
|
||||
│ └── Account.tsx ← My Account/Customer Portal appearance
|
||||
└── Settings/
|
||||
├── Store.tsx
|
||||
├── Payments.tsx
|
||||
├── Shipping.tsx
|
||||
├── Tax.tsx
|
||||
├── Customers.tsx
|
||||
├── Notifications.tsx
|
||||
└── Developer.tsx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🗺️ NAVIGATION STRUCTURE
|
||||
|
||||
### **Appearance Menu**
|
||||
- **Path:** `/appearance`
|
||||
- **Icon:** `palette`
|
||||
- **Submenus:**
|
||||
1. **Themes** → `/appearance/themes` (Main SPA activation & layout selection)
|
||||
2. **Shop** → `/appearance/shop` (Shop page customization)
|
||||
3. **Product** → `/appearance/product` (Product page customization)
|
||||
4. **Cart** → `/appearance/cart` (Cart page customization)
|
||||
5. **Checkout** → `/appearance/checkout` (Checkout page customization)
|
||||
6. **Thank You** → `/appearance/thankyou` (Order confirmation page)
|
||||
7. **My Account** → `/appearance/account` (Customer portal customization)
|
||||
|
||||
---
|
||||
|
||||
## ✅ CHANGES MADE
|
||||
|
||||
### **1. Backend - NavigationRegistry.php**
|
||||
```php
|
||||
[
|
||||
'key' => 'appearance',
|
||||
'label' => __('Appearance', 'woonoow'),
|
||||
'path' => '/appearance', // Changed from /settings/customer-spa
|
||||
'icon' => 'palette',
|
||||
'children' => [
|
||||
['label' => __('Themes', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/themes'],
|
||||
['label' => __('Shop', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/shop'],
|
||||
['label' => __('Product', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/product'],
|
||||
['label' => __('Cart', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/cart'],
|
||||
['label' => __('Checkout', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/checkout'],
|
||||
['label' => __('Thank You', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/thankyou'],
|
||||
['label' => __('My Account', 'woonoow'), 'mode' => 'spa', 'path' => '/appearance/account'],
|
||||
],
|
||||
],
|
||||
```
|
||||
|
||||
**Version bumped:** `1.0.3`
|
||||
|
||||
### **2. Frontend - App.tsx**
|
||||
|
||||
**Added Palette icon:**
|
||||
```tsx
|
||||
import { ..., Palette, ... } from 'lucide-react';
|
||||
```
|
||||
|
||||
**Updated Sidebar to use dynamic navigation:**
|
||||
```tsx
|
||||
function Sidebar() {
|
||||
const iconMap: Record<string, any> = {
|
||||
'layout-dashboard': LayoutDashboard,
|
||||
'receipt-text': ReceiptText,
|
||||
'package': Package,
|
||||
'tag': Tag,
|
||||
'users': Users,
|
||||
'palette': Palette, // ← NEW
|
||||
'settings': SettingsIcon,
|
||||
};
|
||||
|
||||
const navTree = (window as any).WNW_NAV_TREE || [];
|
||||
|
||||
return (
|
||||
<aside>
|
||||
<nav>
|
||||
{navTree.map((item: any) => {
|
||||
const IconComponent = iconMap[item.icon] || Package;
|
||||
return <ActiveNavLink ... />;
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Updated TopNav to use dynamic navigation:**
|
||||
```tsx
|
||||
function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
|
||||
// Same icon mapping and navTree logic as Sidebar
|
||||
const navTree = (window as any).WNW_NAV_TREE || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{navTree.map((item: any) => {
|
||||
const IconComponent = iconMap[item.icon] || Package;
|
||||
return <ActiveNavLink ... />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### **3. File Moves**
|
||||
- ✅ Created `/admin-spa/src/routes/Appearance/` folder
|
||||
- ✅ Moved `Settings/CustomerSPA.tsx` → `Appearance/Themes.tsx`
|
||||
- ✅ Created `Appearance/index.tsx` (redirects to themes)
|
||||
- ✅ Created `Appearance/Shop.tsx` (placeholder)
|
||||
|
||||
---
|
||||
|
||||
## ⏳ TODO
|
||||
|
||||
### **Create Remaining Placeholder Pages:**
|
||||
1. `Appearance/Product.tsx`
|
||||
2. `Appearance/Cart.tsx`
|
||||
3. `Appearance/Checkout.tsx`
|
||||
4. `Appearance/ThankYou.tsx`
|
||||
5. `Appearance/Account.tsx`
|
||||
|
||||
### **Update App.tsx Routes:**
|
||||
```tsx
|
||||
// Add imports
|
||||
import AppearanceIndex from '@/routes/Appearance';
|
||||
import AppearanceThemes from '@/routes/Appearance/Themes';
|
||||
import AppearanceShop from '@/routes/Appearance/Shop';
|
||||
import AppearanceProduct from '@/routes/Appearance/Product';
|
||||
import AppearanceCart from '@/routes/Appearance/Cart';
|
||||
import AppearanceCheckout from '@/routes/Appearance/Checkout';
|
||||
import AppearanceThankYou from '@/routes/Appearance/ThankYou';
|
||||
import AppearanceAccount from '@/routes/Appearance/Account';
|
||||
|
||||
// Add routes
|
||||
<Route path="/appearance" element={<AppearanceIndex />} />
|
||||
<Route path="/appearance/themes" element={<AppearanceThemes />} />
|
||||
<Route path="/appearance/shop" element={<AppearanceShop />} />
|
||||
<Route path="/appearance/product" element={<AppearanceProduct />} />
|
||||
<Route path="/appearance/cart" element={<AppearanceCart />} />
|
||||
<Route path="/appearance/checkout" element={<AppearanceCheckout />} />
|
||||
<Route path="/appearance/thankyou" element={<AppearanceThankYou />} />
|
||||
<Route path="/appearance/account" element={<AppearanceAccount />} />
|
||||
```
|
||||
|
||||
### **Remove Old Route:**
|
||||
```tsx
|
||||
// DELETE THIS:
|
||||
<Route path="/settings/customer-spa" element={<SettingsCustomerSPA />} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 DESIGN PHILOSOPHY
|
||||
|
||||
Each Appearance submenu will allow customization of:
|
||||
|
||||
1. **Themes** - Overall SPA activation, layout selection (Classic/Modern/Boutique/Launch)
|
||||
2. **Shop** - Product grid, filters, sorting, categories display
|
||||
3. **Product** - Image gallery, description layout, reviews, related products
|
||||
4. **Cart** - Cart table, coupon input, shipping calculator
|
||||
5. **Checkout** - Form fields, payment methods, order summary
|
||||
6. **Thank You** - Order confirmation message, next steps, upsells
|
||||
7. **My Account** - Dashboard, orders, addresses, downloads
|
||||
|
||||
---
|
||||
|
||||
## 🔍 VERIFICATION
|
||||
|
||||
After completing TODO:
|
||||
|
||||
1. ✅ Appearance shows in Sidebar (both fullscreen and normal)
|
||||
2. ✅ Appearance shows in TopNav
|
||||
3. ✅ Clicking Appearance goes to `/appearance` → redirects to `/appearance/themes`
|
||||
4. ✅ Settings menu is NOT active when on Appearance
|
||||
5. ✅ All 7 submenus are accessible
|
||||
6. ✅ No 404 errors
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** November 27, 2025
|
||||
**Version:** 1.0.3
|
||||
**Status:** Awaiting route updates in App.tsx
|
||||
Reference in New Issue
Block a user