// ──────────────────────────────────────────────────────────────── // Redesign — Family, Testimonials, Newsletter, Footer, Cart, App // ──────────────────────────────────────────────────────────────── const RD_FAM_ICONS = { '📵': 'screen', '❤️': 'heart', '🎨': 'palette', '🗄️': 'archive' }; // ─── BEHIND THE BRAND — founders' letter ───────────────────── function RdBrand({ t }) { const b = t.brand; return (

Martin & Jess — {b.eyebrow}

{b.p1}

{b.p2}

{b.p3 ?

{b.p3}

: null}

{b.thanks}

{b.sig}

); } // ─── FAMILY (green interlude) ──────────────────────────────── function RdFamily({ t }) { const f = t.family; return (

{f.cards.map((c, i) => (

{c.t}

{c.d}

))}

{f.quote_a}
{f.quote_b}

); } // ─── TESTIMONIALS — editorial pull quotes ──────────────────── function RdTestimonials({ t }) { const items = t.test.items || []; return (

{items.length > 0 && (

{items[0].q}

{items[0].n}

)} {items.length > 1 && (

{items.slice(1).map((it, i) => (

„{it.q}“

{it.n}

))}

)}

); } // ─── FAQ ───────────────────────────────────────────────── const RD_FAQ = { de: { eyebrow: 'Fragen & Antworten', title: 'Gut zu wissen, bevor es losgeht.', items: [ { q: 'Wie wird das Buch personalisiert?', a: 'Der Name deines Kindes wird direkt in die Geschichte gedruckt und in die Kunstleder-Mappe graviert. Du gibst ihn einfach an der Kasse ein — die Vorschau zeigt dir sofort, wie die Gravur aussehen wird.' }, { q: 'Für welches Alter ist das Abenteuer gedacht?', a: 'Ab 4 Jahren. Jüngere Kinder bauen und bemalen gemeinsam mit euch, ältere Entdecker schaffen vieles schon allein — die Geschichte wächst mit.' }, { q: 'Was steckt in jeder Box?', a: 'Ein illustriertes Buchkapitel, ein echter Holzspielzeug-Bausatz, Pinsel und Farben, die Schatzkarte zur nächsten Etappe und eine einfache Bauanleitung. Zur ersten Box gibt es die gravierte Kunstleder-Mappe geschenkt.' }, { q: 'Ist das ein Abo?', a: 'Nein. Jedes Kapitel wird einzeln bestellt — ganz in eurem Tempo. Wenn ein neues Kapitel erscheint, erfährst du es zuerst über die Reisepost (unseren Newsletter).' }, { q: 'Wie schnell wird geliefert?', a: 'Deine Schatzkiste wird von Hand gepackt und ist in 2–3 Werktagen bei euch. Die Versandkosten werden an der Kasse berechnet.' }, { q: 'Sind die Materialien sicher?', a: 'Ja. Wir verwenden FSC-Birkenholz und schadstofffreie, kindgerechte Farben. Alles wird in der EU gefertigt und streng geprüft.' }, { q: 'Kann ich das Abenteuer verschenken?', a: 'Sehr gut sogar. Wähle an der Kasse die magische Geschenkverpackung mit Wachssiegel und Tannenzweig — und trage den Namen des Kindes ein, das beschenkt wird.' }, ], }, en: { eyebrow: 'Questions & answers', title: 'Good to know before you set off.', items: [ { q: 'How is the book personalised?', a: "Your child's name is printed right into the story and engraved on the faux leather folder. Simply enter it at checkout — a live preview shows exactly how the engraving will look." }, { q: 'What age is the adventure made for?', a: 'Ages 4 and up. Younger children build and paint together with you, older explorers manage much of it on their own — the story grows with them.' }, { q: "What's inside each box?", a: 'An illustrated book chapter, a real wooden toy kit, brush and paints, the treasure map to the next stop and simple assembly instructions. The engraved faux leather folder comes free with your first box.' }, { q: 'Is it a subscription?', a: "No. Each chapter is ordered individually — at your own pace. When a new chapter appears, you'll hear it first through the travel post (our newsletter)." }, { q: 'How fast is delivery?', a: 'Your treasure chest is packed by hand and reaches you in 2–3 business days. Shipping is calculated at checkout.' }, { q: 'Are the materials safe?', a: 'Yes. We use FSC birch wood and non-toxic, child-safe paints. Everything is made in the EU and strictly tested.' }, { q: 'Can I give the adventure as a gift?', a: 'Absolutely. Choose the magical gift wrapping with wax seal and a sprig of pine at checkout — and enter the name of the child receiving it.' }, ], }, }; function RdFaq({ lang }) { const f = RD_FAQ[lang] || RD_FAQ.de; return (

{f.items.map((it, i) => (

{it.q}

{it.a}

))}

); } // ─── NEWSLETTER — dusk forest close ────────────────────────── function RdNewsletter({ t, intensity }) { const [email, setEmail] = useState(''); const [agree, setAgree] = useState(false); const [err, setErr] = useState(false); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); if (!agree) { setErr(true); return; } if (email) setSent(true); }; return ( ); } // ─── FOOTER ────────────────────────────────────────────────── function RdFooter({ t, lang }) { const cols = [ { title: t.footer.shop, links: [[t.footer.l_chapters, '#chapters'], [t.footer.l_folder, '#inside']] }, { title: t.footer.about, links: [[t.footer.l_story, '#story'], [t.nav.workshop, '#brand']] }, { title: t.footer.help, links: [[t.footer.l_ship, 'Versand & Ruecksendung.html'], [t.footer.l_faq, '#faq'], [t.footer.l_contact, 'Kontakt.html'], [t.footer.l_safety, 'Sicherheit & Material.html']] }, { title: t.footer.legal, links: [[t.footer.l_imp, 'Impressum.html'], [t.footer.l_priv, 'Datenschutz.html'], [t.footer.l_agb, 'AGB.html'], [t.footer.l_cookies, 'Cookies.html']] }, ]; return ( ); } // ─── CART FLYOUT + rdMoney now live in rd-ui.jsx (shared across all pages) ─── // ─── CTA BAND (conversion prompts placed through the page) ──── function RdCtaBand({ t, band, dark = false, primary = false }) { if (!band) return null; const btnClass = primary ? 'rbtn rbtn-primary rbtn-xl' : (dark ? 'rbtn rbtn-ghost-light rbtn-xl' : 'rbtn rbtn-ghost rbtn-xl'); return (

{band.eyebrow}

{band.title}

{band.cta} {band.note && (

{band.note}

)} {t && }

); } // ─── STICKY MOBILE CTA BAR ─────────────────────────────────── function RdStickyBar({ t, onAdd, product }) { const [show, setShow] = useState(false); useEffect(() => { let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { setShow((prev) => { const next = window.scrollY > window.innerHeight * 0.72; return next === prev ? prev : next; }); ticking = false; }); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return (

{/* The bar advertises the featured Shopify product — cover, title and price all come from it, so it can never disagree with the card or cart. */}

{product && product.images && product.images[0] ?

: }

{product ? product.title : ''}

{product ? product.priceFormatted : ''}{t.stickyNote}

{t.stickyAll}

); } // ─── EXIT-INTENT MODAL (10% newsletter offer) ──────────────── function RdExitIntent({ t }) { const [open, setOpen] = useState(false); const [email, setEmail] = useState(''); const [sent, setSent] = useState(false); useEffect(() => { try { if (sessionStorage.getItem('pf-exit-shown')) return; } catch (e) {} let armed = false; const arm = setTimeout(() => { armed = true; }, 4000); const fire = () => { if (!armed) return; try { if (sessionStorage.getItem('pf-exit-shown')) return; } catch (e) {} try { sessionStorage.setItem('pf-exit-shown', '1'); } catch (e) {} setOpen(true); cleanup(); }; const onMouseOut = (e) => { if (e.clientY <= 0 && !e.relatedTarget) fire(); }; let lastY = window.scrollY, wentDown = false; const onScroll = () => { const y = window.scrollY; if (y > 600) wentDown = true; if (wentDown && y < 140 && lastY - y > 46) fire(); lastY = y; }; document.addEventListener('mouseout', onMouseOut); window.addEventListener('scroll', onScroll, { passive: true }); function cleanup() { clearTimeout(arm); document.removeEventListener('mouseout', onMouseOut); window.removeEventListener('scroll', onScroll); } return cleanup; }, []); if (!open) return null; const e = t.exit; return ( ); } // ─── APP ───────────────────────────────────────────────────── const RD_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroDir": "a", "palette": "wald", "anim": 5, "lang": "de" }/*EDITMODE-END*/; // ─── ADD TO CART ───────────────────────────────────────────── // One basket writer for every "add" button on the site. A basket line is only a // REFERENCE to a Shopify product — { handle, variantId, qty }. Title, image, // price and stock are read from the shared Shopify catalog at render time, so // the basket can never disagree with the card or the product page. function rdUseAddToCart(setCart, setCartOpen, setJustAdded, lang) { return (chap, opts) => { const handle = typeof chap === 'string' ? chap : (chap && chap.handle); if (!handle) return; // no product → nothing to add const gift = opts && opts.gift ? opts.gift : null; const known = (window.PFShop && PFShop.peek) ? PFShop.peek(handle) : null; const variantId = (chap && chap.variantId) || (known && known.variantId) || null; const max = (chap && chap.max != null) ? chap.max : (known ? known.quantityAvailable : null); setCart((c) => { const i = c.findIndex((x) => x.n === handle); if (i >= 0) { const next = [...c]; const cap = next[i].max != null ? next[i].max : (max != null ? max : 99); next[i] = { ...next[i], qty: Math.min(cap, (next[i].qty || 1) + 1), ...(gift ? { gift } : {}) }; return next; } return [...c, { n: handle, handle, qty: 1, ...(variantId ? { variantId } : {}), ...(max != null ? { max } : {}), ...(gift ? { gift } : {}) }]; }); // Make sure the catalog holds this product (fills in the real variant id). if (window.PFShop && PFShop.ensure) { PFShop.ensure([handle], lang).then(() => { const p = PFShop.peek(handle); if (!p) return; setCart((c) => c.map((x) => x.n === handle ? { ...x, variantId: p.variantId, ...(p.quantityAvailable != null ? { max: p.quantityAvailable } : {}) } : x)); }).catch(() => {}); } setCartOpen(true); setJustAdded(handle); setTimeout(() => setJustAdded(null), 900); }; } // The chapter a generic CTA (hero, top bar, sticky bar) should add: the first // purchasable chapter in the Shopify collection. No hardcoded default. function rdUseFeaturedChapter(lang) { const { list } = usePFChapters(lang); return list.find((p) => p.available !== false && p.quantityAvailable !== 0) || null; } function RdApp() { const [tw, setTw] = useTweaks(RD_TWEAK_DEFAULTS); const [lang, setLang] = useState(() => rdLangLoad(tw.lang || 'de')); const [cart, setCart] = useState(() => rdCartLoad()); const [cartOpen, setCartOpen] = useState(false); const [justAdded, setJustAdded] = useState(null); const intensity = typeof tw.anim === 'number' ? tw.anim : 5; useEffect(() => { rdCartSave(cart); }, [cart]); useEffect(() => { setTw('lang', lang); rdLangSave(lang); document.documentElement.lang = lang; }, [lang]); useEffect(() => { document.documentElement.dataset.palette = tw.palette || 'wald'; document.documentElement.dataset.anim = intensity > 0 ? 'on' : 'off'; document.documentElement.style.setProperty('--anim-f', String(Math.max(intensity, 1) / 5)); }, [tw.palette, intensity]); const t = (window.COPY && window.COPY[lang]) || window.COPY.de; // reveal-on-scroll useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); const scan = () => document.querySelectorAll('.r-rev:not(.in)').forEach((el) => io.observe(el)); let id = requestAnimationFrame(scan); // Content that arrives asynchronously (e.g. Shopify chapter cards) mounts // after this first scan — re-scan whenever the DOM changes or the catalog // loads, so late cards still reveal instead of staying at opacity:0. const rescan = () => { cancelAnimationFrame(id); id = requestAnimationFrame(scan); }; const mo = new MutationObserver(rescan); mo.observe(document.body, { childList: true, subtree: true }); window.addEventListener('pf-catalog-changed', rescan); return () => { cancelAnimationFrame(id); io.disconnect(); mo.disconnect(); window.removeEventListener('pf-catalog-changed', rescan); }; }, [lang, tw.heroDir]); const addToCart = rdUseAddToCart(setCart, setCartOpen, setJustAdded, lang); const featured = rdUseFeaturedChapter(lang); const changeQty = (n, d) => setCart((c) => c.map((x) => x.n === n ? { ...x, qty: Math.min(x.max || 99, Math.max(1, (x.qty || 1) + d)) } : x)); const removeItem = (n) => setCart((c) => c.filter((x) => x.n !== n)); return ( s + (c.qty || 1), 0)} onOpenCart={() => setCartOpen((v) => !v)} onStartAdventure={() => addToCart(featured)} /> addToCart(featured)} /> setCartOpen(false)} lang={lang} onQty={changeQty} onRemove={removeItem} justAdded={justAdded} /> {featured && addToCart(featured)} />} setTw('heroDir', v)} /> setTw('palette', v)} /> setTw('anim', v)} /> ); } // Standalone all-chapters page (Alle Kapitel.html sets window.RD_PAGE = 'chapters') function RdChaptersPage() { const [lang] = useState(() => rdLangLoad('de')); const [cart, setCart] = useState(() => rdCartLoad()); const [cartOpen, setCartOpen] = useState(false); const [justAdded, setJustAdded] = useState(null); useEffect(() => { rdCartSave(cart); }, [cart]); const t = (window.COPY && window.COPY[lang]) || window.COPY.de; useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); const scan = () => document.querySelectorAll('.r-rev:not(.in)').forEach((el) => io.observe(el)); let id = requestAnimationFrame(scan); // Content that arrives asynchronously (e.g. Shopify chapter cards) mounts // after this first scan — re-scan whenever the DOM changes or the catalog // loads, so late cards still reveal instead of staying at opacity:0. const rescan = () => { cancelAnimationFrame(id); id = requestAnimationFrame(scan); }; const mo = new MutationObserver(rescan); mo.observe(document.body, { childList: true, subtree: true }); window.addEventListener('pf-catalog-changed', rescan); return () => { cancelAnimationFrame(id); io.disconnect(); mo.disconnect(); window.removeEventListener('pf-catalog-changed', rescan); }; }, [lang]); const addToCart = rdUseAddToCart(setCart, setCartOpen, setJustAdded, lang); const featured = rdUseFeaturedChapter(lang); const changeQty = (n, d) => setCart((c) => c.map((x) => x.n === n ? { ...x, qty: Math.min(x.max || 99, Math.max(1, (x.qty || 1) + d)) } : x)); const removeItem = (n) => setCart((c) => c.filter((x) => x.n !== n)); return ( s + (c.qty || 1), 0)} onOpenCart={() => setCartOpen((v) => !v)} onStartAdventure={() => addToCart(featured)} /> setCartOpen(false)} lang={lang} onQty={changeQty} onRemove={removeItem} justAdded={justAdded} /> ); } ReactDOM.createRoot(document.getElementById('root')).render(window.RD_PAGE === 'chapters' ? : );

{c.t}

{it.q}

{t.news.title}

{band.title}