From 1c9bee94caabf2b0fa124287e1007feda7da6123 Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 19:56:46 +0200 Subject: [PATCH] =?UTF-8?q?Zwei=20neue=20Hase-Varianten=20(HasiGott,=20Mam?= =?UTF-8?q?a=20Hase)=20+=20abwechselnde=20Foto/Text-Seite=20pro=20Familie;?= =?UTF-8?q?=20Hauptkategorie-=C3=9Cberschrift=20auf=20Kategorie-Seiten?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Zwei neue Unterkategorien unter "Hase" angelegt: "HasiGott" und "Mama Hase", jeweils mit eigenem Charaktertext, bereit für echte Produktfotos sobald VanVan sie im Adminbereich hinzufügt. - Neue Logik: Innerhalb einer Tier-Familie (gleicher Slug-Präfix, z.B. "hase-*") wechselt die Vorstellungsbox jetzt automatisch die Seite ab — 1. Mitglied Foto links/Text rechts (HasiDog, unverändert), 2. Mitglied Foto rechts/Text links (HasiGott), 3. wieder links (Mama Hase), und so weiter für alle künftigen Varianten. - Kategorie-Seiten (z.B. "DIY Plushies") zeigen jetzt eine Hauptkategorie-Überschrift zwischen der Unterkategorien-Chip-Reihe und der eigentlichen Produktreihe darunter. Verifiziert per Puppeteer gegen den echten Build: neue Seiten laden fehlerfrei, HasiDog bleibt korrekt "nicht gespiegelt" (1. Familienmitglied), Hauptkategorie-Überschrift sitzt an der richtigen Stelle. --- src/content/categories/diy-plushies.json | 30 +++++++++++++++++++ src/pages/ch/shop/[kategorie].astro | 3 ++ .../shop/[kategorie]/[unterkategorie].astro | 12 ++++++-- src/pages/en/shop/[kategorie].astro | 3 ++ .../shop/[kategorie]/[unterkategorie].astro | 12 ++++++-- src/pages/fr/shop/[kategorie].astro | 3 ++ .../shop/[kategorie]/[unterkategorie].astro | 12 ++++++-- src/pages/shop/[kategorie].astro | 3 ++ .../shop/[kategorie]/[unterkategorie].astro | 12 ++++++-- src/styles/global.css | 20 ++++++++++++- 10 files changed, 101 insertions(+), 9 deletions(-) diff --git a/src/content/categories/diy-plushies.json b/src/content/categories/diy-plushies.json index e2020e7..13f4edb 100644 --- a/src/content/categories/diy-plushies.json +++ b/src/content/categories/diy-plushies.json @@ -46,6 +46,36 @@ }, "mehrLink": "https://dogfather-universe.dogfather1608.workers.dev/hasidog.html" }, + { + "slug": "hase-hasigott", + "name": { + "de": "Hase „HasiGott”", + "en": "Bunny \"HasiGott\"", + "ch": "Hase „HasiGott”", + "fr": "Lapin « HasiGott »" + }, + "vorstellung": { + "de": "Hallo, ich bin HasiGott.\nIch bin der Größte, Weiseste und Kuscheligste von allen – zumindest behaupte ich das gerne selbst. Mit meinem selbstbewussten Lächeln bringe ich dich garantiert zum Schmunzeln.", + "en": "Hello, I'm HasiGott.\nI'm the biggest, wisest and cuddliest of them all — or at least that's what I like to say myself. With my confident smile, I'm bound to bring one to your face too.", + "ch": "Hoi, ig bi dr HasiGott.\nIg bi dr Gröscht, Wysischt und Kuschligscht vo allne – zumindescht behaupte ig das gern sälber. Mit mim sälbstbewusste Lächle bring ig di garantiert zum Schmunzle.", + "fr": "Bonjour, je suis HasiGott.\nJe suis le plus grand, le plus sage et le plus câlin de tous — enfin, c'est ce que j'aime dire moi-même. Avec mon sourire plein d'assurance, je suis sûr de te faire sourire aussi." + } + }, + { + "slug": "hase-mama", + "name": { + "de": "Hase „Mama Hase”", + "en": "Bunny \"Mama Hase\"", + "ch": "Hase „Mama Hase”", + "fr": "Lapin « Maman Lapine »" + }, + "vorstellung": { + "de": "Hallo, ich bin Mama Hase.\nIch halte meine Familie mit ganz viel Liebe und einem offenen Herzen zusammen. Bei mir findest du immer ein warmes Plätzchen zum Ankuscheln.", + "en": "Hello, I'm Mama Hase.\nI hold my family together with lots of love and an open heart. With me, you'll always find a warm spot to cuddle up.", + "ch": "Hoi, ig bi d'Mama Hase.\nIg haltä mini Familie mit ganz viel Liebi und emenä offene Härz zäme. Bi mir findsch du immer es warms Plätzli zum Aakuschle.", + "fr": "Bonjour, je suis Maman Lapine.\nJe tiens ma famille unie avec beaucoup d'amour et un cœur ouvert. Avec moi, tu trouveras toujours un coin douillet pour te blottir." + } + }, { "slug": "wal-sam", "name": { diff --git a/src/pages/ch/shop/[kategorie].astro b/src/pages/ch/shop/[kategorie].astro index ac12555..f866d03 100644 --- a/src/pages/ch/shop/[kategorie].astro +++ b/src/pages/ch/shop/[kategorie].astro @@ -40,6 +40,9 @@ const items = productsByCategory(category.slug); )} + {items.length > 0 && ( +

{category.icon} {category.name[lang]}

+ )} {items.length > 0 ? (
{items.map((p) => )}
) : ( diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro index 1fb97c7..fad28c3 100644 --- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro @@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!; const echtProdukte = productsByUnterkategorie(category.slug, sub.slug); const featured = echtProdukte[0]; const weitere = echtProdukte.slice(1); + +// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt +// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt +// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. +const familyPrefix = sub.slug.split("-")[0]; +const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? []; +const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug); +const introReverse = familyIndex % 2 === 1; ---
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1); {featured ? (
-
+
{featured.bilder && featured.bilder.length > 0 ? ( {featured.name[lang]} @@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1); )} -
+
{sub.vorstellung && {sub.vorstellung[lang].split("\n")[0]}}

{featured.name[lang]}

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

diff --git a/src/pages/en/shop/[kategorie].astro b/src/pages/en/shop/[kategorie].astro index 2cd741c..f91a007 100644 --- a/src/pages/en/shop/[kategorie].astro +++ b/src/pages/en/shop/[kategorie].astro @@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
)} + {items.length > 0 && ( +

{category.icon} {category.name[lang]}

+ )} {items.length > 0 ? (
{items.map((p) => )}
) : ( diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro index 86f1d5f..215bdf7 100644 --- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/en/shop/[kategorie]/[unterkategorie].astro @@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!; const echtProdukte = productsByUnterkategorie(category.slug, sub.slug); const featured = echtProdukte[0]; const weitere = echtProdukte.slice(1); + +// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt +// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt +// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. +const familyPrefix = sub.slug.split("-")[0]; +const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? []; +const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug); +const introReverse = familyIndex % 2 === 1; ---
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1); {featured ? (
-
+
{featured.bilder && featured.bilder.length > 0 ? ( {featured.name[lang]} @@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1); )} -
+
{sub.vorstellung && {sub.vorstellung[lang].split("\n")[0]}}

{featured.name[lang]}

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

diff --git a/src/pages/fr/shop/[kategorie].astro b/src/pages/fr/shop/[kategorie].astro index 3aed614..3484b64 100644 --- a/src/pages/fr/shop/[kategorie].astro +++ b/src/pages/fr/shop/[kategorie].astro @@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
)} + {items.length > 0 && ( +

{category.icon} {category.name[lang]}

+ )} {items.length > 0 ? (
{items.map((p) => )}
) : ( diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro index 77d8f5e..2c1edf2 100644 --- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro @@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!; const echtProdukte = productsByUnterkategorie(category.slug, sub.slug); const featured = echtProdukte[0]; const weitere = echtProdukte.slice(1); + +// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt +// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt +// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. +const familyPrefix = sub.slug.split("-")[0]; +const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? []; +const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug); +const introReverse = familyIndex % 2 === 1; ---
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1); {featured ? (
-
+
{featured.bilder && featured.bilder.length > 0 ? ( {featured.name[lang]} @@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1); )} -
+
{sub.vorstellung && {sub.vorstellung[lang].split("\n")[0]}}

{featured.name[lang]}

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

diff --git a/src/pages/shop/[kategorie].astro b/src/pages/shop/[kategorie].astro index b2ae1a5..0fac754 100644 --- a/src/pages/shop/[kategorie].astro +++ b/src/pages/shop/[kategorie].astro @@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
)} + {items.length > 0 && ( +

{category.icon} {category.name[lang]}

+ )} {items.length > 0 ? (
{items.map((p) => )}
) : ( diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro index ae219e8..81d9eac 100644 --- a/src/pages/shop/[kategorie]/[unterkategorie].astro +++ b/src/pages/shop/[kategorie]/[unterkategorie].astro @@ -24,6 +24,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!; const echtProdukte = productsByUnterkategorie(category.slug, sub.slug); const featured = echtProdukte[0]; const weitere = echtProdukte.slice(1); + +// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt +// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt +// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. +const familyPrefix = sub.slug.split("-")[0]; +const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? []; +const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug); +const introReverse = familyIndex % 2 === 1; ---
@@ -40,7 +48,7 @@ const weitere = echtProdukte.slice(1); {featured ? (
-
+
{featured.bilder && featured.bilder.length > 0 ? ( {featured.name[lang]} @@ -48,7 +56,7 @@ const weitere = echtProdukte.slice(1); )} -
+
{sub.vorstellung && {sub.vorstellung[lang].split("\n")[0]}}

{featured.name[lang]}

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

diff --git a/src/styles/global.css b/src/styles/global.css index 221bee0..b670c38 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -608,7 +608,15 @@ a:focus-visible, button:focus-visible { .intro h2 a { color: inherit; transition: color 0.2s var(--ease); } .intro h2 a:hover { color: var(--c-accent); } .intro .portrait-frame.portrait { display: block; } -@media (max-width: 800px) { .intro { grid-template-columns: 1fr; gap: 1.5rem; } } +/* Wechselt innerhalb einer Tier-Familie ab: Foto links/rechts, Text jeweils gegenüber — sorgt + für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen. */ +.intro-reverse { grid-template-columns: 1.15fr 0.85fr; } +.intro-reverse .portrait-frame.portrait { order: 2; } +.intro-reverse .intro-text { order: 1; } +@media (max-width: 800px) { + .intro { grid-template-columns: 1fr; gap: 1.5rem; } + .intro-reverse .portrait-frame.portrait, .intro-reverse .intro-text { order: initial; } +} /* Breiter als vorher (war 440px) + Seitenverhältnis nah am Originalfoto (900x1353 ≈ 2/3) statt 3/4 — vorher wurde oben/unten so stark beschnitten, dass das Plushie neben VanVan (Oktopus) nur noch als Ecke sichtbar war. So ist das ganze Foto inkl. beider Plushies zu sehen. */ @@ -744,6 +752,16 @@ a:focus-visible, button:focus-visible { /* Ü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; } + +/* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen + Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade + durchstöbert, fällt bewusst etwas mehr auf als die stille "Unterkategorien"-Beschriftung. */ +.kategorie-section-label { + text-align: center; + font-size: 1.3rem; + color: var(--c-accent); + margin: 2.2rem 0 1.3rem; +} @media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } } /* Produktseite — großes Bild bekommt denselben edlen "Rahmen"-Look wie die Porträtfotos der