<?php defined('ABSPATH') || exit; ?>
<!-- ANNOUNCEMENT -->
<div class="lux-announcement">
Free delivery on orders above $90
</div>
<!-- HEADER -->
<header class="lux-header">
<div class="lux-header-inner">
<!-- LEFT -->
<div class="lux-left">
<button class="lux-btn lux-menu-toggle" aria-label="Menu">
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<button class="lux-btn lux-search-toggle" aria-label="Search">
<svg viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7"/>
<line x1="21" y1="21" x2="16.5" y2="16.5"/>
</svg>
</button>
</div>
<!-- LOGO -->
<a href="<?php echo esc_url(home_url('/')); ?>" class="lux-logo">OTCHERA</a>
<!-- RIGHT -->
<div class="lux-right">
<a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="lux-btn lux-cart">
<svg viewBox="0 0 24 24">
<path d="M6 6h15l-2 10H8z"/>
<circle cx="9" cy="20" r="1"/>
<circle cx="18" cy="20" r="1"/>
</svg>
<span class="lux-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</span>
</a>
<a href="<?php echo esc_url(site_url('/wishlist')); ?>" class="lux-btn">
<svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-7-10a4 4 0 018-2 4 4 0 018 2c0 5.6-7 10-7 10z"/></svg>
</a>
<a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>" class="lux-btn">
<svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6"/></svg>
</a>
</div>
</div>
</header>
<div class="lux-overlay"></div>
<!-- MENU -->
<aside class="lux-menu">
<button class="lux-menu-close">✕ close</button>
<div class="lux-menu-actions">
<a href="<?php echo esc_url(wc_get_page_permalink('myaccount')); ?>">Account</a>
<a href="<?php echo esc_url(site_url('/wishlist')); ?>">Wishlist</a>
<a href="<?php echo esc_url(wc_get_cart_url()); ?>">Cart</a>
</div>
<!-- SEARCH -->
<div class="lux-menu-search">
<?php get_search_form(); ?>
</div>
<!-- CATEGORIES -->
<div class="lux-menu-cats">
<h4>Categories</h4>
<ul>
<?php
$parents = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => 0
]);
foreach ($parents as $parent):
$children = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => $parent->term_id
]);
?>
<li class="lux-cat">
<button class="lux-cat-toggle">
<span><?php echo esc_html($parent->name); ?></span>
<?php if ($children): ?><i></i><?php endif; ?>
</button>
<?php if ($children): ?>
<ul class="lux-sub">
<?php foreach ($children as $child): ?>
<li>
<a href="<?php echo esc_url(get_term_link($child)); ?>">
<?php echo esc_html($child->name); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="lux-contact">
<a href="/contact">Contact us</a>
</div>
<div class="lux-menu-footer">
<div class="lux-socials">
<a href="#">Instagram</a>
<a href="#">Facebook</a>
<a href="#">TikTok</a>
</div>
<div class="lux-footer-logo">OTCHERA</div>
</div>
</aside>
/* ANNOUNCEMENT */
.lux-announcement{
position:fixed;top:0;width:100%;height:28px;
background:#000;color:#fff;
text-align:center;line-height:28px;
font-size:12px;z-index:1000;
}
/* HEADER */
.lux-header{
position:fixed;top:28px;width:100%;height:60px;
background:#fffcfb;z-index:999;
transition:transform .35s ease,background .35s ease;
}
.home .lux-header{background:transparent;}
.lux-header.scrolled{background:#fff;}
.lux-header.hide{transform:translateY(-100%);}
.lux-header-inner{
height:60px;display:flex;align-items:center;
justify-content:space-between;padding:0 20px;
position:relative;
}
/* LOGO */
.lux-logo{
position:absolute;left:50%;
transform:translateX(-50%);
font-size:22px;font-weight:500;
text-decoration:none;color:#000;
}
/* ICONS */
.lux-left,.lux-right{display:flex;gap:14px;}
.lux-btn{background:none;border:none;cursor:pointer;padding:0;}
.lux-header svg{
width:20px;height:20px;
stroke:#000;fill:none;stroke-width:1.5;
}
/* OVERLAY */
.lux-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,.4);
opacity:0;pointer-events:none;
transition:.3s;z-index:1100;
}
.lux-overlay.active{opacity:1;pointer-events:auto;}
/* MENU */
.lux-menu{
position:fixed;top:0;left:0;height:100%;
width:100%;max-width:420px;
background:#fff;padding:24px;
transform:translateX(-100%);
transition:.35s ease;z-index:1200;
overflow-y:auto;
}
.lux-menu.active{transform:translateX(0);}
/* MENU ACTIONS */
.lux-menu-actions{
display:flex;justify-content:center;
gap:12px;margin:20px 0;
}
.lux-menu-actions a{
padding:8px 14px;border:1px solid #ddd;
border-radius:20px;font-size:13px;
}
/* SEARCH */
.lux-menu-search input{
width:100%;padding:10px;border:1px solid #ddd;
}
/* CATEGORIES */
.lux-menu-cats ul{list-style:none;padding:0;}
.lux-cat-toggle,
.lux-sub-toggle{
width:100%;display:flex;
justify-content:space-between;
padding:12px 0;border:none;
background:none;font-size:14px;
cursor:pointer;
}
.lux-cat-toggle i,
.lux-sub-toggle i{
width:10px;height:10px;
border-right:1.5px solid #000;
border-bottom:1.5px solid #000;
transform:rotate(45deg);
transition:.25s;
}
.lux-cat.open > .lux-cat-toggle i,
.lux-sub-cat.open > .lux-sub-toggle i{
transform:rotate(-135deg);
}
.lux-sub,
.lux-sub-sub{display:none;padding-left:14px;}
.lux-cat.open > .lux-sub{display:block;}
.lux-sub-cat.open > .lux-sub-sub{display:block;}
/* FOOTER */
.lux-menu-footer{text-align:center;margin-top:40px;}
.lux-socials{display:flex;justify-content:center;gap:16px;margin-bottom:12px;}
/* PAGE SPACING */
body:not(.home){padding-top:88px;}
/* CART COUNT */
.lux-cart {
position: relative;
}
.lux-cart-count {
position: absolute;
top: -6px;
right: -8px;
min-width: 16px;
height: 16px;
background: #000;
color: #fff;
font-size: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.lux-cart-count:empty {
display: none;
}
document.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector('.lux-menu');
const overlay = document.querySelector('.lux-overlay');
const menuBtn = document.querySelector('.lux-menu-toggle');
const searchBtn = document.querySelector('.lux-search-toggle');
const closeBtn = document.querySelector('.lux-menu-close');
const searchInput = document.querySelector('.lux-menu-search input');
function openMenu(focusSearch = false) {
menu.classList.add('active');
overlay.classList.add('active');
document.body.style.overflow = 'hidden';
if (focusSearch && searchInput) {
setTimeout(() => {
searchInput.focus();
searchInput.scrollIntoView({ behavior: 'smooth' });
}, 200);
}
}
function closeMenu() {
menu.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
}
menuBtn?.addEventListener('click', () => openMenu());
searchBtn?.addEventListener('click', () => openMenu(true));
closeBtn?.addEventListener('click', closeMenu);
overlay?.addEventListener('click', closeMenu);
document.addEventListener('click', e => {
const toggle = e.target.closest('.lux-cat-toggle');
if (toggle) {
e.preventDefault();
toggle.closest('.lux-cat').classList.toggle('open');
}
});
/* HEADER SCROLL */
const header = document.querySelector('.lux-header');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const current = window.pageYOffset;
if (current > lastScroll && current > 120) {
header.classList.add('hide');
} else {
header.classList.remove('hide');
}
if (document.body.classList.contains('home')) {
header.classList.toggle('scrolled', current > 80);
}
lastScroll = current;
});
});
Sign up now
