Produktseiten: Zurück-Button oben, springt zur echten vorherigen Seite (alle 4 Sprachen)

Auf ausdrücklichen Wunsch: oben auf jeder Produktseite jetzt ein "← Zurück"-Button vor dem
Breadcrumb. Nutzt den Browser-Verlauf (history.back()) statt fest zur Kategorieseite zu
springen — landet man z.B. von der Startseite, einer Suche oder "Das könnte dir gefallen" auf
einer Produktseite, kommt man genau dahin zurück. Fällt sauber auf einen normalen Link zur
Kategorieseite zurück, wenn kein echter vorheriger Seitenaufruf im Verlauf existiert (Direkt-
aufruf, neuer Tab, Suchmaschine). In allen 4 Sprachversionen (de/en/ch/fr) umgesetzt.

Nebenbei behoben: t.common.skipToContent (Skip-Link aus der BFSG-Barrierefreiheits-Arbeit vom
04.08.) war nur für "de" gepflegt und dadurch auf den en/ch/fr-Seiten leer — jetzt für alle
4 Sprachen ergänzt (gleicher Commit, da hier ohnehin dieselbe common-Sektion bearbeitet wurde).

Lokal mit wrangler pages dev end-to-end getestet (Login, echtes Produkt, Button + Skript im
gerenderten HTML bestätigt).

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-04 14:22:20 +02:00
co-authored by Claude Sonnet 5
parent e37d12b4c7
commit 90dfca2d4f
6 changed files with 116 additions and 1 deletions
+22
View File
@@ -44,6 +44,9 @@ const felder: [string, string | undefined][] = [
<Layout title={name} description={desc} lang={lang} path={`/produkt/${product.slug}/`}>
<section class="section-tight">
<div class="container">
<div class="product-back-row">
<a href={`/en/shop/${product.kategorie}/`} class="product-back-btn" id="product-back-btn">{t.common.back}</a>
</div>
<p class="small breadcrumb">
<a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <a href={`/en/shop/${product.kategorie}/`}>{category?.name[lang]}</a> / <strong>{name}</strong>
</p>
@@ -194,6 +197,25 @@ const felder: [string, string | undefined][] = [
)}
</Layout>
<script>
// Back button at the top of the product page: jumps to the actually previous page in the
// browser history (shop grid with its scroll position, search result, homepage, …) instead of
// always going to the category page. Only when a real same-origin previous page exists
// (document.referrer) — otherwise the normal link to the category page stays as a sensible
// fallback (e.g. direct visit, new tab, coming from a search engine).
const backBtn = document.getElementById("product-back-btn");
backBtn?.addEventListener("click", (e) => {
if (!document.referrer || window.history.length <= 1) return;
try {
if (new URL(document.referrer).origin === location.origin) {
e.preventDefault();
window.history.back();
}
} catch {
// Broken/foreign referrer URL — just keep the normal link to the category page.
}
});
</script>
<script define:vars={{ onlyLeftTemplate: t.common.onlyXLeft("__N__"), maxInCartText: t.common.maxInCart, maxInCartShortText: t.common.maxInCartShort, soldOutText: t.common.soldOut, addToCartText: t.common.addToCart }}>
window.__productStockVars = { onlyLeftTemplate, maxInCartText, maxInCartShortText, soldOutText, addToCartText };
</script>