From aa53a6321d48da874a679def2a2af861b89df05b Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 19:34:13 +0200 Subject: [PATCH] =?UTF-8?q?Breadcrumbs=20heben=20Haupt-/Unterkategorie=20s?= =?UTF-8?q?t=C3=A4rker=20hervor;=20Unterkategorie-Seiten=20bereit=20f?= =?UTF-8?q?=C3=BCr=20viele=20Produkte=20pro=20Serie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Breadcrumb-Schrift siteweit leicht vergrößert; die aktuelle Ebene (Hauptkategorie auf Kategorie-/Produktseiten, Unterkategorie auf Unterkategorie-Seiten) ist jetzt fett/weiß hervorgehoben statt nur gleichförmig grau — auf allen Kategorie-, Unterkategorie- und Produktseiten in allen 4 Sprachen. - Unterkategorie-Seiten (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin) zeigen jetzt eine "Weitere Modelle"-Überschrift über der Produktreihe unterhalb des featured Produkts — die Seite ist jetzt sichtbar darauf ausgelegt, dass mit der Zeit beliebig viele weitere Varianten pro Serie dazukommen, nicht nur ein einzelnes Vorzeige-Produkt. Verifiziert per Puppeteer-Screenshot inkl. Test mit einem zweiten Produkt in derselben Unterkategorie (danach wieder entfernt) — Layout skaliert sauber. --- src/i18n/ui.ts | 8 ++++---- src/pages/ch/produkt/[slug].astro | 2 +- src/pages/ch/shop/[kategorie].astro | 2 +- src/pages/ch/shop/[kategorie]/[unterkategorie].astro | 3 ++- src/pages/en/produkt/[slug].astro | 2 +- src/pages/en/shop/[kategorie].astro | 2 +- src/pages/en/shop/[kategorie]/[unterkategorie].astro | 3 ++- src/pages/fr/produkt/[slug].astro | 2 +- src/pages/fr/shop/[kategorie].astro | 2 +- src/pages/fr/shop/[kategorie]/[unterkategorie].astro | 3 ++- src/pages/produkt/[slug].astro | 2 +- src/pages/shop/[kategorie].astro | 2 +- src/pages/shop/[kategorie]/[unterkategorie].astro | 3 ++- src/styles/global.css | 11 +++++++++-- 14 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index a7f637c..35bda35 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -41,7 +41,7 @@ export const ui = { sortNew: "Neu", sortBestseller: "Bestseller", sortPriceAsc: "Preis aufsteigend", sortPriceDesc: "Preis absteigend", resultCount: (n: number) => `${n} Produkt${n === 1 ? "" : "e"}`, noResults: "Keine Produkte gefunden – bitte Filter anpassen.", breadcrumbShop: "Shop", categoryEmpty: "In dieser Kategorie sind aktuell noch keine Produkte hinterlegt – schau bald wieder vorbei.", - categoryLabel: "Kategorie", productSingular: "Produkt", productPlural: "Produkte", sortLabel: "Sortierung", subcategoriesLabel: "Unterkategorien", subcategoryEmpty: "Für diesen Bereich stellt VanVan bald die ersten Produkte ein – schau bald wieder vorbei.", moreAbout: "Mehr über", + categoryLabel: "Kategorie", productSingular: "Produkt", productPlural: "Produkte", sortLabel: "Sortierung", subcategoriesLabel: "Unterkategorien", subcategoryEmpty: "Für diesen Bereich stellt VanVan bald die ersten Produkte ein – schau bald wieder vorbei.", moreAbout: "Mehr über", moreVariants: "Weitere Modelle", }, sale: { eyebrow: "% Sale", title: "Aktuelle Angebote", lead: "Zeitlich begrenzte Rabatte auf ausgewählte handgemachte Stücke.", @@ -222,7 +222,7 @@ export const ui = { sortNew: "New", sortBestseller: "Bestseller", sortPriceAsc: "Price: low to high", sortPriceDesc: "Price: high to low", resultCount: (n: number) => `${n} product${n === 1 ? "" : "s"}`, noResults: "No products found – please adjust your filters.", breadcrumbShop: "Shop", categoryEmpty: "No products in this category yet – check back soon.", - categoryLabel: "Category", productSingular: "product", productPlural: "products", sortLabel: "Sort by", subcategoriesLabel: "Subcategories", subcategoryEmpty: "VanVan will be adding the first products here soon – check back shortly.", moreAbout: "More about", + categoryLabel: "Category", productSingular: "product", productPlural: "products", sortLabel: "Sort by", subcategoriesLabel: "Subcategories", subcategoryEmpty: "VanVan will be adding the first products here soon – check back shortly.", moreAbout: "More about", moreVariants: "More designs", }, sale: { eyebrow: "% Sale", title: "Current offers", lead: "Time-limited discounts on selected handmade pieces.", @@ -403,7 +403,7 @@ export const ui = { sortNew: "Neu", sortBestseller: "Bestseller", sortPriceAsc: "Pris ufsteigend", sortPriceDesc: "Pris absteigend", resultCount: (n: number) => `${n} Produkt`, noResults: "Kei Produkt gfunde – bitte Filter apasse.", breadcrumbShop: "Shop", categoryEmpty: "In däre Kategorie sind grad no kei Produkt hinterlegt – lueg spöter nomal verbi.", - categoryLabel: "Kategorie", productSingular: "Produkt", productPlural: "Produkt", sortLabel: "Sortiere", subcategoriesLabel: "Unterkategorie", subcategoryEmpty: "Für das da stellt VanVan bald die erschte Produkt i – lueg bald wieder verbi.", moreAbout: "Meh über", + categoryLabel: "Kategorie", productSingular: "Produkt", productPlural: "Produkt", sortLabel: "Sortiere", subcategoriesLabel: "Unterkategorie", subcategoryEmpty: "Für das da stellt VanVan bald die erschte Produkt i – lueg bald wieder verbi.", moreAbout: "Meh über", moreVariants: "Witeri Modell", }, sale: { eyebrow: "% Aktion", title: "Aktuelli Aktion", lead: "Zytlich begrenzti Rabatt uf uswählti, vo Hang gmachti Sächeli.", @@ -584,7 +584,7 @@ export const ui = { sortNew: "Nouveautés", sortBestseller: "Best-sellers", sortPriceAsc: "Prix croissant", sortPriceDesc: "Prix décroissant", resultCount: (n: number) => `${n} produit${n === 1 ? "" : "s"}`, noResults: "Aucun produit trouvé – veuillez ajuster les filtres.", breadcrumbShop: "Boutique", categoryEmpty: "Aucun produit dans cette catégorie pour le moment – repassez bientôt.", - categoryLabel: "Catégorie", productSingular: "produit", productPlural: "produits", sortLabel: "Trier par", subcategoriesLabel: "Sous-catégories", subcategoryEmpty: "VanVan ajoutera bientôt les premiers produits ici – repassez bientôt.", moreAbout: "En savoir plus sur", + categoryLabel: "Catégorie", productSingular: "produit", productPlural: "produits", sortLabel: "Trier par", subcategoriesLabel: "Sous-catégories", subcategoryEmpty: "VanVan ajoutera bientôt les premiers produits ici – repassez bientôt.", moreAbout: "En savoir plus sur", moreVariants: "Autres modèles", }, sale: { eyebrow: "% Soldes", title: "Offres actuelles", lead: "Réductions limitées dans le temps sur une sélection de pièces faites main.", diff --git a/src/pages/ch/produkt/[slug].astro b/src/pages/ch/produkt/[slug].astro index 227b10b..13380bc 100644 --- a/src/pages/ch/produkt/[slug].astro +++ b/src/pages/ch/produkt/[slug].astro @@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [

- {t.shop.breadcrumbShop} / {category?.name[lang]} / {name} + {t.shop.breadcrumbShop} / {category?.name[lang]} / {name}

diff --git a/src/pages/ch/shop/[kategorie].astro b/src/pages/ch/shop/[kategorie].astro index 4d705cd..ac12555 100644 --- a/src/pages/ch/shop/[kategorie].astro +++ b/src/pages/ch/shop/[kategorie].astro @@ -18,7 +18,7 @@ const items = productsByCategory(category.slug); ---
-

{t.shop.breadcrumbShop} / {category.name[lang]}

+

{t.shop.breadcrumbShop} / {category.name[lang]}

diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro index 1335a41..47709d4 100644 --- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro @@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);

- {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]} + {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]}

@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1); {weitere.length > 0 && (
+

{t.shop.moreVariants}

{weitere.map((p) => )}
diff --git a/src/pages/en/produkt/[slug].astro b/src/pages/en/produkt/[slug].astro index 44bb918..313c2d3 100644 --- a/src/pages/en/produkt/[slug].astro +++ b/src/pages/en/produkt/[slug].astro @@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [

- {t.shop.breadcrumbShop} / {category?.name[lang]} / {name} + {t.shop.breadcrumbShop} / {category?.name[lang]} / {name}

diff --git a/src/pages/en/shop/[kategorie].astro b/src/pages/en/shop/[kategorie].astro index 2c93d2d..2cd741c 100644 --- a/src/pages/en/shop/[kategorie].astro +++ b/src/pages/en/shop/[kategorie].astro @@ -18,7 +18,7 @@ const items = productsByCategory(category.slug); ---
-

{t.shop.breadcrumbShop} / {category.name[lang]}

+

{t.shop.breadcrumbShop} / {category.name[lang]}

diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro index 6e288b2..7609965 100644 --- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/en/shop/[kategorie]/[unterkategorie].astro @@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);

- {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]} + {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]}

@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1); {weitere.length > 0 && (
+

{t.shop.moreVariants}

{weitere.map((p) => )}
diff --git a/src/pages/fr/produkt/[slug].astro b/src/pages/fr/produkt/[slug].astro index 0d1503d..c0b3d13 100644 --- a/src/pages/fr/produkt/[slug].astro +++ b/src/pages/fr/produkt/[slug].astro @@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [

- {t.shop.breadcrumbShop} / {category?.name[lang]} / {name} + {t.shop.breadcrumbShop} / {category?.name[lang]} / {name}

diff --git a/src/pages/fr/shop/[kategorie].astro b/src/pages/fr/shop/[kategorie].astro index f3a1fcb..3aed614 100644 --- a/src/pages/fr/shop/[kategorie].astro +++ b/src/pages/fr/shop/[kategorie].astro @@ -18,7 +18,7 @@ const items = productsByCategory(category.slug); ---
-

{t.shop.breadcrumbShop} / {category.name[lang]}

+

{t.shop.breadcrumbShop} / {category.name[lang]}

diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro index 8cbcec6..57c353f 100644 --- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro @@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);

- {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]} + {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]}

@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1); {weitere.length > 0 && (
+

{t.shop.moreVariants}

{weitere.map((p) => )}
diff --git a/src/pages/produkt/[slug].astro b/src/pages/produkt/[slug].astro index 7284986..4c61803 100644 --- a/src/pages/produkt/[slug].astro +++ b/src/pages/produkt/[slug].astro @@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [

- {t.shop.breadcrumbShop} / {category?.name[lang]} / {name} + {t.shop.breadcrumbShop} / {category?.name[lang]} / {name}

diff --git a/src/pages/shop/[kategorie].astro b/src/pages/shop/[kategorie].astro index fe0b10e..b2ae1a5 100644 --- a/src/pages/shop/[kategorie].astro +++ b/src/pages/shop/[kategorie].astro @@ -18,7 +18,7 @@ const items = productsByCategory(category.slug); ---
-

{t.shop.breadcrumbShop} / {category.name[lang]}

+

{t.shop.breadcrumbShop} / {category.name[lang]}

diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro index 4d7c5a8..e0b754d 100644 --- a/src/pages/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/shop/[kategorie]/[unterkategorie].astro @@ -28,7 +28,7 @@ const weitere = echtProdukte.slice(1);

- {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]} + {t.shop.breadcrumbShop} / {category.name[lang]} / {sub.name[lang]}

@@ -83,6 +83,7 @@ const weitere = echtProdukte.slice(1); {weitere.length > 0 && (
+

{t.shop.moreVariants}

{weitere.map((p) => )}
diff --git a/src/styles/global.css b/src/styles/global.css index cf43c13..d25e0af 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -731,8 +731,15 @@ a:focus-visible, button:focus-visible { } .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; } -.breadcrumb a { color: var(--c-accent); } +.breadcrumb { margin-bottom: 0.6rem; font-size: 0.95rem; } +.breadcrumb a { color: var(--c-accent); font-weight: 600; } +.breadcrumb a:hover { text-decoration: underline; } +/* Aktuelle Ebene (Haupt-/Unterkategorie, Produktname) hebt sich etwas vom "Shop"-Wurzel-Link ab. */ +.breadcrumb strong { color: var(--c-text); font-weight: 700; } + +/* Überschrift über der "weitere Produkte"-Reihe auf Unterkategorie-Seiten — macht klar, dass da + noch mehr Produkte derselben Reihe kommen (Charakter-Familie), egal wie viele es am Ende sind. */ +.more-variants-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: 0.8rem; } @media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } } /* Produktseite — großes Bild bekommt denselben edlen "Rahmen"-Look wie die Porträtfotos der