Files

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

5.1 KiB

Raw Blame History

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

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

Settings API Structure

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

5.1 KiB Raw Blame History