From 8cd014500382facb43a217a86d7166986f6f3a13 Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 22:44:51 +0200 Subject: [PATCH] Charaktergeschichten von den Shop-Karten getrennt: eigene volle-Breite Boxen oben, reine Foto/Preis-Karten darunter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bisher stand die persönliche Charaktergeschichte (Hallo-ich-bin-Text) direkt in derselben Karte wie Foto und Kaufinfos. Jetzt zweigeteilt: - Oben: jede Geschichte in einer eigenen, vollen Breite Karte (character-stories/.character-story), übereinander gestapelt. - Darunter: eine Kartenreihe wie im Shop-Grid, die für Charaktere mit echtem Produkt direkt die vorhandene ProductCard-Komponente wiederverwendet (Foto, Badges, Preis, Kurzbeschreibung — 1:1 wie überall sonst im Shop), für Charaktere ohne Produkt ein passender Platzhalter im gleichen Kartenstil. Keine Geschichten mehr in dieser Reihe. Verifiziert per Puppeteer: alle drei Geschichten-Boxen ohne Preis, alle drei Shop-Karten ohne Geschichtstext, HasiDog-Karte zeigt echten Preis (42,00 € durchgestrichen, 25,00 €) über die wiederverwendete ProductCard- Komponente. --- .../shop/[kategorie]/[unterkategorie].astro | 54 ++++++++++++------- .../shop/[kategorie]/[unterkategorie].astro | 54 ++++++++++++------- .../shop/[kategorie]/[unterkategorie].astro | 54 ++++++++++++------- .../shop/[kategorie]/[unterkategorie].astro | 54 ++++++++++++------- src/styles/global.css | 16 +++--- 5 files changed, 150 insertions(+), 82 deletions(-) diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro index a782dc3..c3fbd3c 100644 --- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro @@ -50,27 +50,43 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug)); {characterEntries.length > 0 ? ( -
-
- {characterEntries.map(({ char, product }) => ( -
-
- {product && product.bilder && product.bilder.length > 0 ? ( - {product.name[lang]} - ) : ( - + <> + {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der + Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */} +
+
+ {characterEntries.map(({ char }) => ( +
+ {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} +

{char.name[lang]}

+

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}

+ {char.mehrLink && ( + da → )}
- {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} -

{product ? {product.name[lang]} : char.name[lang]}

-

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}

- {char.mehrLink && ( - da → - )} -
- ))} -
-
+ ))} + + + + {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */} +
+
+ {characterEntries.map(({ char, product }) => + product ? ( + + ) : ( +
+
+ +
+

{char.name[lang]}

+

{t.shop.subcategoryEmpty}

+
+ ) + )} +
+
+ ) : (
diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro index 3698927..fd19c6e 100644 --- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/en/shop/[kategorie]/[unterkategorie].astro @@ -50,27 +50,43 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
{characterEntries.length > 0 ? ( -
-
- {characterEntries.map(({ char, product }) => ( -
-
- {product && product.bilder && product.bilder.length > 0 ? ( - {product.name[lang]} - ) : ( - + <> + {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der + Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */} +
+
+ {characterEntries.map(({ char }) => ( +
+ {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} +

{char.name[lang]}

+

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}

+ {char.mehrLink && ( + here → )}
- {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} -

{product ? {product.name[lang]} : char.name[lang]}

-

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}

- {char.mehrLink && ( - here → - )} -
- ))} -
-
+ ))} + +
+ + {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */} +
+
+ {characterEntries.map(({ char, product }) => + product ? ( + + ) : ( +
+
+ +
+

{char.name[lang]}

+

{t.shop.subcategoryEmpty}

+
+ ) + )} +
+
+ ) : (
diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro index e87ada5..6e1ad34 100644 --- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro @@ -50,27 +50,43 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
{characterEntries.length > 0 ? ( -
-
- {characterEntries.map(({ char, product }) => ( -
-
- {product && product.bilder && product.bilder.length > 0 ? ( - {product.name[lang]} - ) : ( - + <> + {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der + Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */} +
+
+ {characterEntries.map(({ char }) => ( +
+ {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} +

{char.name[lang]}

+

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}

+ {char.mehrLink && ( + ici → )}
- {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} -

{product ? {product.name[lang]} : char.name[lang]}

-

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}

- {char.mehrLink && ( - ici → - )} -
- ))} -
-
+ ))} + +
+ + {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */} +
+
+ {characterEntries.map(({ char, product }) => + product ? ( + + ) : ( +
+
+ +
+

{char.name[lang]}

+

{t.shop.subcategoryEmpty}

+
+ ) + )} +
+
+ ) : (
diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro index 69d8e76..9554610 100644 --- a/src/pages/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/shop/[kategorie]/[unterkategorie].astro @@ -50,27 +50,43 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
{characterEntries.length > 0 ? ( -
-
- {characterEntries.map(({ char, product }) => ( -
-
- {product && product.bilder && product.bilder.length > 0 ? ( - {product.name[lang]} - ) : ( - + <> + {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der + Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen. */} +
+
+ {characterEntries.map(({ char }) => ( +
+ {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} +

{char.name[lang]}

+

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}

+ {char.mehrLink && ( + hier → )}
- {char.vorstellung && {char.vorstellung[lang].split("\n")[0]}} -

{product ? {product.name[lang]} : char.name[lang]}

-

{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}

- {char.mehrLink && ( - hier → - )} -
- ))} -
-
+ ))} + +
+ + {/* Kartenreihe wie im Shop-Grid — nur Foto, Preis und Kaufinfos, keine Geschichten. */} +
+
+ {characterEntries.map(({ char, product }) => + product ? ( + + ) : ( +
+
+ +
+

{char.name[lang]}

+

{t.shop.subcategoryEmpty}

+
+ ) + )} +
+
+ ) : (
diff --git a/src/styles/global.css b/src/styles/global.css index 502568b..9e78dc7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -804,16 +804,20 @@ a:focus-visible, button:focus-visible { 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; } -/* Charakter-Karten auf den Tier-Familien-Seiten (z.B. HasiDog/HasiGott/Mama Hase unter "Hase") — - exakt dieselbe Karten-Optik wie die Produktkarten im Shop-Grid (Foto oben, Text darunter in - voller Breite), nur mit persönlichem Charaktertext statt Produktbeschreibung. */ +/* Persönliche Charaktergeschichten (Hallo-ich-bin-Texte) auf den Tier-Familien-Seiten — eigene, + volle Breite Karten übereinander gestapelt, GETRENNT von den Shop-Karten darunter (die zeigen + nur noch Foto/Preis/Kaufinfos, keine Geschichten). */ +.character-stories { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.2rem; } +.character-story { padding: 1.6rem 1.8rem; } +.character-story h3 { margin: 0.15rem 0 0.6rem; font-size: 1.3rem; } +.character-story p { margin: 0 0 0.8em; color: var(--c-text-muted); } + +/* Charakter-Karten ohne zugeordnetes Produkt (noch kein Foto/Preis) — gleiche Optik wie die + echten Produktkarten (ProductCard.astro), damit die Reihe einheitlich aussieht. */ .character-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; } .character-card .product-media { position: relative; } .character-card h3 { font-size: 1.15rem; margin: 0.1rem 0 0; } -.character-card h3 a { color: inherit; transition: color 0.2s var(--ease); } -.character-card h3 a:hover { color: var(--c-accent); } .character-card-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; } -.character-more-btn { margin-top: auto; align-self: flex-start; } /* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade