WooNooW/SETTINGS-RESTRUCTURE.md

# WooNooW Settings Restructure

## Problem with Current Approach
- ❌ Predefined "themes" (Classic, Modern, Boutique, Launch) are too rigid
- ❌ Themes only differ in minor layout tweaks
- ❌ Users can't customize to their needs
- ❌ Redundant with page-specific settings

## New Approach: Granular Control

### Global Settings (Appearance > General)

#### 1. SPA Mode
```
○ Disabled (Use WordPress default)
○ Checkout Only (SPA for checkout flow only)
○ Full SPA (Entire customer-facing site)
```

#### 2. Typography
**Option A: Predefined Pairs (GDPR-compliant, self-hosted)**
- Modern & Clean (Inter)
- Editorial (Playfair Display + Source Sans)
- Friendly (Poppins + Open Sans)
- Elegant (Cormorant + Lato)

**Option B: Custom Google Fonts**
- Heading Font: [Google Font URL or name]
- Body Font: [Google Font URL or name]
- ⚠️ Warning: "Using Google Fonts may not be GDPR compliant"

**Font Scale**
- Slider: 0.8x - 1.2x (default: 1.0x)

#### 3. Colors
- Primary Color
- Secondary Color
- Accent Color
- Text Color
- Background Color

---

### Layout Settings (Appearance > [Component])

#### Header Settings
- **Layout**
  - Style: Classic / Modern / Minimal / Centered
  - Sticky: Yes / No
  - Height: Compact / Normal / Tall
  
- **Elements**
  - ☑ Show logo
  - ☑ Show navigation menu
  - ☑ Show search bar
  - ☑ Show account link
  - ☑ Show cart icon with count
  - ☑ Show wishlist icon
  
- **Mobile**
  - Menu style: Hamburger / Bottom nav / Slide-in
  - Logo position: Left / Center

#### Footer Settings
- **Layout**
  - Columns: 1 / 2 / 3 / 4
  - Style: Simple / Detailed / Minimal
  
- **Elements**
  - ☑ Show newsletter signup
  - ☑ Show social media links
  - ☑ Show payment icons
  - ☑ Show copyright text
  - ☑ Show footer menu
  - ☑ Show contact info
  
- **Content**
  - Copyright text: [text field]
  - Social links: [repeater field]

---

### Page-Specific Settings (Appearance > [Page])

Each page submenu has its own layout controls:

#### Shop Page Settings
- **Layout**
  - Grid columns: 2 / 3 / 4
  - Product card style: Card / Minimal / Overlay
  - Image aspect ratio: Square / Portrait / Landscape
  
- **Elements**
  - ☑ Show category filter
  - ☑ Show search bar
  - ☑ Show sort dropdown
  - ☑ Show sale badges
  - ☑ Show quick view
  
- **Add to Cart Button**
  - Position: Below image / On hover overlay / Bottom of card
  - Style: Solid / Outline / Text only
  - Show icon: Yes / No

#### Product Page Settings
- **Layout**
  - Image position: Left / Right / Top
  - Gallery style: Thumbnails / Dots / Slider
  - Sticky add to cart: Yes / No
  
- **Elements**
  - ☑ Show breadcrumbs
  - ☑ Show related products
  - ☑ Show reviews
  - ☑ Show share buttons
  - ☑ Show product meta (SKU, categories, tags)

#### Cart Page Settings
- **Layout**
  - Style: Full width / Boxed
  - Summary position: Right / Bottom
  
- **Elements**
  - ☑ Show product images
  - ☑ Show continue shopping button
  - ☑ Show coupon field
  - ☑ Show shipping calculator

#### Checkout Page Settings
- **Layout**
  - Style: Single column / Two columns
  - Order summary: Sidebar / Collapsible / Always visible
  
- **Elements**
  - ☑ Show order notes field
  - ☑ Show coupon field
  - ☑ Show shipping options
  - ☑ Show payment icons

#### Thank You Page Settings
- **Elements**
  - ☑ Show order details
  - ☑ Show continue shopping button
  - ☑ Show related products
  - Custom message: [text field]

#### My Account / Customer Portal Settings
- **Layout**
  - Navigation: Sidebar / Tabs / Dropdown
  
- **Elements**
  - ☑ Show dashboard
  - ☑ Show orders
  - ☑ Show downloads
  - ☑ Show addresses
  - ☑ Show account details

---

## Benefits of This Approach

✅ **Flexible**: Users control every aspect
✅ **Simple**: No need to understand "themes"
✅ **Scalable**: Easy to add new options
✅ **GDPR-friendly**: Default to self-hosted fonts
✅ **Page-specific**: Each page can have different settings
✅ **No redundancy**: One source of truth per setting

---

## Implementation Plan

1. ✅ Remove theme presets (Classic, Modern, Boutique, Launch)
2. ✅ Create Global Settings component
3. ✅ Create Page Settings components for each page
4. ✅ Add font loading system with @font-face
5. ✅ Create Tailwind plugin for dynamic typography
6. ✅ Update Customer SPA to read settings from API
7. ✅ Add settings API endpoints
8. ✅ Test all combinations

---

## Settings API Structure

```typescript
interface WooNooWSettings {
  spa_mode: 'disabled' | 'checkout_only' | 'full';
  
  typography: {
    mode: 'predefined' | 'custom_google';
    predefined_pair?: 'modern' | 'editorial' | 'friendly' | 'elegant';
    custom?: {
      heading: string; // Google Font name or URL
      body: string;
    };
    scale: number; // 0.8 - 1.2
  };
  
  colors: {
    primary: string;
    secondary: string;
    accent: string;
    text: string;
    background: string;
  };
  
  pages: {
    shop: ShopPageSettings;
    product: ProductPageSettings;
    cart: CartPageSettings;
    checkout: CheckoutPageSettings;
    thankyou: ThankYouPageSettings;
    account: AccountPageSettings;
  };
}
```