901 lines
30 KiB
HTML
901 lines
30 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="Shop all products - Sky Art Shop" />
|
|
<title>Shop - Sky Art Shop</title>
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Icons -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
|
|
<!-- Modern Theme CSS -->
|
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix34" />
|
|
<link rel="stylesheet" href="/assets/css/mobile-fixes.css?v=20260119fix1" />
|
|
<style>
|
|
/* Mobile & Tablet: Shop page layout fixes */
|
|
@media (max-width: 992px) {
|
|
/* Container - reduce padding on mobile */
|
|
.section .container {
|
|
padding: 0 12px !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Shop layout - single column, no overflow */
|
|
.shop-layout {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Shop sidebar - filters container */
|
|
.shop-sidebar {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
|
|
/* Search card */
|
|
#searchCard {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
margin-bottom: 12px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
#searchCard .search-box {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
#searchCard input {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Mobile filter dropdowns */
|
|
#mobileFilters {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
justify-content: space-between !important;
|
|
gap: 8px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
#mobileFilters select {
|
|
flex: 1 1 0 !important;
|
|
min-width: 0 !important;
|
|
max-width: none !important;
|
|
padding: 10px 8px !important;
|
|
font-size: 0.8rem !important;
|
|
border-radius: 8px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
#desktopFilters {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Shop main content */
|
|
.shop-main {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Shop header with sort */
|
|
.shop-header {
|
|
flex-wrap: wrap !important;
|
|
gap: 8px !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
/* Products grid - proper 2-column layout */
|
|
.products-grid {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
gap: 12px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* Product cards - fill grid cell */
|
|
.product-card {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
box-sizing: border-box !important;
|
|
background: #ffffff !important;
|
|
}
|
|
|
|
.product-image {
|
|
background: #ffffff !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.product-image img {
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Tablet specific (larger screens) */
|
|
@media (min-width: 768px) and (max-width: 992px) {
|
|
.section .container {
|
|
padding: 0 20px !important;
|
|
}
|
|
|
|
.products-grid {
|
|
grid-template-columns: repeat(3, 1fr) !important;
|
|
gap: 16px !important;
|
|
}
|
|
|
|
#mobileFilters select {
|
|
padding: 12px 12px !important;
|
|
font-size: 0.85rem !important;
|
|
}
|
|
}
|
|
|
|
/* Desktop: hide native dropdowns, show desktop filters */
|
|
@media (min-width: 993px) {
|
|
#mobileFilters {
|
|
display: none !important;
|
|
}
|
|
#desktopFilters {
|
|
display: block !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<header class="nav-wrapper">
|
|
<nav class="navbar">
|
|
<a href="/home" class="nav-brand">
|
|
<img
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
alt="Sky Art Shop Logo"
|
|
/>
|
|
<span>Sky Art Shop</span>
|
|
</a>
|
|
|
|
<ul class="nav-menu">
|
|
<li><a href="/home" class="nav-link">Home</a></li>
|
|
<li><a href="/shop" class="nav-link active">Shop</a></li>
|
|
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
|
|
<li><a href="/blog" class="nav-link">Blog</a></li>
|
|
<li><a href="/about" class="nav-link">About</a></li>
|
|
<li><a href="/contact" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
|
|
<div class="nav-actions">
|
|
<a href="/signin" class="nav-icon-btn" title="Sign In">
|
|
<i class="bi bi-person"></i>
|
|
</a>
|
|
<button class="nav-icon-btn wishlist-btn-nav" title="Wishlist">
|
|
<i class="bi bi-heart"></i>
|
|
<span class="badge wishlist-count" style="display: none">0</span>
|
|
</button>
|
|
<button class="nav-icon-btn cart-btn" title="Cart">
|
|
<i class="bi bi-bag"></i>
|
|
<span class="badge cart-count" style="display: none">0</span>
|
|
</button>
|
|
<button class="nav-mobile-toggle" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<main class="page-content">
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<h1>Shop All Products</h1>
|
|
<p>
|
|
Explore our complete collection of stationery and crafting supplies
|
|
</p>
|
|
<div class="breadcrumb">
|
|
<a href="/home">Home</a> <span>/</span> <span>Shop</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shop Content -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="shop-layout">
|
|
<!-- Sidebar Filters -->
|
|
<aside class="shop-sidebar">
|
|
<!-- Search -->
|
|
<div class="filter-card" id="searchCard">
|
|
<div class="search-box" style="position: relative">
|
|
<input
|
|
type="text"
|
|
id="searchInput"
|
|
placeholder="Search products..."
|
|
style="
|
|
width: 100%;
|
|
padding: 12px 40px 12px 16px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
"
|
|
/>
|
|
<i
|
|
class="bi bi-search"
|
|
style="
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #888;
|
|
"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Filter Dropdowns - Native SELECT elements -->
|
|
<div
|
|
class="mobile-filter-row"
|
|
id="mobileFilters"
|
|
style="
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
"
|
|
>
|
|
<!-- Categories Dropdown -->
|
|
<select
|
|
id="categoryFilter"
|
|
style="
|
|
padding: 12px 16px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
border: 2px solid #d0d0d0;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #333;
|
|
cursor: pointer;
|
|
min-height: 44px;
|
|
appearance: auto;
|
|
"
|
|
>
|
|
<option value="">Categories</option>
|
|
<option value="all">All Products</option>
|
|
<!-- More categories loaded via JS -->
|
|
</select>
|
|
|
|
<!-- Price Range Dropdown -->
|
|
<select
|
|
id="priceFilter"
|
|
style="
|
|
padding: 12px 16px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
border: 2px solid #d0d0d0;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #333;
|
|
cursor: pointer;
|
|
min-height: 44px;
|
|
appearance: auto;
|
|
"
|
|
>
|
|
<option value="">Price Range</option>
|
|
<option value="0-10">Under $10</option>
|
|
<option value="10-25">$10 - $25</option>
|
|
<option value="25-50">$25 - $50</option>
|
|
<option value="50+">$50 & Above</option>
|
|
</select>
|
|
|
|
<!-- Availability Dropdown -->
|
|
<select
|
|
id="stockFilter"
|
|
style="
|
|
padding: 12px 16px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
border: 2px solid #d0d0d0;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #333;
|
|
cursor: pointer;
|
|
min-height: 44px;
|
|
appearance: auto;
|
|
"
|
|
>
|
|
<option value="">Availability</option>
|
|
<option value="in-stock">In Stock</option>
|
|
<option value="featured">Featured</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Desktop Filter Cards (hidden on mobile via CSS) -->
|
|
<div class="desktop-filters" id="desktopFilters">
|
|
<!-- Categories -->
|
|
<div class="filter-card" id="filterCard1">
|
|
<h3 class="filter-title">Categories</h3>
|
|
<div class="filter-options" id="filterOptions1">
|
|
<label class="filter-option">
|
|
<input type="checkbox" value="all" checked />
|
|
<span>All Products</span>
|
|
</label>
|
|
<!-- Categories loaded via JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price Range -->
|
|
<div class="filter-card" id="filterCard2">
|
|
<h3 class="filter-title">Price Range</h3>
|
|
<div class="filter-options" id="filterOptions2">
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="price" value="0-10" />
|
|
<span>Under $10</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="price" value="10-25" />
|
|
<span>$10 - $25</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="price" value="25-50" />
|
|
<span>$25 - $50</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="price" value="50+" />
|
|
<span>$50 & Above</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Availability -->
|
|
<div class="filter-card" id="filterCard3">
|
|
<h3 class="filter-title">Availability</h3>
|
|
<div class="filter-options" id="filterOptions3">
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="stock" value="in-stock" />
|
|
<span>In Stock</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="stock" value="featured" />
|
|
<span>Featured</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Products Grid -->
|
|
<div class="shop-main">
|
|
<div class="shop-header">
|
|
<div class="shop-results">
|
|
<span id="productCount">Loading products...</span>
|
|
</div>
|
|
<div class="shop-sort">
|
|
<select id="sortSelect">
|
|
<option value="newest">Newest First</option>
|
|
<option value="price-low">Price: Low to High</option>
|
|
<option value="price-high">Price: High to Low</option>
|
|
<option value="name-az">Name: A-Z</option>
|
|
<option value="name-za">Name: Z-A</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="products-grid" id="productsGrid">
|
|
<div
|
|
class="loading-spinner"
|
|
style="grid-column: 1/-1; margin: 40px auto"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-about">
|
|
<div class="footer-brand">
|
|
<img
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
alt="Sky Art Shop"
|
|
/>
|
|
<span>Sky Art Shop</span>
|
|
</div>
|
|
<p>
|
|
Your one-stop shop for scrapbooking, journaling, cardmaking, and
|
|
collaging stationery. Quality products for all your creative
|
|
needs.
|
|
</p>
|
|
<div class="footer-social" id="footerSocialLinks">
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerFacebook"
|
|
style="display: none"
|
|
><i class="bi bi-facebook"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerInstagram"
|
|
style="display: none"
|
|
><i class="bi bi-instagram"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerTwitter"
|
|
style="display: none"
|
|
><i class="bi bi-twitter-x"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerYoutube"
|
|
style="display: none"
|
|
><i class="bi bi-youtube"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerPinterest"
|
|
style="display: none"
|
|
><i class="bi bi-pinterest"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerTiktok"
|
|
style="display: none"
|
|
><i class="bi bi-tiktok"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerWhatsapp"
|
|
style="display: none"
|
|
><i class="bi bi-whatsapp"></i
|
|
></a>
|
|
<a
|
|
href="#"
|
|
class="social-link"
|
|
id="footerLinkedin"
|
|
style="display: none"
|
|
><i class="bi bi-linkedin"></i
|
|
></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Quick Links</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="/home">Home</a></li>
|
|
<li><a href="/shop">Shop</a></li>
|
|
<li><a href="/portfolio">Portfolio</a></li>
|
|
<li><a href="/blog">Blog</a></li>
|
|
<li><a href="/about">About Us</a></li>
|
|
<li><a href="/contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Customer Service</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="/faq">FAQ</a></li>
|
|
<li><a href="/shipping-info">Shipping Info</a></li>
|
|
<li><a href="/returns">Returns & Refunds</a></li>
|
|
<li><a href="/privacy">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-column">
|
|
<h4>Contact Us</h4>
|
|
<ul class="footer-links">
|
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Sky Art Shop. All rights reserved.</p>
|
|
<p>
|
|
Made with
|
|
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
|
|
for creative souls
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Cart Drawer -->
|
|
<div class="cart-overlay"></div>
|
|
<div class="cart-drawer">
|
|
<div class="cart-header">
|
|
<h3>Shopping Cart</h3>
|
|
<button class="cart-close"><i class="bi bi-x"></i></button>
|
|
</div>
|
|
<div class="cart-items"></div>
|
|
<div class="cart-footer">
|
|
<div class="cart-total">
|
|
<span>Total:</span>
|
|
<span class="cart-total-amount">$0.00</span>
|
|
</div>
|
|
<a href="/checkout" class="btn btn-primary cart-checkout-btn"
|
|
>Checkout</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wishlist Drawer -->
|
|
<div class="wishlist-overlay"></div>
|
|
<div class="wishlist-drawer">
|
|
<div class="wishlist-header">
|
|
<h3><i class="bi bi-heart"></i> My Wishlist</h3>
|
|
<button class="wishlist-close"><i class="bi bi-x"></i></button>
|
|
</div>
|
|
<div class="wishlist-items"></div>
|
|
<div class="wishlist-footer">
|
|
<a href="/shop" class="btn btn-outline">Continue Shopping</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/assets/js/mobile-touch-fix.js"></script>
|
|
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
|
|
<script src="/assets/js/customer-auth.js"></script>
|
|
<script>
|
|
let allProducts = [];
|
|
let filteredProducts = [];
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
// Load all products
|
|
allProducts = await API.loadAllProducts();
|
|
filteredProducts = [...allProducts];
|
|
|
|
// Load categories
|
|
const categories = await API.loadCategories();
|
|
const categoryFilters = document.getElementById("filterOptions1");
|
|
const mobileCategorySelect = document.getElementById("categoryFilter");
|
|
|
|
if (categories.length > 0) {
|
|
// Populate desktop checkboxes
|
|
if (categoryFilters) {
|
|
categories.forEach((cat) => {
|
|
const label = document.createElement("label");
|
|
label.className = "filter-option";
|
|
label.innerHTML = `
|
|
<input type="checkbox" name="category" value="${cat}">
|
|
<span>${cat}</span>
|
|
`;
|
|
categoryFilters.appendChild(label);
|
|
});
|
|
}
|
|
|
|
// Populate mobile dropdown
|
|
if (mobileCategorySelect) {
|
|
categories.forEach((cat) => {
|
|
const option = document.createElement("option");
|
|
option.value = cat;
|
|
option.textContent = cat;
|
|
mobileCategorySelect.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Render products
|
|
renderProducts();
|
|
|
|
// Setup filters
|
|
setupFilters();
|
|
|
|
// Initialize collapsible filters AFTER everything is loaded
|
|
setTimeout(initCollapsibleFilters, 200);
|
|
|
|
// Setup product card click to navigate to product page
|
|
document.addEventListener("click", (e) => {
|
|
const card = e.target.closest(".product-card");
|
|
// Don't navigate if clicking add to cart or wishlist buttons
|
|
if (
|
|
card &&
|
|
!e.target.closest(".add-to-cart-btn") &&
|
|
!e.target.closest(".wishlist-btn") &&
|
|
!e.target.closest(".quick-view-btn")
|
|
) {
|
|
e.preventDefault();
|
|
// Use slug from data attribute, fallback to product lookup
|
|
const slug = card.dataset.productSlug;
|
|
if (slug) {
|
|
window.location.href = `/product/${slug}`;
|
|
} else {
|
|
const productId = card.dataset.productId;
|
|
const product = allProducts.find(
|
|
(p) => p.id === productId || p.id === parseInt(productId),
|
|
);
|
|
if (product) {
|
|
window.location.href = `/product/${product.slug || product.id}`;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function renderProducts() {
|
|
const grid = document.getElementById("productsGrid");
|
|
const countEl = document.getElementById("productCount");
|
|
|
|
if (filteredProducts.length === 0) {
|
|
grid.innerHTML =
|
|
'<p class="text-center" style="grid-column: 1/-1; padding: 40px;">No products found matching your criteria.</p>';
|
|
countEl.textContent = "0 products";
|
|
return;
|
|
}
|
|
|
|
ProductRenderer.renderProducts(grid, filteredProducts);
|
|
countEl.textContent = `${filteredProducts.length} product${
|
|
filteredProducts.length !== 1 ? "s" : ""
|
|
}`;
|
|
}
|
|
|
|
function setupFilters() {
|
|
// Search
|
|
const searchInput = document.getElementById("searchInput");
|
|
let searchTimeout;
|
|
searchInput.addEventListener("input", () => {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(applyFilters, 300);
|
|
});
|
|
|
|
// Category checkboxes (desktop)
|
|
document.querySelectorAll('input[name="category"]').forEach((cb) => {
|
|
cb.addEventListener("change", applyFilters);
|
|
});
|
|
|
|
// Price checkboxes (desktop)
|
|
document.querySelectorAll('input[name="price"]').forEach((cb) => {
|
|
cb.addEventListener("change", applyFilters);
|
|
});
|
|
|
|
// Stock checkboxes (desktop)
|
|
document.querySelectorAll('input[name="stock"]').forEach((cb) => {
|
|
cb.addEventListener("change", applyFilters);
|
|
});
|
|
|
|
// Mobile filter dropdowns
|
|
const categoryFilter = document.getElementById("categoryFilter");
|
|
const priceFilter = document.getElementById("priceFilter");
|
|
const stockFilter = document.getElementById("stockFilter");
|
|
|
|
if (categoryFilter) {
|
|
categoryFilter.addEventListener("change", applyFilters);
|
|
}
|
|
if (priceFilter) {
|
|
priceFilter.addEventListener("change", applyFilters);
|
|
}
|
|
if (stockFilter) {
|
|
stockFilter.addEventListener("change", applyFilters);
|
|
}
|
|
|
|
// Sort
|
|
document
|
|
.getElementById("sortSelect")
|
|
.addEventListener("change", applyFilters);
|
|
}
|
|
|
|
function applyFilters() {
|
|
const searchTerm = document
|
|
.getElementById("searchInput")
|
|
.value.toLowerCase();
|
|
|
|
// Get desktop checkbox values
|
|
let selectedCategories = Array.from(
|
|
document.querySelectorAll('input[name="category"]:checked'),
|
|
).map((cb) => cb.value);
|
|
let selectedPrices = Array.from(
|
|
document.querySelectorAll('input[name="price"]:checked'),
|
|
).map((cb) => cb.value);
|
|
let stockFilters = Array.from(
|
|
document.querySelectorAll('input[name="stock"]:checked'),
|
|
).map((cb) => cb.value);
|
|
|
|
// Also check mobile select dropdowns
|
|
const mobileCategoryFilter = document.getElementById("categoryFilter");
|
|
const mobilePriceFilter = document.getElementById("priceFilter");
|
|
const mobileStockFilter = document.getElementById("stockFilter");
|
|
|
|
if (
|
|
mobileCategoryFilter &&
|
|
mobileCategoryFilter.value &&
|
|
mobileCategoryFilter.value !== "all"
|
|
) {
|
|
selectedCategories = [mobileCategoryFilter.value];
|
|
}
|
|
if (mobilePriceFilter && mobilePriceFilter.value) {
|
|
selectedPrices = [mobilePriceFilter.value];
|
|
}
|
|
if (mobileStockFilter && mobileStockFilter.value) {
|
|
stockFilters = [mobileStockFilter.value];
|
|
}
|
|
|
|
const sortBy = document.getElementById("sortSelect").value;
|
|
|
|
filteredProducts = allProducts.filter((product) => {
|
|
// Search filter
|
|
if (
|
|
searchTerm &&
|
|
!product.name.toLowerCase().includes(searchTerm) &&
|
|
!(product.shortdescription || "").toLowerCase().includes(searchTerm)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
// Category filter
|
|
if (
|
|
selectedCategories.length > 0 &&
|
|
!selectedCategories.includes(product.category)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
// Price filter
|
|
if (selectedPrices.length > 0) {
|
|
const price = parseFloat(product.price);
|
|
const priceMatch = selectedPrices.some((range) => {
|
|
if (range === "0-10") return price < 10;
|
|
if (range === "10-25") return price >= 10 && price < 25;
|
|
if (range === "25-50") return price >= 25 && price < 50;
|
|
if (range === "50+") return price >= 50;
|
|
return true;
|
|
});
|
|
if (!priceMatch) return false;
|
|
}
|
|
|
|
// Stock filters
|
|
if (stockFilters.includes("in-stock") && product.stockquantity <= 0)
|
|
return false;
|
|
if (stockFilters.includes("featured") && !product.isfeatured)
|
|
return false;
|
|
|
|
return true;
|
|
});
|
|
|
|
// Sort
|
|
filteredProducts.sort((a, b) => {
|
|
switch (sortBy) {
|
|
case "price-low":
|
|
return parseFloat(a.price) - parseFloat(b.price);
|
|
case "price-high":
|
|
return parseFloat(b.price) - parseFloat(a.price);
|
|
case "name-az":
|
|
return a.name.localeCompare(b.name);
|
|
case "name-za":
|
|
return b.name.localeCompare(a.name);
|
|
default:
|
|
return 0; // newest - already sorted from API
|
|
}
|
|
});
|
|
|
|
renderProducts();
|
|
}
|
|
|
|
// Collapsible Filters for Mobile/Tablet - SIMPLE VERSION
|
|
function initCollapsibleFilters() {
|
|
if (window.innerWidth > 992) return; // Only for mobile/tablet
|
|
|
|
const filterCards = document.querySelectorAll(".filter-card");
|
|
|
|
filterCards.forEach((card, index) => {
|
|
if (index === 0) return; // Skip search
|
|
|
|
const title = card.querySelector(".filter-title");
|
|
const options = card.querySelector(".filter-options");
|
|
|
|
if (!title || !options) return;
|
|
|
|
// Initially hide all dropdowns
|
|
options.style.display = "none";
|
|
options.style.position = "absolute";
|
|
options.style.top = "100%";
|
|
options.style.left = "0";
|
|
options.style.zIndex = "9999";
|
|
options.style.minWidth = "200px";
|
|
options.style.padding = "12px";
|
|
options.style.marginTop = "6px";
|
|
options.style.background = "#fff";
|
|
options.style.border = "1px solid #ddd";
|
|
options.style.borderRadius = "12px";
|
|
options.style.boxShadow = "0 8px 24px rgba(0,0,0,0.2)";
|
|
|
|
// Click handler
|
|
const handleClick = function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// Check current state
|
|
const isHidden = options.style.display === "none";
|
|
|
|
// Close all other dropdowns first
|
|
filterCards.forEach((c, i) => {
|
|
if (i > 0 && c !== card) {
|
|
const opts = c.querySelector(".filter-options");
|
|
if (opts) opts.style.display = "none";
|
|
}
|
|
});
|
|
|
|
// Toggle this dropdown
|
|
if (isHidden) {
|
|
options.style.display = "block";
|
|
} else {
|
|
options.style.display = "none";
|
|
}
|
|
};
|
|
|
|
// Attach click event
|
|
title.onclick = handleClick;
|
|
});
|
|
|
|
// Close when clicking outside
|
|
document.onclick = function (e) {
|
|
if (!e.target.closest(".filter-card")) {
|
|
filterCards.forEach((card, index) => {
|
|
if (index > 0) {
|
|
const opts = card.querySelector(".filter-options");
|
|
if (opts) opts.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
// Run after page loads
|
|
window.onload = function () {
|
|
setTimeout(initCollapsibleFilters, 500);
|
|
};
|
|
</script>
|
|
<script src="/assets/js/accessibility.js"></script>
|
|
</body>
|
|
</html>
|