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

Charakter-Vorstellungen umgebaut: kompakte Karten nebeneinander statt großflächiger Text/Foto-Splits

Browse Source 
Die großen abwechselnden Foto/Text-Boxen (voller Formularbreite je
Charakter, viel Leerraum bei kurzem Text) sind ersetzt durch kompakte
Karten im exakt gleichen Stil wie die Produktkarten im Shop-Grid: Foto
oben, Text darunter in voller Kartenbreite, alle Charaktere einer Familie
nebeneinander in einer Reihe statt einzeln untereinander.

Betrifft alle Tier-Familien (Hase, Kuh, Wal, Oktopus, Schildkröte,
Pinguin) — wächst weiterhin automatisch mit, sobald neue Charaktere
ergänzt werden. Die "Über die Kreative"-Seite nutzt dieselbe .intro-
CSS-Klasse für ihr eigenes Layout und ist unangetastet geblieben.

Verifiziert per Puppeteer: alle drei Hase-Karten korrekt (Foto, Text,
Link), "Über die Kreative" weiterhin fehlerfrei und unverändert.
This commit is contained in:
qcigano
2026-08-02 22:38:20 +02:00
parent ffddd33a38
commit bdb1b323c7
5 changed files with 83 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/en/shop/[kategorie]/[unterkategorie].astro
+18 -28
View File
@@ -21,16 +21,15 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
// Alle Produkte dieser Unterkategorie (unabhängig davon, welchem Charakter sie zugeordnet sind).
const alleProdukte = productsByUnterkategorie(category.slug, sub.slug);
// Jeder Charakter dieser Tier-Familie bekommt seine eigene Box, abwechselnd Foto links/rechts —
// 1. Charakter links, 2. rechts, 3. wieder links, usw. Sobald VanVan im Adminbereich neue
// Charaktere UND passende Produkte ergänzt, wächst diese Liste automatisch mit. Fehlt einem
// Charakter noch ein echtes Produkt, zeigt seine Box trotzdem schon den Charaktertext (nur ohne
// Jeder Charakter dieser Tier-Familie bekommt seine eigene kompakte Karte (wie die Produktkarten
// im Shop-Grid), alle nebeneinander in einer Reihe. Sobald VanVan im Adminbereich neue
// Charaktere UND passende Produkte ergänzt, wächst diese Reihe automatisch mit. Fehlt einem
// Charakter noch ein echtes Produkt, zeigt seine Karte trotzdem schon den Charaktertext (nur ohne
// Foto) — die Seite muss nicht auf das erste Foto warten, um zu existieren.
const characters = sub.characters ?? [];
const characterEntries = characters.map((char, index) => ({
const characterEntries = characters.map((char) => ({
char,
product: alleProdukte.find((p) => p.charakter === char.slug),
reverse: index % 2 === 0,
}));
// Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
@@ -51,36 +50,27 @@ const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
</div>
{characterEntries.length > 0 ? (
characterEntries.map(({ char, product, reverse }) => (
<section class="section-tight">
<div class={`container grid grid-2 intro ${reverse ? "intro-reverse" : ""}`}>
{product ? (
<a class="portrait-frame portrait" href={`/en/produkt/${product.slug}/`} aria-label={product.name[lang]}>
{product.bilder && product.bilder.length > 0 ? (
<section class="section-tight">
<div class="container grid grid-3">
{characterEntries.map(({ char, product }) => (
<div class="card character-card">
<div class="product-media">
{product && product.bilder && product.bilder.length > 0 ? (
<img class="product-photo" src={product.bilder[0]} alt={product.name[lang]} loading="lazy" />
) : (
<div class="img-placeholder" role="img" aria-label={product.name[lang]}></div>
<div class="img-placeholder" role="img" aria-label={product ? product.name[lang] : char.name[lang]}></div>
)}
</a>
) : (
<div class="portrait-frame portrait">
<div class="img-placeholder" role="img" aria-label={char.name[lang]}></div>
</div>
)}
<div class="intro-text">
{char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
<h2>{product ? <a href={`/en/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h2>
<p class="lead">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
<h3>{product ? <a href={`/en/produkt/${product.slug}/`}>{product.name[lang]}</a> : char.name[lang]}</h3>
<p class="character-card-desc">{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : (product ? product.beschreibung[lang] : t.shop.subcategoryEmpty)}</p>
{char.mehrLink && (
<div class="character-more">
<p>If you'd like to learn more about me, just click</p>
<a class="btn btn-outline" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
</div>
<a class="btn btn-outline btn-sm character-more-btn" href={char.mehrLink} target="_blank" rel="noopener">here →</a>
)}
</div>
</div>
</section>
))
))}
</div>
</section>
) : (
<section class="section-tight">
<div class="container">