From dc1d7a41ff17c7ecfb4f267684ebff5399e0a483 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 20:49:26 +0200
Subject: [PATCH] =?UTF-8?q?Unterkategorien-Chips=20zeigen=20wieder=20den?=
 =?UTF-8?q?=20Charakternamen=20(z.B.=20Hase=20=E2=80=9EHasiDog")?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/data/categories.ts              | 17 +++++++++++++++++
 src/pages/ch/shop/[kategorie].astro |  4 ++--
 src/pages/en/shop/[kategorie].astro |  4 ++--
 src/pages/fr/shop/[kategorie].astro |  4 ++--
 src/pages/shop/[kategorie].astro    |  4 ++--
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/data/categories.ts b/src/data/categories.ts
index 31d4765..1775f7e 100644
--- a/src/data/categories.ts
+++ b/src/data/categories.ts
@@ -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}`;
+}
diff --git a/src/pages/ch/shop/[kategorie].astro b/src/pages/ch/shop/[kategorie].astro
index f866d03..5071def 100644
--- a/src/pages/ch/shop/[kategorie].astro
+++ b/src/pages/ch/shop/[kategorie].astro
@@ -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>
         </>
diff --git a/src/pages/en/shop/[kategorie].astro b/src/pages/en/shop/[kategorie].astro
index f91a007..dd3e6d0 100644
--- a/src/pages/en/shop/[kategorie].astro
+++ b/src/pages/en/shop/[kategorie].astro
@@ -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>
         </>
diff --git a/src/pages/fr/shop/[kategorie].astro b/src/pages/fr/shop/[kategorie].astro
index 3484b64..e5113e1 100644
--- a/src/pages/fr/shop/[kategorie].astro
+++ b/src/pages/fr/shop/[kategorie].astro
@@ -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>
         </>
diff --git a/src/pages/shop/[kategorie].astro b/src/pages/shop/[kategorie].astro
index 0fac754..9285236 100644
--- a/src/pages/shop/[kategorie].astro
+++ b/src/pages/shop/[kategorie].astro
@@ -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>
         </>