DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 4 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/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>