Artikel-Anzahl jetzt auf wirklich jeder Produktlisten-Seite sichtbar (Kategorie/Unterkategorie/Sale)

Bisher zeigte nur /shop/ (die Hauptübersicht) an, wie viele Produkte gerade zu sehen sind. Auf ausdrücklichen Wunsch jetzt auch auf: Kategorie-Seiten, Unterkategorie-Seiten (Gesamtzahl aus Charakter-Karten + "weitere Modelle", ohne reine Platzhalterkarten) und der Sale-Seite — jeweils in allen 4 Sprachen. Server-seitig fest berechnet (kein Filter-JS wie im Haupt-Shop nötig, da diese Seiten keine Live-Filterung haben), gleiche Optik/Wortlaut wie im Shop-Filter (t.shop.resultCount), neue gemeinsame CSS-Klasse .result-count-static für den Abstand vor dem Grid. Nur sichtbar, wenn tatsächlich Produkte da sind (bei leeren Kategorien bleibt der bisherige Hinweistext ohne zusätzliche "0 Produkte"-Zeile). Per Build + Browsertest über alle drei Seitentypen verifiziert.
2026-08-04 19:36:00 +02:00
parent f56621ac77
commit aa8631f95f
13 changed files with 58 additions and 8 deletions
@@ -22,7 +22,10 @@ const items = saleProducts();
  <section class="section-tight">
    <div class="container">
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
@@ -47,7 +47,10 @@ const items = productsByCategory(category.slug);
        </>
      )}
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.shop.categoryEmpty}</p>
      )}
@@ -44,6 +44,10 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+// Gesamtzahl ECHTER Produkte auf dieser Seite (Charakter-Karten + "weitere Modelle" zusammen,
+// OHNE die reinen Platzhalterkarten) — auf ausdrücklichen Wunsch (04.08.2026): auf wirklich jeder
+// Seite mit einer Produktliste soll man auf einen Blick sehen, wie viele Artikel dort stehen.
+const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
@@ -52,6 +56,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
    <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> / <strong>{sub.name[lang]}</strong>
    </p>
+    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</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} {category.name[lang]}</span>
@@ -22,7 +22,10 @@ const items = saleProducts();
  <section class="section-tight">
    <div class="container">
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
@@ -47,7 +47,10 @@ const items = productsByCategory(category.slug);
        </>
      )}
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.shop.categoryEmpty}</p>
      )}
@@ -44,6 +44,10 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+// Gesamtzahl ECHTER Produkte auf dieser Seite (Charakter-Karten + "weitere Modelle" zusammen,
+// OHNE die reinen Platzhalterkarten) — auf ausdrücklichen Wunsch (04.08.2026): auf wirklich jeder
+// Seite mit einer Produktliste soll man auf einen Blick sehen, wie viele Artikel dort stehen.
+const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
@@ -52,6 +56,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
    <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> / <strong>{sub.name[lang]}</strong>
    </p>
+    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</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} {category.name[lang]}</span>
@@ -22,7 +22,10 @@ const items = saleProducts();
  <section class="section-tight">
    <div class="container">
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
@@ -47,7 +47,10 @@ const items = productsByCategory(category.slug);
        </>
      )}
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.shop.categoryEmpty}</p>
      )}
@@ -44,6 +44,10 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+// Gesamtzahl ECHTER Produkte auf dieser Seite (Charakter-Karten + "weitere Modelle" zusammen,
+// OHNE die reinen Platzhalterkarten) — auf ausdrücklichen Wunsch (04.08.2026): auf wirklich jeder
+// Seite mit einer Produktliste soll man auf einen Blick sehen, wie viele Artikel dort stehen.
+const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
 const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
@@ -52,6 +56,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
    <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> / <strong>{sub.name[lang]}</strong>
    </p>
+    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</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} {category.name[lang]}</span>
@@ -22,7 +22,10 @@ const items = saleProducts();
  <section class="section-tight">
    <div class="container">
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
@@ -47,7 +47,10 @@ const items = productsByCategory(category.slug);
        </>
      )}
      {items.length > 0 ? (
+        <>
+          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
+        </>
      ) : (
        <p class="small">{t.shop.categoryEmpty}</p>
      )}
@@ -53,6 +53,10 @@ const hatWeitere = weitere.length > 0;
 // eingetragen hat: statt einer nackten Text-Zeile zeigen wir schon die spätere Karten-Optik,
 // nur eben mit Platzhaltern. Sobald echte Produkte dazukommen, verschwinden diese automatisch.
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+// Gesamtzahl ECHTER Produkte auf dieser Seite (Charakter-Karten + "weitere Modelle" zusammen,
+// OHNE die reinen Platzhalterkarten) — auf ausdrücklichen Wunsch (04.08.2026): auf wirklich jeder
+// Seite mit einer Produktliste soll man auf einen Blick sehen, wie viele Artikel dort stehen.
+const gesamtProdukte = characterEntriesMitProdukt.length + weitere.length;
 // Die Platzhalterkarten müssen direkt in derselben Sektion wie die Story-Boxen stehen (nicht in
 // einer eigenen, zweiten <section>), sonst addieren sich zwei section-Innenabstände zu einem viel
 // zu großen Zwischenraum. Nur wenn es gar keine Story-Boxen gibt (z.B. Unterkategorien ohne
@@ -65,6 +69,7 @@ const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
    <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> / <strong>{sub.name[lang]}</strong>
    </p>
+    {gesamtProdukte > 0 && <p class="small result-count-static">{t.shop.resultCount(gesamtProdukte)}</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} {category.name[lang]}</span>
@@ -105,6 +105,12 @@ img { max-width: 100%; display: block; }

 .text-center { text-align: center; }
 .small { font-size: 0.85rem; color: var(--c-text-muted); }
+/* Statische Artikel-Anzahl (Kategorie-/Unterkategorie-/Sale-Seiten, siehe die jeweiligen
+   src/pages/.../index.astro) — server-seitig fest berechnet, anders als das gleich aussehende
+   #result-count im Shop-Filter, das sich per JS live an die Filter anpasst. Auf ausdrücklichen
+   Wunsch (04.08.2026): auf wirklich jeder Seite mit einer Produktliste soll man auf einen Blick
+   sehen, wie viele Artikel dort stehen, nicht nur im Haupt-Shop. */
+.result-count-static { margin: 0 0 1rem; }

 /* Buttons */
 .btn {