qcigano
aa8631f95f
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.
35 lines
1.2 KiB
Plaintext
35 lines
1.2 KiB
Plaintext
---
|
|
import Layout from "../../../layouts/Layout.astro";
|
|
import ProductCard from "../../../components/ProductCard.astro";
|
|
import { saleProducts } from "../../../data/products";
|
|
import type { Locale } from "../../../i18n/config";
|
|
import { useTranslations } from "../../../i18n/ui";
|
|
|
|
const lang: Locale = "en";
|
|
const t = useTranslations(lang);
|
|
const items = saleProducts();
|
|
---
|
|
<Layout title="Sale" description="Current offers at Van's DIY & Bastelbedarf." lang={lang} path="/sale/">
|
|
<div class="container">
|
|
<section class="page-banner" style="background-image:url('/img/banner-sale.webp'); --banner-ratio: 1600 / 639;">
|
|
<div class="page-banner-content">
|
|
<span class="eyebrow">{t.sale.eyebrow}</span>
|
|
<h1>{t.sale.title}</h1>
|
|
<p class="lead">{t.sale.lead}</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<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>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</Layout>
|