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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+18
View File
@@ -1122,6 +1122,24 @@ a:focus-visible, button:focus-visible {
/* Aktuelle Ebene (Haupt-/Unterkategorie, Produktname) hebt sich etwas vom "Shop"-Wurzel-Link ab. */
.breadcrumb strong { color: var(--c-text); font-weight: 700; }
/* Zurück-Button oben auf der Produktseite (siehe src/pages/produkt/[slug].astro) — springt per
Skript zur wirklich vorherigen Seite im Browser-Verlauf, der href hier ist die Rückfallebene. */
.product-back-row { margin-bottom: 0.9rem; }
.product-back-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.4em 0.95em;
border-radius: 999px;
border: 1px solid rgba(244, 241, 247, 0.16);
background: rgba(244, 241, 247, 0.04);
color: var(--c-text-muted);
font-size: 0.86rem;
font-weight: 600;
transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.product-back-btn:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateX(-2px); }
/* Ü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; }