Mindestbewertung-Filter: echte Lila-Babyblau-Verlaufsherzen statt System-Emoji
Im Filter "Mindestbewertung" wurden bisher schlichte 🩵-Emojis angezeigt. Grund: das war ein natives <select>, und in der browsereigenen Auswahlliste lassen sich weder Farbverlaeufe noch eigene Grafiken darstellen - der Browser rendert dort nur das System-Emoji in seiner festen hellblauen Farbe. Ersetzt durch dasselbe eigene Dropdown, das schon der Kategorie-Filter nutzt. Dadurch erscheinen jetzt die echten HeartRating-Herzen mit dem Marken-Verlauf von Lila (--c-purple-glow) nach Babyblau (--c-accent) - auch im geschlossenen Knopf, sobald eine Bewertung gewaehlt ist. Der Verlauf bekam zusaetzlich einen weichen Zwischenton, damit er im kleinen Herz-Format nicht hart umschlaegt, sondern wirklich wie eine Mischung beider Farben wirkt. Die Dropdown-Logik ist dabei fuer BEIDE Filter zu einem gemeinsamen Code zusammengefasst worden (statt zweimal fast dasselbe): beide verhalten sich identisch, oeffnen sich gegenseitig zu, schliessen bei Klick daneben und bei Escape - nur noch eine Stelle zum Pflegen. Im Browser funktional geprueft: 5 Optionen, oeffnet/schliesst korrekt, 10 Verlaufsherzen in der Liste, Auswahl setzt den Filterwert und uebernimmt die Herzen in den Knopf, gegenseitiges Schliessen funktioniert. Gilt fuer alle 4 Sprachen. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
0a819b6a4d
commit
d27a858d8f
@@ -28,8 +28,13 @@ const HERZ_PFAD =
|
||||
<span class="heart-rating" role="img" aria-label={`${bewertung.toFixed(1)} von 5 Herzen${anzahlLabel ? `, ${anzahlLabel}` : ""}`}>
|
||||
<svg width="0" height="0" style="position:absolute;" aria-hidden="true">
|
||||
<defs>
|
||||
{/* Lila → Babyblau als echte Mischung beider Marken-Farben: oben links das Violett
|
||||
(--c-purple-glow), unten rechts das Babyblau (--c-accent), dazwischen ein weicher
|
||||
Zwischenton, damit der Verlauf im kleinen Herz-Format nicht hart umschlägt, sondern
|
||||
wirklich wie eine Mischung wirkt. */}
|
||||
<linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="var(--c-purple-glow)"></stop>
|
||||
<stop offset="55%" stop-color="#8aa8e6"></stop>
|
||||
<stop offset="100%" stop-color="var(--c-accent)"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import HeartRating from "../../../components/HeartRating.astro";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products, durchschnittsbewertung } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
@@ -26,10 +27,10 @@ const t = useTranslations(lang);
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<div class="cat-filter" id="cat-filter" data-dropdown>
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span data-dropdown-current>{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
@@ -60,14 +61,23 @@ const t = useTranslations(lang);
|
||||
<input id="f-verfuegbar" type="checkbox" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-bewertung">{t.shop.minRatingLabel}</label>
|
||||
<select id="f-bewertung">
|
||||
<option value="0">{t.shop.minRatingAny}</option>
|
||||
<option value="4">🩵🩵🩵🩵 +</option>
|
||||
<option value="3">🩵🩵🩵 +</option>
|
||||
<option value="2">🩵🩵 +</option>
|
||||
<option value="1">🩵 +</option>
|
||||
</select>
|
||||
<span id="f-bewertung-label">{t.shop.minRatingLabel}</span>
|
||||
<div class="cat-filter" id="rating-filter" data-dropdown>
|
||||
<input type="hidden" id="f-bewertung" value="0" />
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-bewertung-label">
|
||||
<span data-dropdown-current>{t.shop.minRatingAny}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-bewertung-label">
|
||||
<button type="button" class="cat-filter-option" data-value="0" data-label={t.shop.minRatingAny} role="option" aria-selected="true">{t.shop.minRatingAny}</button>
|
||||
{[4, 3, 2, 1].map((n) => (
|
||||
<button type="button" class="cat-filter-option rating-option" data-value={String(n)} role="option" aria-selected="false">
|
||||
<HeartRating bewertung={n} size={15} />
|
||||
<span class="rating-plus">+</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">{t.shop.filterNote}</p>
|
||||
</aside>
|
||||
@@ -160,49 +170,70 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[preisRange, verfuegbarChk, bewertungSel, 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"));
|
||||
// Eigene Dropdowns (statt nativer <select>-Felder): Der Browser kann in seiner eigenen
|
||||
// Auswahlliste weder unsere Kategorie-Struktur noch Verlaufs-Farben darstellen — deshalb hier
|
||||
// eine eigene, gestaltbare Liste. Ein gemeinsamer Code für BEIDE Dropdowns (Kategorie und
|
||||
// Mindestbewertung), damit sich beide identisch verhalten und es nur eine Stelle zum Pflegen
|
||||
// gibt. Verhalten wie beim Sprach-Umschalter im Header.
|
||||
const dropdowns = Array.from(document.querySelectorAll("[data-dropdown]")).map((root) => {
|
||||
const btn = root.querySelector("[data-dropdown-btn]");
|
||||
const current = root.querySelector("[data-dropdown-current]");
|
||||
const hidden = root.querySelector("input[type=hidden]");
|
||||
const options = Array.from(root.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)));
|
||||
function select(value) {
|
||||
const opt = options.find((o) => o.dataset.value === value);
|
||||
if (!opt) return;
|
||||
hidden.value = value;
|
||||
// Optionen ohne eigenes data-label (z.B. die Herzen-Zeilen) übernehmen ihren kompletten
|
||||
// Inhalt in den Knopf — so stehen dort dieselben Verlaufs-Herzen wie in der Liste.
|
||||
if (opt.dataset.label !== undefined) current.textContent = opt.dataset.label;
|
||||
else current.innerHTML = opt.innerHTML;
|
||||
options.forEach((o) => o.setAttribute("aria-selected", String(o === opt)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
function close() {
|
||||
root.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
const willOpen = !root.classList.contains("open");
|
||||
// Immer erst alle anderen schließen, damit nie zwei Listen gleichzeitig offen sind.
|
||||
document.querySelectorAll("[data-dropdown].open").forEach((other) => {
|
||||
other.classList.remove("open");
|
||||
other.querySelector("[data-dropdown-btn]").setAttribute("aria-expanded", "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");
|
||||
if (willOpen) {
|
||||
root.classList.add("open");
|
||||
btn.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
});
|
||||
|
||||
options.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
select(opt.dataset.value);
|
||||
close();
|
||||
});
|
||||
});
|
||||
|
||||
return { root, close, select, options };
|
||||
});
|
||||
|
||||
document.addEventListener("click", () => dropdowns.forEach((d) => d.close()));
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") dropdowns.forEach((d) => d.close());
|
||||
});
|
||||
|
||||
// Voreinstellung über die Adresszeile (z.B. /shop/?kategorie=diy-plushies), damit Links aus
|
||||
// der Navigation weiterhin direkt mit gesetztem Filter landen.
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
if (preset) dropdowns.forEach((d) => d.select(preset));
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import HeartRating from "../../../components/HeartRating.astro";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products, durchschnittsbewertung } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
@@ -26,10 +27,10 @@ const t = useTranslations(lang);
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<div class="cat-filter" id="cat-filter" data-dropdown>
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span data-dropdown-current>{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
@@ -60,14 +61,23 @@ const t = useTranslations(lang);
|
||||
<input id="f-verfuegbar" type="checkbox" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-bewertung">{t.shop.minRatingLabel}</label>
|
||||
<select id="f-bewertung">
|
||||
<option value="0">{t.shop.minRatingAny}</option>
|
||||
<option value="4">🩵🩵🩵🩵 +</option>
|
||||
<option value="3">🩵🩵🩵 +</option>
|
||||
<option value="2">🩵🩵 +</option>
|
||||
<option value="1">🩵 +</option>
|
||||
</select>
|
||||
<span id="f-bewertung-label">{t.shop.minRatingLabel}</span>
|
||||
<div class="cat-filter" id="rating-filter" data-dropdown>
|
||||
<input type="hidden" id="f-bewertung" value="0" />
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-bewertung-label">
|
||||
<span data-dropdown-current>{t.shop.minRatingAny}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-bewertung-label">
|
||||
<button type="button" class="cat-filter-option" data-value="0" data-label={t.shop.minRatingAny} role="option" aria-selected="true">{t.shop.minRatingAny}</button>
|
||||
{[4, 3, 2, 1].map((n) => (
|
||||
<button type="button" class="cat-filter-option rating-option" data-value={String(n)} role="option" aria-selected="false">
|
||||
<HeartRating bewertung={n} size={15} />
|
||||
<span class="rating-plus">+</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">{t.shop.filterNote}</p>
|
||||
</aside>
|
||||
@@ -160,49 +170,70 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[preisRange, verfuegbarChk, bewertungSel, 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"));
|
||||
// Eigene Dropdowns (statt nativer <select>-Felder): Der Browser kann in seiner eigenen
|
||||
// Auswahlliste weder unsere Kategorie-Struktur noch Verlaufs-Farben darstellen — deshalb hier
|
||||
// eine eigene, gestaltbare Liste. Ein gemeinsamer Code für BEIDE Dropdowns (Kategorie und
|
||||
// Mindestbewertung), damit sich beide identisch verhalten und es nur eine Stelle zum Pflegen
|
||||
// gibt. Verhalten wie beim Sprach-Umschalter im Header.
|
||||
const dropdowns = Array.from(document.querySelectorAll("[data-dropdown]")).map((root) => {
|
||||
const btn = root.querySelector("[data-dropdown-btn]");
|
||||
const current = root.querySelector("[data-dropdown-current]");
|
||||
const hidden = root.querySelector("input[type=hidden]");
|
||||
const options = Array.from(root.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)));
|
||||
function select(value) {
|
||||
const opt = options.find((o) => o.dataset.value === value);
|
||||
if (!opt) return;
|
||||
hidden.value = value;
|
||||
// Optionen ohne eigenes data-label (z.B. die Herzen-Zeilen) übernehmen ihren kompletten
|
||||
// Inhalt in den Knopf — so stehen dort dieselben Verlaufs-Herzen wie in der Liste.
|
||||
if (opt.dataset.label !== undefined) current.textContent = opt.dataset.label;
|
||||
else current.innerHTML = opt.innerHTML;
|
||||
options.forEach((o) => o.setAttribute("aria-selected", String(o === opt)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
function close() {
|
||||
root.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
const willOpen = !root.classList.contains("open");
|
||||
// Immer erst alle anderen schließen, damit nie zwei Listen gleichzeitig offen sind.
|
||||
document.querySelectorAll("[data-dropdown].open").forEach((other) => {
|
||||
other.classList.remove("open");
|
||||
other.querySelector("[data-dropdown-btn]").setAttribute("aria-expanded", "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");
|
||||
if (willOpen) {
|
||||
root.classList.add("open");
|
||||
btn.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
});
|
||||
|
||||
options.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
select(opt.dataset.value);
|
||||
close();
|
||||
});
|
||||
});
|
||||
|
||||
return { root, close, select, options };
|
||||
});
|
||||
|
||||
document.addEventListener("click", () => dropdowns.forEach((d) => d.close()));
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") dropdowns.forEach((d) => d.close());
|
||||
});
|
||||
|
||||
// Voreinstellung über die Adresszeile (z.B. /shop/?kategorie=diy-plushies), damit Links aus
|
||||
// der Navigation weiterhin direkt mit gesetztem Filter landen.
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
if (preset) dropdowns.forEach((d) => d.select(preset));
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import HeartRating from "../../../components/HeartRating.astro";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products, durchschnittsbewertung } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
@@ -26,10 +27,10 @@ const t = useTranslations(lang);
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<div class="cat-filter" id="cat-filter" data-dropdown>
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span data-dropdown-current>{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
@@ -60,14 +61,23 @@ const t = useTranslations(lang);
|
||||
<input id="f-verfuegbar" type="checkbox" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-bewertung">{t.shop.minRatingLabel}</label>
|
||||
<select id="f-bewertung">
|
||||
<option value="0">{t.shop.minRatingAny}</option>
|
||||
<option value="4">🩵🩵🩵🩵 +</option>
|
||||
<option value="3">🩵🩵🩵 +</option>
|
||||
<option value="2">🩵🩵 +</option>
|
||||
<option value="1">🩵 +</option>
|
||||
</select>
|
||||
<span id="f-bewertung-label">{t.shop.minRatingLabel}</span>
|
||||
<div class="cat-filter" id="rating-filter" data-dropdown>
|
||||
<input type="hidden" id="f-bewertung" value="0" />
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-bewertung-label">
|
||||
<span data-dropdown-current>{t.shop.minRatingAny}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-bewertung-label">
|
||||
<button type="button" class="cat-filter-option" data-value="0" data-label={t.shop.minRatingAny} role="option" aria-selected="true">{t.shop.minRatingAny}</button>
|
||||
{[4, 3, 2, 1].map((n) => (
|
||||
<button type="button" class="cat-filter-option rating-option" data-value={String(n)} role="option" aria-selected="false">
|
||||
<HeartRating bewertung={n} size={15} />
|
||||
<span class="rating-plus">+</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">{t.shop.filterNote}</p>
|
||||
</aside>
|
||||
@@ -160,49 +170,70 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[preisRange, verfuegbarChk, bewertungSel, 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"));
|
||||
// Eigene Dropdowns (statt nativer <select>-Felder): Der Browser kann in seiner eigenen
|
||||
// Auswahlliste weder unsere Kategorie-Struktur noch Verlaufs-Farben darstellen — deshalb hier
|
||||
// eine eigene, gestaltbare Liste. Ein gemeinsamer Code für BEIDE Dropdowns (Kategorie und
|
||||
// Mindestbewertung), damit sich beide identisch verhalten und es nur eine Stelle zum Pflegen
|
||||
// gibt. Verhalten wie beim Sprach-Umschalter im Header.
|
||||
const dropdowns = Array.from(document.querySelectorAll("[data-dropdown]")).map((root) => {
|
||||
const btn = root.querySelector("[data-dropdown-btn]");
|
||||
const current = root.querySelector("[data-dropdown-current]");
|
||||
const hidden = root.querySelector("input[type=hidden]");
|
||||
const options = Array.from(root.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)));
|
||||
function select(value) {
|
||||
const opt = options.find((o) => o.dataset.value === value);
|
||||
if (!opt) return;
|
||||
hidden.value = value;
|
||||
// Optionen ohne eigenes data-label (z.B. die Herzen-Zeilen) übernehmen ihren kompletten
|
||||
// Inhalt in den Knopf — so stehen dort dieselben Verlaufs-Herzen wie in der Liste.
|
||||
if (opt.dataset.label !== undefined) current.textContent = opt.dataset.label;
|
||||
else current.innerHTML = opt.innerHTML;
|
||||
options.forEach((o) => o.setAttribute("aria-selected", String(o === opt)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
function close() {
|
||||
root.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
const willOpen = !root.classList.contains("open");
|
||||
// Immer erst alle anderen schließen, damit nie zwei Listen gleichzeitig offen sind.
|
||||
document.querySelectorAll("[data-dropdown].open").forEach((other) => {
|
||||
other.classList.remove("open");
|
||||
other.querySelector("[data-dropdown-btn]").setAttribute("aria-expanded", "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");
|
||||
if (willOpen) {
|
||||
root.classList.add("open");
|
||||
btn.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
});
|
||||
|
||||
options.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
select(opt.dataset.value);
|
||||
close();
|
||||
});
|
||||
});
|
||||
|
||||
return { root, close, select, options };
|
||||
});
|
||||
|
||||
document.addEventListener("click", () => dropdowns.forEach((d) => d.close()));
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") dropdowns.forEach((d) => d.close());
|
||||
});
|
||||
|
||||
// Voreinstellung über die Adresszeile (z.B. /shop/?kategorie=diy-plushies), damit Links aus
|
||||
// der Navigation weiterhin direkt mit gesetztem Filter landen.
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
if (preset) dropdowns.forEach((d) => d.select(preset));
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
+77
-45
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import ProductCard from "../../components/ProductCard.astro";
|
||||
import HeartRating from "../../components/HeartRating.astro";
|
||||
import { categories, subcategoryChipLabel } from "../../data/categories";
|
||||
import { products, durchschnittsbewertung } from "../../data/products";
|
||||
import type { Locale } from "../../i18n/config";
|
||||
@@ -31,10 +32,10 @@ const t = useTranslations(lang);
|
||||
zwar technisch da, aber in der schmucklosen Browser-eigenen Liste kaum zu erkennen.
|
||||
Hier stehen sie als eigene, klar lesbare Zeilen mit demselben Namen wie auf den
|
||||
Kategorie-Seiten ("Kuh „Frieda"" usw.), damit man sie auf einen Blick sieht. */}
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<div class="cat-filter" id="cat-filter" data-dropdown>
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span data-dropdown-current>{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
@@ -65,14 +66,27 @@ const t = useTranslations(lang);
|
||||
<input id="f-verfuegbar" type="checkbox" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-bewertung">{t.shop.minRatingLabel}</label>
|
||||
<select id="f-bewertung">
|
||||
<option value="0">{t.shop.minRatingAny}</option>
|
||||
<option value="4">🩵🩵🩵🩵 +</option>
|
||||
<option value="3">🩵🩵🩵 +</option>
|
||||
<option value="2">🩵🩵 +</option>
|
||||
<option value="1">🩵 +</option>
|
||||
</select>
|
||||
<span id="f-bewertung-label">{t.shop.minRatingLabel}</span>
|
||||
{/* Eigenes Dropdown statt eines nativen <select>: In der Browser-eigenen Auswahlliste
|
||||
lassen sich keine Farbverläufe darstellen — dort erschien nur das schlichte
|
||||
System-Emoji 🩵. Hier werden dieselben echten Verlaufs-Herzen (lila → babyblau,
|
||||
siehe HeartRating.astro) verwendet wie überall sonst auf der Seite. */}
|
||||
<div class="cat-filter" id="rating-filter" data-dropdown>
|
||||
<input type="hidden" id="f-bewertung" value="0" />
|
||||
<button type="button" class="cat-filter-btn" data-dropdown-btn aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-bewertung-label">
|
||||
<span data-dropdown-current>{t.shop.minRatingAny}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-bewertung-label">
|
||||
<button type="button" class="cat-filter-option" data-value="0" data-label={t.shop.minRatingAny} role="option" aria-selected="true">{t.shop.minRatingAny}</button>
|
||||
{[4, 3, 2, 1].map((n) => (
|
||||
<button type="button" class="cat-filter-option rating-option" data-value={String(n)} role="option" aria-selected="false">
|
||||
<HeartRating bewertung={n} size={15} />
|
||||
<span class="rating-plus">+</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="small">{t.shop.filterNote}</p>
|
||||
</aside>
|
||||
@@ -165,52 +179,70 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[preisRange, verfuegbarChk, bewertungSel, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
// Eigenes Kategorie-Dropdown (statt nativem <select>): Klick auf den Button öffnet/schließt
|
||||
// die Liste, Klick auf eine Zeile setzt den Filter, aktualisiert die Anzeige-Beschriftung und
|
||||
// schließt die Liste wieder — gleiches Verhalten wie der Sprach-Umschalter im Header.
|
||||
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"));
|
||||
// Eigene Dropdowns (statt nativer <select>-Felder): Der Browser kann in seiner eigenen
|
||||
// Auswahlliste weder unsere Kategorie-Struktur noch Verlaufs-Farben darstellen — deshalb hier
|
||||
// eine eigene, gestaltbare Liste. Ein gemeinsamer Code für BEIDE Dropdowns (Kategorie und
|
||||
// Mindestbewertung), damit sich beide identisch verhalten und es nur eine Stelle zum Pflegen
|
||||
// gibt. Verhalten wie beim Sprach-Umschalter im Header.
|
||||
const dropdowns = Array.from(document.querySelectorAll("[data-dropdown]")).map((root) => {
|
||||
const btn = root.querySelector("[data-dropdown-btn]");
|
||||
const current = root.querySelector("[data-dropdown-current]");
|
||||
const hidden = root.querySelector("input[type=hidden]");
|
||||
const options = Array.from(root.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)));
|
||||
function select(value) {
|
||||
const opt = options.find((o) => o.dataset.value === value);
|
||||
if (!opt) return;
|
||||
hidden.value = value;
|
||||
// Optionen ohne eigenes data-label (z.B. die Herzen-Zeilen) übernehmen ihren kompletten
|
||||
// Inhalt in den Knopf — so stehen dort dieselben Verlaufs-Herzen wie in der Liste.
|
||||
if (opt.dataset.label !== undefined) current.textContent = opt.dataset.label;
|
||||
else current.innerHTML = opt.innerHTML;
|
||||
options.forEach((o) => o.setAttribute("aria-selected", String(o === opt)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
function close() {
|
||||
root.classList.remove("open");
|
||||
btn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
const willOpen = !root.classList.contains("open");
|
||||
// Immer erst alle anderen schließen, damit nie zwei Listen gleichzeitig offen sind.
|
||||
document.querySelectorAll("[data-dropdown].open").forEach((other) => {
|
||||
other.classList.remove("open");
|
||||
other.querySelector("[data-dropdown-btn]").setAttribute("aria-expanded", "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");
|
||||
if (willOpen) {
|
||||
root.classList.add("open");
|
||||
btn.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
});
|
||||
|
||||
options.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
select(opt.dataset.value);
|
||||
close();
|
||||
});
|
||||
});
|
||||
|
||||
return { root, close, select, options };
|
||||
});
|
||||
|
||||
document.addEventListener("click", () => dropdowns.forEach((d) => d.close()));
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") dropdowns.forEach((d) => d.close());
|
||||
});
|
||||
|
||||
// Voreinstellung über die Adresszeile (z.B. /shop/?kategorie=diy-plushies), damit Links aus
|
||||
// der Navigation weiterhin direkt mit gesetztem Filter landen.
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
if (preset) dropdowns.forEach((d) => d.select(preset));
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -916,6 +916,11 @@ a:focus-visible, button:focus-visible {
|
||||
.cat-filter-option[aria-selected="true"] { background: color-mix(in srgb, var(--c-accent) 20%, transparent); font-weight: 700; }
|
||||
.cat-filter-option.cat-filter-sub { padding-left: 1.4em; font-size: 0.88rem; opacity: 0.92; }
|
||||
.cat-filter-option.cat-filter-sub::before { content: "— "; opacity: 0.6; }
|
||||
/* Zeilen des Mindestbewertung-Filters: Herzen und das "+" nebeneinander auf einer Linie. */
|
||||
.cat-filter-option.rating-option { display: flex; align-items: center; gap: 0.45em; }
|
||||
.rating-plus { color: var(--c-text-muted); font-weight: 700; }
|
||||
/* Auch im geschlossenen Knopf sollen die Herzen sauber neben dem Pfeil sitzen. */
|
||||
.cat-filter-btn .heart-rating { vertical-align: middle; }
|
||||
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
|
||||
.legal-hint { margin-top: 2rem; }
|
||||
.breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; }
|
||||
|
||||
Reference in New Issue
Block a user