From 22c475d6a53920897c4b8555b3285381fed6a332 Mon Sep 17 00:00:00 2001 From: qcigano Date: Mon, 3 Aug 2026 02:49:10 +0200 Subject: [PATCH] Shop-Filter: Tier-Unterkategorien im Kategorie-Dropdown jetzt klar sichtbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der native - - {categories.map((c) => ( - c.subcategories && c.subcategories.length > 0 ? ( - - - {c.subcategories.map((s) => )} - - ) : ( - - ) - ))} - + {t.shop.categoryLabel} +
+ + +
+ + {categories.map((c) => ( + c.subcategories && c.subcategories.length > 0 ? ( +
+ + + {c.subcategories.map((s) => ( + + ))} +
+ ) : ( + + ) + ))} +
+
@@ -134,11 +144,49 @@ const t = useTranslations(lang); sorted.forEach((el) => grid.appendChild(el)); } - [kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply)); + [preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply)); + + const catFilter = document.getElementById("cat-filter"); + const catFilterBtn = document.getElementById("cat-filter-btn"); + const catFilterCurrent = document.getElementById("cat-filter-current"); + const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option")); + + function selectKategorie(value, label) { + kategorieSel.value = value; + catFilterCurrent.textContent = label; + catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value))); + apply(); + } + + catFilterBtn.addEventListener("click", (e) => { + e.stopPropagation(); + const open = catFilter.classList.toggle("open"); + catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false"); + }); + catFilterOptions.forEach((opt) => { + opt.addEventListener("click", () => { + selectKategorie(opt.dataset.value, opt.dataset.label); + catFilter.classList.remove("open"); + catFilterBtn.setAttribute("aria-expanded", "false"); + }); + }); + document.addEventListener("click", () => { + catFilter.classList.remove("open"); + catFilterBtn.setAttribute("aria-expanded", "false"); + }); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + catFilter.classList.remove("open"); + catFilterBtn.setAttribute("aria-expanded", "false"); + } + }); const params = new URLSearchParams(location.search); const preset = params.get("kategorie"); - if (preset) kategorieSel.value = preset; + if (preset) { + const match = catFilterOptions.find((opt) => opt.dataset.value === preset); + if (match) selectKategorie(preset, match.dataset.label); + } apply(); diff --git a/src/pages/en/shop/index.astro b/src/pages/en/shop/index.astro index 5715c47..c8a4db3 100644 --- a/src/pages/en/shop/index.astro +++ b/src/pages/en/shop/index.astro @@ -1,7 +1,7 @@ --- import Layout from "../../../layouts/Layout.astro"; import ProductCard from "../../../components/ProductCard.astro"; -import { categories } from "../../../data/categories"; +import { categories, subcategoryChipLabel } from "../../../data/categories"; import { products } from "../../../data/products"; import type { Locale } from "../../../i18n/config"; import { useTranslations } from "../../../i18n/ui"; @@ -25,20 +25,30 @@ const t = useTranslations(lang);