DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Breadcrumbs heben Haupt-/Unterkategorie stärker hervor; Unterkategorie-Seiten bereit für viele Produkte pro Serie

Browse Source 
- 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.
This commit is contained in:
qcigano
2026-08-02 19:34:13 +02:00
parent 3c574ed0c4
commit aa53a6321d
14 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n/ui.ts
+4 -4
View File
@@ -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.",
src/pages/ch/produkt/[slug].astro
+1 -1
View File
@@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [
<section class="section-tight">
<div class="container">
<p class="small breadcrumb">
<a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/ch/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / {name}
<a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/ch/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
</p>
<div class="grid grid-2 product-detail">
src/pages/ch/shop/[kategorie].astro
+1 -1
View File
@@ -18,7 +18,7 @@ const items = productsByCategory(category.slug);
---
<Layout title={category.name[lang]} description={category.description[lang]} lang={lang} path={`/shop/${category.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / {category.name[lang]}</p>
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <strong>{category.name[lang]}</strong></p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
<span class="eyebrow" aria-hidden="true">{category.icon} {t.shop.breadcrumbShop}</span>
src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+2 -1
View File
@@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bi Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;">
<a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/ch/shop/${category.slug}/`}>{category.name[lang]}</a> / {sub.name[lang]}
<a href="/ch/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/ch/shop/${category.slug}/`}>{category.name[lang]}</a> / <strong>{sub.name[lang]}</strong>
</p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1);
{weitere.length > 0 && (
<section class="section-tight">
<div class="container">
<h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>
<div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
</div>
</section>
src/pages/en/produkt/[slug].astro
+1 -1
View File
@@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [
<section class="section-tight">
<div class="container">
<p class="small breadcrumb">
<a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / {name}
<a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
</p>
<div class="grid grid-2 product-detail">
src/pages/en/shop/[kategorie].astro
+1 -1
View File
@@ -18,7 +18,7 @@ const items = productsByCategory(category.slug);
---
<Layout title={category.name[lang]} description={category.description[lang]} lang={lang} path={`/shop/${category.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/en/shop/">{t.shop.breadcrumbShop}</a> / {category.name[lang]}</p>
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <strong>{category.name[lang]}</strong></p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
<span class="eyebrow" aria-hidden="true">{category.icon} {t.shop.breadcrumbShop}</span>
src/pages/en/shop/[kategorie]/[unterkategorie].astro
+2 -1
View File
@@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} at Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;">
<a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/shop/${category.slug}/`}>{category.name[lang]}</a> / {sub.name[lang]}
<a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/shop/${category.slug}/`}>{category.name[lang]}</a> / <strong>{sub.name[lang]}</strong>
</p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1);
{weitere.length > 0 && (
<section class="section-tight">
<div class="container">
<h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>
<div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
</div>
</section>
src/pages/fr/produkt/[slug].astro
+1 -1
View File
@@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [
<section class="section-tight">
<div class="container">
<p class="small breadcrumb">
<a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/fr/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / {name}
<a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/fr/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
</p>
<div class="grid grid-2 product-detail">
src/pages/fr/shop/[kategorie].astro
+1 -1
View File
@@ -18,7 +18,7 @@ const items = productsByCategory(category.slug);
---
<Layout title={category.name[lang]} description={category.description[lang]} lang={lang} path={`/shop/${category.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / {category.name[lang]}</p>
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / <strong>{category.name[lang]}</strong></p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
<span class="eyebrow" aria-hidden="true">{category.icon} {t.shop.breadcrumbShop}</span>
src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+2 -1
View File
@@ -25,7 +25,7 @@ const weitere = echtProdukte.slice(1);
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} chez Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;">
<a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/fr/shop/${category.slug}/`}>{category.name[lang]}</a> / {sub.name[lang]}
<a href="/fr/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/fr/shop/${category.slug}/`}>{category.name[lang]}</a> / <strong>{sub.name[lang]}</strong>
</p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
@@ -80,6 +80,7 @@ const weitere = echtProdukte.slice(1);
{weitere.length > 0 && (
<section class="section-tight">
<div class="container">
<h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>
<div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
</div>
</section>
src/pages/produkt/[slug].astro
+1 -1
View File
@@ -42,7 +42,7 @@ const felder: [string, string | undefined][] = [
<section class="section-tight">
<div class="container">
<p class="small breadcrumb">
<a href="/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / {name}
<a href="/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
</p>
<div class="grid grid-2 product-detail">
src/pages/shop/[kategorie].astro
+1 -1
View File
@@ -18,7 +18,7 @@ const items = productsByCategory(category.slug);
---
<Layout title={category.name[lang]} description={category.description[lang]} lang={lang} path={`/shop/${category.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/shop/">{t.shop.breadcrumbShop}</a> / {category.name[lang]}</p>
<p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/shop/">{t.shop.breadcrumbShop}</a> / <strong>{category.name[lang]}</strong></p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
<span class="eyebrow" aria-hidden="true">{category.icon} {t.shop.breadcrumbShop}</span>
src/pages/shop/[kategorie]/[unterkategorie].astro
+2 -1
View File
@@ -28,7 +28,7 @@ const weitere = echtProdukte.slice(1);
<Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bei Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
<div class="container">
<p class="small breadcrumb" style="margin-top:1.5rem;">
<a href="/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/shop/${category.slug}/`}>{category.name[lang]}</a> / {sub.name[lang]}
<a href="/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/shop/${category.slug}/`}>{category.name[lang]}</a> / <strong>{sub.name[lang]}</strong>
</p>
<section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
<div class="page-banner-content">
@@ -83,6 +83,7 @@ const weitere = echtProdukte.slice(1);
{weitere.length > 0 && (
<section class="section-tight">
<div class="container">
<h2 class="text-center small more-variants-label">{t.shop.moreVariants}</h2>
<div class="grid grid-3">{weitere.map((p) => <ProductCard product={p} lang={lang} />)}</div>
</div>
</section>
src/styles/global.css
+9 -2
View File
@@ -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