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
@@ -1,6 +1,12 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ShoppingCart, User, Search, Menu, X } from 'lucide-react';
|
||||
import { useLayout } from '../contexts/ThemeContext';
|
||||
import { useCartStore } from '../lib/cart/store';
|
||||
import { useHeaderSettings, useFooterSettings } from '../hooks/useAppearanceSettings';
|
||||
import { SearchModal } from '../components/SearchModal';
|
||||
import { NewsletterForm } from '../components/NewsletterForm';
|
||||
import { LayoutWrapper } from './LayoutWrapper';
|
||||
|
||||
interface BaseLayoutProps {
|
||||
children: ReactNode;
|
||||
@@ -9,23 +15,24 @@ interface BaseLayoutProps {
|
||||
/**
|
||||
* Base Layout Component
|
||||
*
|
||||
* Renders the appropriate layout based on theme configuration
|
||||
* Renders the appropriate layout based on header style from appearance settings
|
||||
*/
|
||||
export function BaseLayout({ children }: BaseLayoutProps) {
|
||||
const { layout } = useLayout();
|
||||
const headerSettings = useHeaderSettings();
|
||||
|
||||
// Dynamically import and render the appropriate layout
|
||||
switch (layout) {
|
||||
// Map header styles to layouts
|
||||
// classic -> ClassicLayout, centered -> ModernLayout, minimal -> LaunchLayout, split -> BoutiqueLayout
|
||||
switch (headerSettings.style) {
|
||||
case 'classic':
|
||||
return <ClassicLayout>{children}</ClassicLayout>;
|
||||
case 'modern':
|
||||
case 'centered':
|
||||
return <ModernLayout>{children}</ModernLayout>;
|
||||
case 'boutique':
|
||||
return <BoutiqueLayout>{children}</BoutiqueLayout>;
|
||||
case 'launch':
|
||||
case 'minimal':
|
||||
return <LaunchLayout>{children}</LaunchLayout>;
|
||||
case 'split':
|
||||
return <BoutiqueLayout>{children}</BoutiqueLayout>;
|
||||
default:
|
||||
return <ModernLayout>{children}</ModernLayout>;
|
||||
return <ClassicLayout>{children}</ClassicLayout>;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,77 +40,303 @@ export function BaseLayout({ children }: BaseLayoutProps) {
|
||||
* Classic Layout - Traditional ecommerce
|
||||
*/
|
||||
function ClassicLayout({ children }: BaseLayoutProps) {
|
||||
return (
|
||||
<div className="classic-layout min-h-screen flex flex-col">
|
||||
<header className="classic-header bg-white border-b sticky top-0 z-50">
|
||||
const { cart } = useCartStore();
|
||||
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
||||
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
||||
const user = (window as any).woonoowCustomer?.user;
|
||||
const headerSettings = useHeaderSettings();
|
||||
const footerSettings = useFooterSettings();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
const heightClass = headerSettings.height === 'compact' ? 'h-16' : headerSettings.height === 'tall' ? 'h-24' : 'h-20';
|
||||
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
||||
|
||||
const footerColsClass: Record<string, string> = {
|
||||
'1': 'grid-cols-1',
|
||||
'2': 'grid-cols-1 md:grid-cols-2',
|
||||
'3': 'grid-cols-1 md:grid-cols-3',
|
||||
'4': 'grid-cols-1 md:grid-cols-4',
|
||||
};
|
||||
const footerGridClass = footerColsClass[footerSettings.columns] || 'grid-cols-1 md:grid-cols-4';
|
||||
|
||||
const headerContent = (
|
||||
<>
|
||||
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
||||
<header className="classic-header bg-white border-b sticky top-0 z-50 shadow-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
<div className={`flex items-center ${headerSettings.mobile_logo === 'center' ? 'max-md:justify-center' : 'justify-between'} ${heightClass}`}>
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0">
|
||||
<Link to="/shop" className="text-2xl font-bold" style={{ color: 'var(--color-primary)' }}>
|
||||
{(window as any).woonoowCustomer?.siteTitle || 'Store Title'}
|
||||
{headerSettings.elements.logo && (
|
||||
<div className={`flex-shrink-0 ${headerSettings.mobile_logo === 'center' ? 'max-md:mx-auto' : ''}`}>
|
||||
<Link to="/shop" className="flex items-center gap-3 group">
|
||||
{storeLogo ? (
|
||||
<img
|
||||
src={storeLogo}
|
||||
alt={storeName}
|
||||
className="object-contain"
|
||||
style={{
|
||||
width: headerSettings.logo_width,
|
||||
height: headerSettings.logo_height,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-xl">W</span>
|
||||
</div>
|
||||
<span className="text-2xl font-serif font-light text-gray-900 hidden sm:block group-hover:text-gray-600 transition-colors">
|
||||
{storeName}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link to="/shop" className="hover:text-primary transition-colors">Shop</Link>
|
||||
<a href="/about" className="hover:text-primary transition-colors">About</a>
|
||||
<a href="/contact" className="hover:text-primary transition-colors">Contact</a>
|
||||
</nav>
|
||||
{headerSettings.elements.navigation && (
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link to="/shop" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
||||
<a href="/about" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">About</a>
|
||||
<a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link to="/my-account" className="hover:text-primary transition-colors">Account</Link>
|
||||
<Link to="/cart" className="hover:text-primary transition-colors">Cart (0)</Link>
|
||||
</div>
|
||||
{/* Actions - Hidden on mobile when using bottom-nav */}
|
||||
{hasActions && (
|
||||
<div className={`flex items-center gap-3 ${headerSettings.mobile_menu === 'bottom-nav' ? 'max-md:hidden' : ''}`}>
|
||||
{/* Search */}
|
||||
{headerSettings.elements.search && (
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<Search className="h-5 w-5 text-gray-600" />
|
||||
</button>
|
||||
)}
|
||||
{/* Account */}
|
||||
{headerSettings.elements.account && (user?.isLoggedIn ? (
|
||||
<Link to="/my-account" className="no-underline">
|
||||
<button className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<User className="h-5 w-5 text-gray-600" />
|
||||
<span className="hidden lg:block text-sm font-medium text-gray-700">Account</span>
|
||||
</button>
|
||||
</Link>
|
||||
) : (
|
||||
<a href="/wp-login.php" className="no-underline">
|
||||
<button className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<User className="h-5 w-5 text-gray-600" />
|
||||
<span className="hidden lg:block text-sm font-medium text-gray-700">Account</span>
|
||||
</button>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Cart */}
|
||||
{headerSettings.elements.cart && (
|
||||
<Link to="/cart" className="no-underline">
|
||||
<button className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors relative">
|
||||
<div className="relative">
|
||||
<ShoppingCart className="h-5 w-5 text-gray-600" />
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center font-medium">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="hidden lg:block text-sm font-medium text-gray-700">
|
||||
Cart ({itemCount})
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Toggle - Only for hamburger and slide-in */}
|
||||
{(headerSettings.mobile_menu === 'hamburger' || headerSettings.mobile_menu === 'slide-in') && (
|
||||
<button
|
||||
className="md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu - Hamburger Dropdown */}
|
||||
{headerSettings.mobile_menu === 'hamburger' && mobileMenuOpen && (
|
||||
<div className="md:hidden border-t py-4">
|
||||
{headerSettings.elements.navigation && (
|
||||
<nav className="flex flex-col space-y-2 mb-4">
|
||||
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
||||
<a href="/about" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">About</a>
|
||||
<a href="/contact" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Contact</a>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu - Slide-in Drawer */}
|
||||
{headerSettings.mobile_menu === 'slide-in' && mobileMenuOpen && (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setMobileMenuOpen(false)} />
|
||||
<div className="fixed top-0 left-0 h-full w-64 bg-white shadow-xl z-50 md:hidden transform transition-transform">
|
||||
<div className="p-4 border-b flex justify-between items-center">
|
||||
<span className="font-semibold">Menu</span>
|
||||
<button onClick={() => setMobileMenuOpen(false)}>
|
||||
<X className="h-5 w-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
{headerSettings.elements.navigation && (
|
||||
<nav className="flex flex-col p-4">
|
||||
<Link to="/shop" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">Shop</Link>
|
||||
<a href="/about" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">About</a>
|
||||
<a href="/contact" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">Contact</a>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="classic-main flex-1">
|
||||
{children}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
||||
const footerContent = (
|
||||
<>
|
||||
{/* Mobile Menu - Bottom Navigation */}
|
||||
{headerSettings.mobile_menu === 'bottom-nav' && (
|
||||
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t shadow-lg z-50">
|
||||
<div className="flex justify-around items-center py-3">
|
||||
<Link to="/shop" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
||||
<ShoppingCart className="h-5 w-5" />
|
||||
<span>Shop</span>
|
||||
</Link>
|
||||
{headerSettings.elements.search && (
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900"
|
||||
>
|
||||
<Search className="h-5 w-5" />
|
||||
<span>Search</span>
|
||||
</button>
|
||||
)}
|
||||
{headerSettings.elements.cart && (
|
||||
<Link to="/cart" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline relative">
|
||||
<ShoppingCart className="h-5 w-5" />
|
||||
{itemCount > 0 && (
|
||||
<span className="absolute top-1 right-2 h-4 w-4 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center">
|
||||
{itemCount}
|
||||
</span>
|
||||
)}
|
||||
<span>Cart</span>
|
||||
</Link>
|
||||
)}
|
||||
{headerSettings.elements.account && (
|
||||
user?.isLoggedIn ? (
|
||||
<Link to="/my-account" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
||||
<User className="h-5 w-5" />
|
||||
<span>Account</span>
|
||||
</Link>
|
||||
) : (
|
||||
<a href="/wp-login.php" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
||||
<User className="h-5 w-5" />
|
||||
<span>Login</span>
|
||||
</a>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<footer className="classic-footer bg-gray-100 border-t mt-auto">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">About</h3>
|
||||
<p className="text-sm text-gray-600">Your store description here.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Quick Links</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><a href="/shop" className="text-gray-600 hover:text-primary">Shop</a></li>
|
||||
<li><a href="/about" className="text-gray-600 hover:text-primary">About</a></li>
|
||||
<li><a href="/contact" className="text-gray-600 hover:text-primary">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Customer Service</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><a href="/shipping" className="text-gray-600 hover:text-primary">Shipping</a></li>
|
||||
<li><a href="/returns" className="text-gray-600 hover:text-primary">Returns</a></li>
|
||||
<li><a href="/faq" className="text-gray-600 hover:text-primary">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Newsletter</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">Subscribe to get updates</p>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
className="w-full px-4 py-2 border rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t mt-8 pt-8 text-center text-sm text-gray-600">
|
||||
© 2024 Your Store. All rights reserved.
|
||||
<div className={`grid ${footerGridClass} gap-8`}>
|
||||
{/* Render all sections dynamically */}
|
||||
{footerSettings.sections.filter((s: any) => s.visible).map((section: any) => (
|
||||
<div key={section.id}>
|
||||
<h3 className="font-semibold mb-4">{section.title}</h3>
|
||||
|
||||
{/* Contact Section */}
|
||||
{section.type === 'contact' && (
|
||||
<div className="space-y-1 text-sm text-gray-600">
|
||||
{footerSettings.contact_data.show_email && footerSettings.contact_data.email && (
|
||||
<p>Email: {footerSettings.contact_data.email}</p>
|
||||
)}
|
||||
{footerSettings.contact_data.show_phone && footerSettings.contact_data.phone && (
|
||||
<p>Phone: {footerSettings.contact_data.phone}</p>
|
||||
)}
|
||||
{footerSettings.contact_data.show_address && footerSettings.contact_data.address && (
|
||||
<p>{footerSettings.contact_data.address}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu Section */}
|
||||
{section.type === 'menu' && (
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><Link to="/shop" className="text-gray-600 hover:text-primary no-underline">Shop</Link></li>
|
||||
<li><a href="/about" className="text-gray-600 hover:text-primary no-underline">About</a></li>
|
||||
<li><a href="/contact" className="text-gray-600 hover:text-primary no-underline">Contact</a></li>
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Social Section */}
|
||||
{section.type === 'social' && footerSettings.social_links.length > 0 && (
|
||||
<ul className="space-y-2 text-sm">
|
||||
{footerSettings.social_links.map((link: any) => (
|
||||
<li key={link.id}>
|
||||
<a href={link.url} target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-primary no-underline">
|
||||
{link.platform}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Newsletter Section */}
|
||||
{section.type === 'newsletter' && (
|
||||
<NewsletterForm description={footerSettings.labels.newsletter_description} />
|
||||
)}
|
||||
|
||||
{/* Custom HTML Section */}
|
||||
{section.type === 'custom' && (
|
||||
<div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: section.content }} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Payment Icons */}
|
||||
{footerSettings.elements.payment && (
|
||||
<div className="mt-8 pt-8 border-t">
|
||||
<p className="text-xs text-gray-500 text-center mb-4">We accept</p>
|
||||
<div className="flex justify-center gap-4 text-gray-400">
|
||||
<span className="text-xs">💳 Visa</span>
|
||||
<span className="text-xs">💳 Mastercard</span>
|
||||
<span className="text-xs">💳 PayPal</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Copyright */}
|
||||
{footerSettings.elements.copyright && (
|
||||
<div className="border-t mt-8 pt-8 text-center text-sm text-gray-600">
|
||||
{footerSettings.copyright_text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<LayoutWrapper header={headerContent} footer={footerContent}>
|
||||
{children}
|
||||
</LayoutWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -111,25 +344,102 @@ function ClassicLayout({ children }: BaseLayoutProps) {
|
||||
* Modern Layout - Minimalist, clean
|
||||
*/
|
||||
function ModernLayout({ children }: BaseLayoutProps) {
|
||||
const { cart } = useCartStore();
|
||||
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
||||
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
||||
const user = (window as any).woonoowCustomer?.user;
|
||||
const headerSettings = useHeaderSettings();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
const paddingClass = headerSettings.height === 'compact' ? 'py-4' : headerSettings.height === 'tall' ? 'py-8' : 'py-6';
|
||||
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
||||
|
||||
return (
|
||||
<div className="modern-layout min-h-screen flex flex-col">
|
||||
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
||||
<header className="modern-header bg-white border-b sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col items-center py-6">
|
||||
<div className={`flex flex-col items-center ${paddingClass}`}>
|
||||
{/* Logo - Centered */}
|
||||
<Link to="/shop" className="text-3xl font-bold mb-4" style={{ color: 'var(--color-primary)' }}>
|
||||
{(window as any).woonoowCustomer?.siteTitle || 'Store Title'}
|
||||
</Link>
|
||||
{headerSettings.elements.logo && (
|
||||
<Link to="/shop" className="mb-4">
|
||||
{storeLogo ? (
|
||||
<img
|
||||
src={storeLogo}
|
||||
alt={storeName}
|
||||
className="object-contain"
|
||||
style={{
|
||||
width: headerSettings.logo_width,
|
||||
height: headerSettings.logo_height,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-3xl font-bold text-gray-900">{storeName}</span>
|
||||
)}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Navigation - Centered */}
|
||||
<nav className="flex items-center space-x-8">
|
||||
<Link to="/shop" className="hover:text-primary transition-colors">Shop</Link>
|
||||
<a href="/about" className="hover:text-primary transition-colors">About</a>
|
||||
<a href="/contact" className="hover:text-primary transition-colors">Contact</a>
|
||||
<Link to="/my-account" className="hover:text-primary transition-colors">Account</Link>
|
||||
<Link to="/cart" className="hover:text-primary transition-colors">Cart</Link>
|
||||
</nav>
|
||||
{/* Navigation & Actions - Centered */}
|
||||
{(headerSettings.elements.navigation || hasActions) && (
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{headerSettings.elements.navigation && (
|
||||
<>
|
||||
<Link to="/shop" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
||||
<a href="/about" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">About</a>
|
||||
<a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a>
|
||||
</>
|
||||
)}
|
||||
{headerSettings.elements.search && (
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
{headerSettings.elements.account && (
|
||||
user?.isLoggedIn ? (
|
||||
<Link to="/my-account" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<User className="h-4 w-4" /> Account
|
||||
</Link>
|
||||
) : (
|
||||
<a href="/wp-login.php" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<User className="h-4 w-4" /> Account
|
||||
</a>
|
||||
)
|
||||
)}
|
||||
{headerSettings.elements.cart && (
|
||||
<Link to="/cart" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
className="md:hidden mt-4 flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t py-4">
|
||||
{headerSettings.elements.navigation && (
|
||||
<nav className="flex flex-col space-y-2 mb-4">
|
||||
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
||||
<a href="/about" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">About</a>
|
||||
<a href="/contact" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Contact</a>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -162,28 +472,99 @@ function ModernLayout({ children }: BaseLayoutProps) {
|
||||
* Boutique Layout - Luxury, elegant
|
||||
*/
|
||||
function BoutiqueLayout({ children }: BaseLayoutProps) {
|
||||
const { cart } = useCartStore();
|
||||
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
||||
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'BOUTIQUE';
|
||||
const user = (window as any).woonoowCustomer?.user;
|
||||
const headerSettings = useHeaderSettings();
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
const heightClass = headerSettings.height === 'compact' ? 'h-20' : headerSettings.height === 'tall' ? 'h-28' : 'h-24';
|
||||
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
||||
|
||||
return (
|
||||
<div className="boutique-layout min-h-screen flex flex-col font-serif">
|
||||
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
||||
<header className="boutique-header bg-white border-b sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-24">
|
||||
<div className={`flex items-center justify-between ${heightClass}`}>
|
||||
{/* Logo */}
|
||||
<div className="flex-1"></div>
|
||||
|
||||
<div className="flex-shrink-0">
|
||||
<Link to="/shop" className="text-3xl font-bold tracking-wide" style={{ color: 'var(--color-primary)' }}>
|
||||
{(window as any).woonoowCustomer?.siteTitle || 'BOUTIQUE'}
|
||||
{headerSettings.elements.logo && (
|
||||
<div className="flex-shrink-0">
|
||||
<Link to="/shop">
|
||||
{storeLogo ? (
|
||||
<img
|
||||
src={storeLogo}
|
||||
alt={storeName}
|
||||
className="object-contain"
|
||||
style={{
|
||||
width: headerSettings.logo_width,
|
||||
height: headerSettings.logo_height,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-3xl font-bold tracking-wide text-gray-900">{storeName}</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 flex justify-end">
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link to="/shop" className="text-sm uppercase tracking-wider hover:text-primary transition-colors">Shop</Link>
|
||||
<Link to="/my-account" className="text-sm uppercase tracking-wider hover:text-primary transition-colors">Account</Link>
|
||||
<Link to="/cart" className="text-sm uppercase tracking-wider hover:text-primary transition-colors">Cart</Link>
|
||||
</nav>
|
||||
{(headerSettings.elements.navigation || hasActions) && (
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{headerSettings.elements.navigation && (
|
||||
<Link to="/shop" className="text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
||||
)}
|
||||
{headerSettings.elements.search && (
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
{headerSettings.elements.account && (user?.isLoggedIn ? (
|
||||
<Link to="/my-account" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<User className="h-4 w-4" /> Account
|
||||
</Link>
|
||||
) : (
|
||||
<a href="/wp-login.php" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<User className="h-4 w-4" /> Account
|
||||
</a>
|
||||
))}
|
||||
{headerSettings.elements.cart && (
|
||||
<Link to="/cart" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
||||
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
className="md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
>
|
||||
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden border-t py-4">
|
||||
{headerSettings.elements.navigation && (
|
||||
<nav className="flex flex-col space-y-2 mb-4">
|
||||
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -232,14 +613,35 @@ function LaunchLayout({ children }: BaseLayoutProps) {
|
||||
}
|
||||
|
||||
// For checkout flow: minimal header, no footer
|
||||
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
||||
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
||||
const headerSettings = useHeaderSettings();
|
||||
|
||||
const heightClass = headerSettings.height === 'compact' ? 'h-12' : headerSettings.height === 'tall' ? 'h-20' : 'h-16';
|
||||
|
||||
return (
|
||||
<div className="launch-layout min-h-screen flex flex-col bg-gray-50">
|
||||
<header className="launch-header bg-white border-b">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-center h-16">
|
||||
<Link to="/shop" className="text-xl font-bold" style={{ color: 'var(--color-primary)' }}>
|
||||
{(window as any).woonoowCustomer?.siteTitle || 'Store Title'}
|
||||
</Link>
|
||||
<div className={`flex items-center justify-center ${heightClass}`}>
|
||||
{headerSettings.elements.logo && (
|
||||
<Link to="/shop">
|
||||
{storeLogo ? (
|
||||
<img
|
||||
src={storeLogo}
|
||||
alt={storeName}
|
||||
className="object-contain"
|
||||
style={{
|
||||
width: headerSettings.logo_width,
|
||||
height: headerSettings.logo_height,
|
||||
maxWidth: '100%'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xl font-bold text-gray-900">{storeName}</span>
|
||||
)}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
56
customer-spa/src/layouts/LayoutWrapper.tsx
Normal file
56
customer-spa/src/layouts/LayoutWrapper.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useCheckoutSettings, useThankYouSettings } from '../hooks/useAppearanceSettings';
|
||||
import { MinimalHeader } from '../components/Layout/MinimalHeader';
|
||||
import { MinimalFooter } from '../components/Layout/MinimalFooter';
|
||||
|
||||
interface LayoutWrapperProps {
|
||||
children: ReactNode;
|
||||
header: ReactNode;
|
||||
footer: ReactNode;
|
||||
}
|
||||
|
||||
export function LayoutWrapper({ children, header, footer }: LayoutWrapperProps) {
|
||||
const location = useLocation();
|
||||
const checkoutSettings = useCheckoutSettings();
|
||||
const thankYouSettings = useThankYouSettings();
|
||||
|
||||
// Determine visibility settings based on current route
|
||||
let headerVisibility = 'show';
|
||||
let footerVisibility = 'show';
|
||||
let backgroundColor = '';
|
||||
|
||||
if (location.pathname === '/checkout') {
|
||||
headerVisibility = checkoutSettings.layout.header_visibility || 'minimal';
|
||||
footerVisibility = checkoutSettings.layout.footer_visibility || 'minimal';
|
||||
backgroundColor = checkoutSettings.layout.background_color || '';
|
||||
} else if (location.pathname.startsWith('/order-received/')) {
|
||||
headerVisibility = thankYouSettings.headerVisibility || 'show';
|
||||
footerVisibility = thankYouSettings.footerVisibility || 'minimal';
|
||||
backgroundColor = thankYouSettings.backgroundColor || '';
|
||||
}
|
||||
|
||||
// Render appropriate header
|
||||
const renderHeader = () => {
|
||||
if (headerVisibility === 'hide') return null;
|
||||
if (headerVisibility === 'minimal') return <MinimalHeader />;
|
||||
return header;
|
||||
};
|
||||
|
||||
// Render appropriate footer
|
||||
const renderFooter = () => {
|
||||
if (footerVisibility === 'hide') return null;
|
||||
if (footerVisibility === 'minimal') return <MinimalFooter />;
|
||||
return footer;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout-wrapper min-h-screen flex flex-col" style={backgroundColor ? { backgroundColor } : undefined}>
|
||||
{renderHeader()}
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
{renderFooter()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user