Unterkategorien-Chips zeigen wieder den Charakternamen (z.B. Hase „HasiDog")

Seit der Umstellung auf "eine Seite pro Tier-Familie" hießen die Chips
nur noch generisch (Kuh, Hase, Wal, ...). Jetzt zeigen sie zusätzlich
den ersten/bekanntesten Charakter der Serie in Anführungszeichen — z.B.
"Hase „HasiDog"" — behalten dabei aber die neue Datenstruktur
(Subcategory.characters) bei, damit Familien mit mehreren Charakteren
(wie Hase: HasiDog, HasiGott, Mama Hase) technisch weiterhin
funktionieren.

Neue Helper-Funktion subcategoryChipLabel() in categories.ts, pro
Sprache mit den richtigen Anführungszeichen (DE/CH „...", EN "...",
FR « ... »).

Verifiziert per Puppeteer: alle 6 Chips zeigen exakt die gewünschten
Labels.
This commit is contained in:
qcigano
2026-08-02 20:49:26 +02:00
parent ee4ec0053e
commit dc1d7a41ff
5 changed files with 25 additions and 8 deletions
+17
View File
@@ -55,3 +55,20 @@ export function getCategory(slug: string): Category | undefined {
export function getSubcategory(categorySlug: string, subSlug: string): Subcategory | undefined {
return getCategory(categorySlug)?.subcategories?.find((s) => s.slug === subSlug);
}
const ZITATZEICHEN: Record<Locale, [string, string]> = {
de: ["„", "”"],
en: ['"', '"'],
ch: ["„", "”"],
fr: ["« ", " »"],
};
// Freundliches Kurz-Label für die Unterkategorien-Chips (z.B. "Hase „HasiDog"") — nennt neben
// dem Familiennamen den ersten/bekanntesten Charakter der Serie, auch wenn die Seite selbst
// inzwischen mehrere Charaktere zeigen kann (siehe Subcategory.characters).
export function subcategoryChipLabel(sub: Subcategory, lang: Locale): string {
const erster = sub.characters?.[0];
if (!erster) return sub.name[lang];
const [auf, zu] = ZITATZEICHEN[lang];
return `${sub.name[lang]} ${auf}${erster.name[lang]}${zu}`;
}
+2 -2
View File
@@ -1,7 +1,7 @@
---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import { categories, getCategory } from "../../../data/categories";
import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
import { productsByCategory } from "../../../data/products";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
<a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
))}
</div>
</>
+2 -2
View File
@@ -1,7 +1,7 @@
---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import { categories, getCategory } from "../../../data/categories";
import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
import { productsByCategory } from "../../../data/products";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
<a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
))}
</div>
</>
+2 -2
View File
@@ -1,7 +1,7 @@
---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import { categories, getCategory } from "../../../data/categories";
import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
import { productsByCategory } from "../../../data/products";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
<a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
))}
</div>
</>
+2 -2
View File
@@ -1,7 +1,7 @@
---
import Layout from "../../layouts/Layout.astro";
import ProductCard from "../../components/ProductCard.astro";
import { categories, getCategory } from "../../data/categories";
import { categories, getCategory, subcategoryChipLabel } from "../../data/categories";
import { productsByCategory } from "../../data/products";
import type { Locale } from "../../i18n/config";
import { useTranslations } from "../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
<a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
))}
</div>
</>