webupdate
This commit is contained in:
Local Server
@@ -5,6 +5,7 @@
|
||||
<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" />
|
||||
@@ -21,14 +22,163 @@
|
||||
/>
|
||||
|
||||
<!-- Modern Theme CSS -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/assets/css/modern-theme.css?v=20260118drawer"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/assets/css/mobile-fixes.css?v=20260119touch"
|
||||
/>
|
||||
<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 -->
|
||||
@@ -82,9 +232,7 @@
|
||||
Explore our complete collection of stationery and crafting supplies
|
||||
</p>
|
||||
<div class="breadcrumb">
|
||||
<a href="/home">Home</a>
|
||||
<span>/</span>
|
||||
<span>Shop</span>
|
||||
<a href="/home">Home</a> <span>/</span> <span>Shop</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,8 +244,7 @@
|
||||
<!-- Sidebar Filters -->
|
||||
<aside class="shop-sidebar">
|
||||
<!-- Search -->
|
||||
<div class="filter-card">
|
||||
<h3 class="filter-title">Search</h3>
|
||||
<div class="filter-card" id="searchCard">
|
||||
<div class="search-box" style="position: relative">
|
||||
<input
|
||||
type="text"
|
||||
@@ -106,8 +253,8 @@
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 12px 40px 12px 16px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
"
|
||||
/>
|
||||
@@ -118,59 +265,139 @@
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-light);
|
||||
color: #888;
|
||||
"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="filter-card">
|
||||
<h3 class="filter-title">Categories</h3>
|
||||
<div class="filter-options" id="categoryFilters">
|
||||
<label class="filter-option">
|
||||
<input type="checkbox" value="all" checked />
|
||||
<span>All Products</span>
|
||||
</label>
|
||||
<!-- Categories loaded via JavaScript -->
|
||||
</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>
|
||||
|
||||
<!-- Price Range -->
|
||||
<div class="filter-card">
|
||||
<h3 class="filter-title">Price Range</h3>
|
||||
<div class="filter-options">
|
||||
<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>
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- Availability -->
|
||||
<div class="filter-card">
|
||||
<h3 class="filter-title">Availability</h3>
|
||||
<div class="filter-options">
|
||||
<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>
|
||||
<!-- 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>
|
||||
@@ -221,15 +448,63 @@
|
||||
collaging stationery. Quality products for all your creative
|
||||
needs.
|
||||
</p>
|
||||
<div class="footer-social">
|
||||
<a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
|
||||
<a href="#" class="social-link"
|
||||
<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"
|
||||
<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"><i class="bi bi-youtube"></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>
|
||||
|
||||
@@ -258,9 +533,9 @@
|
||||
<div class="footer-column">
|
||||
<h4>Contact Us</h4>
|
||||
<ul class="footer-links">
|
||||
<li><i class="bi bi-envelope"></i> hello@skyartshop.com</li>
|
||||
<li><i class="bi bi-telephone"></i> (555) 123-4567</li>
|
||||
<li><i class="bi bi-geo-alt"></i> 123 Creative Lane</li>
|
||||
<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>
|
||||
@@ -310,7 +585,7 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/mobile-touch-fix.js"></script>
|
||||
<script src="/assets/js/modern-theme.js?v=20260119touch"></script>
|
||||
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
|
||||
<script src="/assets/js/customer-auth.js"></script>
|
||||
<script>
|
||||
let allProducts = [];
|
||||
@@ -323,17 +598,32 @@
|
||||
|
||||
// Load categories
|
||||
const categories = await API.loadCategories();
|
||||
const categoryFilters = document.getElementById("categoryFilters");
|
||||
if (categoryFilters && categories.length > 0) {
|
||||
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);
|
||||
});
|
||||
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
|
||||
@@ -342,6 +632,9 @@
|
||||
// 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");
|
||||
@@ -396,21 +689,36 @@
|
||||
searchTimeout = setTimeout(applyFilters, 300);
|
||||
});
|
||||
|
||||
// Category checkboxes
|
||||
// Category checkboxes (desktop)
|
||||
document.querySelectorAll('input[name="category"]').forEach((cb) => {
|
||||
cb.addEventListener("change", applyFilters);
|
||||
});
|
||||
|
||||
// Price checkboxes
|
||||
// Price checkboxes (desktop)
|
||||
document.querySelectorAll('input[name="price"]').forEach((cb) => {
|
||||
cb.addEventListener("change", applyFilters);
|
||||
});
|
||||
|
||||
// Stock checkboxes
|
||||
// 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")
|
||||
@@ -421,15 +729,37 @@
|
||||
const searchTerm = document
|
||||
.getElementById("searchInput")
|
||||
.value.toLowerCase();
|
||||
const selectedCategories = Array.from(
|
||||
|
||||
// Get desktop checkbox values
|
||||
let selectedCategories = Array.from(
|
||||
document.querySelectorAll('input[name="category"]:checked'),
|
||||
).map((cb) => cb.value);
|
||||
const selectedPrices = Array.from(
|
||||
let selectedPrices = Array.from(
|
||||
document.querySelectorAll('input[name="price"]:checked'),
|
||||
).map((cb) => cb.value);
|
||||
const stockFilters = Array.from(
|
||||
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) => {
|
||||
@@ -491,65 +821,79 @@
|
||||
renderProducts();
|
||||
}
|
||||
|
||||
// Collapsible Filters for Mobile/Tablet
|
||||
// Collapsible Filters for Mobile/Tablet - SIMPLE VERSION
|
||||
function initCollapsibleFilters() {
|
||||
const isMobile = window.innerWidth <= 992;
|
||||
if (window.innerWidth > 992) return; // Only for mobile/tablet
|
||||
|
||||
const filterCards = document.querySelectorAll(".filter-card");
|
||||
|
||||
filterCards.forEach((card, index) => {
|
||||
// Skip the search filter (first one)
|
||||
if (index === 0) return;
|
||||
if (index === 0) return; // Skip search
|
||||
|
||||
const title = card.querySelector(".filter-title");
|
||||
if (!title) return;
|
||||
const options = card.querySelector(".filter-options");
|
||||
|
||||
// Start collapsed on mobile (except search)
|
||||
if (isMobile) {
|
||||
card.classList.add("collapsed");
|
||||
}
|
||||
if (!title || !options) return;
|
||||
|
||||
// Toggle on click
|
||||
title.addEventListener("click", (e) => {
|
||||
// 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();
|
||||
|
||||
// Close other open dropdowns first
|
||||
filterCards.forEach((otherCard, otherIndex) => {
|
||||
if (otherIndex !== 0 && otherCard !== card) {
|
||||
otherCard.classList.add("collapsed");
|
||||
// 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";
|
||||
}
|
||||
});
|
||||
|
||||
card.classList.toggle("collapsed");
|
||||
});
|
||||
// Toggle this dropdown
|
||||
if (isHidden) {
|
||||
options.style.display = "block";
|
||||
} else {
|
||||
options.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
// Attach click event
|
||||
title.onclick = handleClick;
|
||||
});
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (window.innerWidth <= 992 && !e.target.closest(".filter-card")) {
|
||||
// Close when clicking outside
|
||||
document.onclick = function (e) {
|
||||
if (!e.target.closest(".filter-card")) {
|
||||
filterCards.forEach((card, index) => {
|
||||
if (index > 0) {
|
||||
card.classList.add("collapsed");
|
||||
const opts = card.querySelector(".filter-options");
|
||||
if (opts) opts.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle resize
|
||||
window.addEventListener("resize", () => {
|
||||
const nowMobile = window.innerWidth <= 992;
|
||||
filterCards.forEach((card, index) => {
|
||||
if (index === 0) return;
|
||||
if (nowMobile) {
|
||||
card.classList.add("collapsed");
|
||||
} else {
|
||||
card.classList.remove("collapsed");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize collapsible filters when DOM is ready
|
||||
document.addEventListener("DOMContentLoaded", initCollapsibleFilters);
|
||||
// Run after page loads
|
||||
window.onload = function () {
|
||||
setTimeout(initCollapsibleFilters, 500);
|
||||
};
|
||||
</script>
|
||||
<script src="/assets/js/accessibility.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user