mirror of
https://github.com/myronblair/tomsjavajive
synced 2026-06-30 17:50:32 -05:00
Condense shop page: merge hero + filters into one compact bar
Combined the large hero section and two-row filter section into a single compact dark header bar. Category and type pills are inline with a divider, search/sort sit in the header row. Reduced section top padding. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -72,66 +72,66 @@ $productTypesList = db()->fetchAll("SELECT type_id, name, slug FROM product_type
|
||||
|
||||
?>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section style="background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); color: white; padding: 3rem 0; text-align: center;">
|
||||
<div class="container">
|
||||
<h1 style="font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 0.5rem;">Our Coffee Collection</h1>
|
||||
<p style="opacity: 0.9;">Discover your perfect brew from our selection of premium coffees</p>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
$filterQs = http_build_query(array_filter(['category' => $category, 'subcat' => $subcat]));
|
||||
$filterQs = $filterQs ? '&' . $filterQs : '';
|
||||
?>
|
||||
|
||||
<section class="section">
|
||||
<!-- Shop Header + Filters combined -->
|
||||
<section style="background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); color: white; padding: 1.25rem 0;">
|
||||
<div class="container">
|
||||
<!-- Filters Bar -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
||||
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
|
||||
<a href="/shop.php<?= $subcat ? '?subcat=' . urlencode($subcat) : '' ?>" class="btn <?= !$category ? 'btn-primary' : 'btn-secondary' ?>">All</a>
|
||||
<?php foreach ($categories as $cat): ?>
|
||||
<a href="/shop.php?category=<?= urlencode($cat['category']) ?><?= $subcat ? '&subcat=' . urlencode($subcat) : '' ?>"
|
||||
class="btn <?= $category === $cat['category'] ? 'btn-primary' : 'btn-secondary' ?>">
|
||||
<?= htmlspecialchars(ucfirst($cat['category'])) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php if (!empty($productTypesList)): ?>
|
||||
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
|
||||
<span class="text-muted" style="font-size: 0.85rem; font-weight: 600; white-space: nowrap;">Sub Categories:</span>
|
||||
<a href="/shop.php<?= $category ? '?category=' . urlencode($category) : '' ?>" class="btn btn-sm <?= !$subcat ? 'btn-primary' : 'btn-secondary' ?>">All</a>
|
||||
<?php foreach ($productTypesList as $pt): ?>
|
||||
<a href="/shop.php?subcat=<?= urlencode($pt['type_id']) ?><?= $category ? '&category=' . urlencode($category) : '' ?>"
|
||||
class="btn btn-sm <?= $subcat === $pt['type_id'] ? 'btn-primary' : 'btn-secondary' ?>">
|
||||
<?= htmlspecialchars($pt['name']) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 1rem; align-items: center;">
|
||||
<form method="GET" style="display: flex; gap: 0.5rem;">
|
||||
<?php if ($category): ?>
|
||||
<input type="hidden" name="category" value="<?= htmlspecialchars($category) ?>">
|
||||
<?php endif; ?>
|
||||
<?php if ($subcat): ?>
|
||||
<input type="hidden" name="subcat" value="<?= htmlspecialchars($subcat) ?>">
|
||||
<?php endif; ?>
|
||||
<input type="text" name="search" class="form-input" placeholder="Search..."
|
||||
value="<?= htmlspecialchars($search) ?>" style="width: 200px;">
|
||||
<button type="submit" class="btn btn-secondary"><i class="fas fa-search"></i></button>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;">
|
||||
<h1 style="font-family: var(--font-display); font-size: 1.4rem; margin: 0; white-space: nowrap;">Our Coffee Collection</h1>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
|
||||
<form method="GET" style="display: flex; gap: 0.4rem;">
|
||||
<?php if ($category): ?><input type="hidden" name="category" value="<?= htmlspecialchars($category) ?>"><?php endif; ?>
|
||||
<?php if ($subcat): ?><input type="hidden" name="subcat" value="<?= htmlspecialchars($subcat) ?>"><?php endif; ?>
|
||||
<input type="text" name="search" class="form-input" placeholder="Search..." value="<?= htmlspecialchars($search) ?>"
|
||||
style="width: 160px; padding: 0.35rem 0.75rem; font-size: 0.85rem; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: white;">
|
||||
<button type="submit" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.35rem 0.65rem; border-radius: var(--radius-md); cursor: pointer;">
|
||||
<i class="fas fa-search" style="font-size: 0.8rem;"></i>
|
||||
</button>
|
||||
</form>
|
||||
<?php
|
||||
$filterQs = http_build_query(array_filter(['category' => $category, 'subcat' => $subcat]));
|
||||
$filterQs = $filterQs ? '&' . $filterQs : '';
|
||||
?>
|
||||
<select onchange="window.location.href=this.value" class="form-select" style="width: auto;">
|
||||
<option value="/shop.php?sort=newest<?= $filterQs ?>" <?= $sort === 'newest' ? 'selected' : '' ?>>Newest</option>
|
||||
<option value="/shop.php?sort=price_low<?= $filterQs ?>" <?= $sort === 'price_low' ? 'selected' : '' ?>>Price: Low to High</option>
|
||||
<option value="/shop.php?sort=price_high<?= $filterQs ?>" <?= $sort === 'price_high' ? 'selected' : '' ?>>Price: High to Low</option>
|
||||
<option value="/shop.php?sort=name<?= $filterQs ?>" <?= $sort === 'name' ? 'selected' : '' ?>>Name</option>
|
||||
<select onchange="window.location.href=this.value"
|
||||
style="background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.35rem 0.6rem; border-radius: var(--radius-md); font-size: 0.85rem; cursor: pointer;">
|
||||
<option value="/shop.php?sort=newest<?= $filterQs ?>" <?= $sort==='newest' ? 'selected' : '' ?> style="color:#333">Newest</option>
|
||||
<option value="/shop.php?sort=price_low<?= $filterQs ?>" <?= $sort==='price_low' ? 'selected' : '' ?> style="color:#333">Price ↑</option>
|
||||
<option value="/shop.php?sort=price_high<?= $filterQs ?>" <?= $sort==='price_high' ? 'selected' : '' ?> style="color:#333">Price ↓</option>
|
||||
<option value="/shop.php?sort=name<?= $filterQs ?>" <?= $sort==='name' ? 'selected' : '' ?> style="color:#333">Name</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter pills -->
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem;">
|
||||
<span style="font-size: 0.75rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.25rem;">Category:</span>
|
||||
<a href="/shop.php<?= $subcat ? '?subcat='.urlencode($subcat) : '' ?>"
|
||||
style="<?= !$category ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">All</a>
|
||||
<?php foreach ($categories as $cat): ?>
|
||||
<a href="/shop.php?category=<?= urlencode($cat['category']) ?><?= $subcat ? '&subcat='.urlencode($subcat) : '' ?>"
|
||||
style="<?= $category===$cat['category'] ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">
|
||||
<?= htmlspecialchars(ucfirst($cat['category'])) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<?php if (!empty($productTypesList)): ?>
|
||||
<span style="width:1px; height:16px; background:rgba(255,255,255,0.3); margin:0 0.25rem;"></span>
|
||||
<span style="font-size:0.75rem; opacity:0.75; text-transform:uppercase; letter-spacing:0.05em; margin-right:0.25rem;">Type:</span>
|
||||
<a href="/shop.php<?= $category ? '?category='.urlencode($category) : '' ?>"
|
||||
style="<?= !$subcat ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">All</a>
|
||||
<?php foreach ($productTypesList as $pt): ?>
|
||||
<a href="/shop.php?subcat=<?= urlencode($pt['type_id']) ?><?= $category ? '&category='.urlencode($category) : '' ?>"
|
||||
style="<?= $subcat===$pt['type_id'] ? 'background:white;color:var(--color-secondary);font-weight:700;' : 'background:rgba(255,255,255,0.15);color:white;' ?> padding:0.2rem 0.65rem; border-radius:999px; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.4);">
|
||||
<?= htmlspecialchars($pt['name']) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" style="padding-top: 1.5rem;">
|
||||
<div class="container">
|
||||
|
||||
<!-- Results count -->
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user