{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "produkt-kaufbox-varianten", "name": "Kaufbox mit Farb- und Größenwahl", "name_en": "Product buy box with colour and size variants, delivery estimate and sticky mobile bar", "kurz": "Kaufbox mit echten Radio-Gruppen für Farbe und Größe, ausverkauften Größen mit „Benachrichtige mich“, Bestand und Lieferdatum, Menge und einem Knopf mit drei Zuständen; das selbst gezeichnete Produktbild wechselt mit der Farbe, auf dem Telefon bleibt eine Kaufleiste unten.", "kategorie": "Sektionen & Funktionen", "kategorie_slug": "sektionen", "kategorie_nr": 16, "bau_chat": "D", "prioritaet": "D", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "präzise", "luxuriös" ], "stimmung_roh": [ "produkt", "hochwertig", "klar" ], "technik": [ "css", "vanilla-js", "intl", "svg", "popover", "intersection-observer" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Der Kaufbereich einer Produktseite: Name, Preis mit Hinweis auf Mehrwertsteuer und Versand, Farbwahl als Farbfelder, Größenwahl als Raster, Bestand und Lieferzeit, Menge und „In den Warenkorb“. Farbe und Größe sind echte Radio-Gruppen. Ausverkaufte Größen bleiben sichtbar und wählbar, der Knopf wird dann zu „Benachrichtigen“. Das Produktbild wechselt mit der Farbe. Der Knopf zeigt seinen Zustand (wird hinzugefügt, im Warenkorb). Auf dem Telefon bleibt eine Leiste mit Auswahl und Knopf unten stehen, solange der eigentliche Knopf nicht zu sehen ist. Unter den Details steht ein Akkordeon „Hersteller und Sicherheit“ mit den Angaben nach Art. 19 der Produktsicherheitsverordnung (GPSR).", "warum_es_wirkt": "Alle Kaufentscheidungen liegen an einem Ort und reagieren sofort: Farbe ändert das Bild, Größe ändert Bestand und Lieferzeit. Wer sieht, wann das Paket kommt und was es kostet, kauft mit weniger Zweifel. Die feste Leiste spart auf dem Telefon das Zurückscrollen.", "wann_einsetzen": "Produktseiten in D2C- und Mode-Shops mit Varianten (Farbe, Größe, Ausführung), Manufakturen mit Shop, Schnellkauf aus einer Produktliste.", "wann_nicht": "Für Produkte ohne Varianten reicht ein Preis und ein Knopf. Nicht als Konfigurator mit vielen abhängigen Optionen (eigenes Muster). Keine künstliche Verknappung („nur noch 2“), wenn der Bestand das nicht hergibt. Keine Streichpreise ohne den niedrigsten Preis der letzten 30 Tage (§ 11 PAngV).", "varianten": [ "Produktseite: Galerie links, Kaufbox rechts sticky (D2C, Mode)", "Schnellkauf: kompakte Kaufbox als Panel aus der Produktliste", "Größen als Liste mit Bestand je Zeile (Mode mit vielen Größen)", "Ausführung statt Farbe (Material, Kapazität) mit Preis je Option" ], "umsetzung": "Farbe und Größe als
mit ; Gestaltung über label:has(input:checked). Größe nicht vorauswählen. Ausverkaufte Größen bleiben wählbar (nicht disabled), tragen einen Durchstrich und den versteckten Zusatz „, ausverkauft“; dann wird der Knopf zu „Benachrichtige mich“ und öffnet ein E-Mail-Feld. Die Statuszeile (role=\"status\") nennt Bestand und Lieferdatum aus Intl.DateTimeFormat. Das Bild ist eine SVG-Zeichnung als ; seine Farben kommen aus CSS-Variablen am äußeren und gehen mit fill-Übergang 400 ms in den -Schattenbaum. Ansichten (Seite, Ferse, Schnürung) sind nur andere viewBox-Ausschnitte desselben Symbols. Knopf mit fester Breite und drei übereinanderliegenden Texten, aria-disabled und aria-busy während des Ladens, Meldung in einer role=\"status\"-Zeile. Ohne Größe: Fehler an der Gruppe, Fokus auf die erste lieferbare Größe. Telefon: feste Leiste über IntersectionObserver auf dem echten Knopf. Preisangabe (inkl. MwSt., Versand), Lieferzeit und Restbestand müssen aus dem Warenwirtschaftssystem kommen und vom Kunden rechtlich geprüft werden. Hersteller und Sicherheit (GPSR Art. 19, gilt seit 13.12.2024 für Verbraucherprodukte; vom Kunden prüfen lassen): Schon im Angebot stehen Name oder Marke des Herstellers mit Post- und E-Mail-Adresse, bei Herstellern außerhalb der EU auch der Einführer bzw. die verantwortliche Person in der EU, dazu eine Produktkennung (Modell, Typ, Art.-Nr.), eine Abbildung und die Warn- und Sicherheitshinweise. Als
„Hersteller und Sicherheit“ unter den übrigen Akkordeons; im Schnellkauf bleibt es als einziges sichtbar. Die Angaben kommen wie Preis und Bestand aus dem Warenwirtschaftssystem, je Variante (hier Art.-Nr. je Farbe). Streichpreise: Wer eine Preisermäßigung bekannt gibt, nennt den niedrigsten Gesamtpreis der letzten 30 Tage vor der Ermäßigung (§ 11 PAngV). Einen Streichpreis deshalb nur zusammen mit diesem Wert aus dem Shop-System zeigen, nie von Hand pflegen.", "mobil": "Galerie oben, Kaufbox darunter. Eine feste Leiste unten mit Name, Auswahl und Knopf erscheint, solange der Knopf der Kaufbox nicht sichtbar ist. Ohne gewählte Größe springt die Leiste zur Größenwahl. Größenfelder mindestens 44 px.", "reduzierte_bewegung": "Bild wechselt die Farbe ohne Übergang, Leiste erscheint ohne Gleiten, kein Ladekreisel-Dreh (Text bleibt).", "barrierefreiheit": "Radio-Gruppen mit legend, die gewählte Farbe steht im Text der legend. Ausverkauft als Text, nicht nur als Durchstrich. Statuszeile für Bestand und Lieferzeit, aria-live-Meldung nach dem Hinzufügen. Knopf behält Fokus und Breite beim Zustandswechsel (aria-disabled statt disabled während des Ladens). Menge als echtes Zahlenfeld mit Knöpfen. Kontrast der Farbfelder gegen den Grund mit Rand. WCAG 1.4.1 Benutzung von Farbe, 3.3.1 Fehlererkennung, 4.1.3 Statusmeldungen." }, "messwerte": { "easing": "cubic-bezier(0, 0, 0.2, 1)", "dauer_ms": "Farbfelder und Knöpfe 150, Bildwechsel 400, Leiste ein 250 / aus 200", "stagger_ms": "", "distanz": "Leiste translateY 100 % → 0", "sonstiges": "Öffnen mit (0, 0, 0.2, 1), Schließen schneller mit (0.4, 0, 1, 1) wie im Rezept", "herkunft": "eigene Festlegung", "quelle": "Rezept d2c-produkt-zuerst, bewegung (Allbirds, KoRo)" }, "kurve": { "bezier": [ 0.0, 0.0, 0.2, 1.0 ], "css": "cubic-bezier(0, 0, 0.2, 1)", "name": "eigene Kurve", "dauer_ms": 150 }, "gesehen_bei": [ { "seite": "Baymard Institute: Product Variations (Size Selector)", "url": "https://baymard.com/guidelines/850-size-variation-selector-implementation-details", "auszeichnung": "", "beobachtung": "Größen und andere Nicht-Farb-Optionen werden übersehen, wenn sie nicht sofort sichtbar sind. Manche Nutzer schließen dann fälschlich, dass keine passende Variante verfügbar ist.", "art": "artikel" }, { "seite": "Rezept-Bestand Fundus: D2C „Produktdetailseite“", "url": "https://www.allbirds.com/", "auszeichnung": "", "beobachtung": "Im Rezept d2c-produkt-zuerst bisher aus split-screen-sticky-seiten, galerie-shared-element-vollbild und akkordeon-hoehe-auto zusammengesetzt. Regel: Galerie links, Kaufbox rechts sticky (Varianten, Größe, Preis, Lieferzeit, Knopf), Vertrauen direkt unter dem Knopf. Allbirds (live geprüft 31.10.2026): Übergänge meist 0,2 s, Kurven (0.4, 0, 0.2, 1) und (0, 0, 0.2, 1), Warenkorb-Drawer „Added to Cart“.", "art": "website" }, { "seite": "DEF-Recherche: Zustand mobiler Produktseiten", "url": "https://www.whatmore.ai/blog/winning-product-detail-page/", "auszeichnung": "", "beobachtung": "Laut DEF-Recherche (01.11.2026, Baymard 2026): 62 % der mobilen Shops haben eine mittelmäßige oder schlechtere Produktseite. Quelle nicht selbst gelesen.", "art": "artikel" } ], "tutorials": [ { "titel": "Baymard: Product Variations, Size Selector", "url": "https://baymard.com/guidelines/850-size-variation-selector-implementation-details" }, { "titel": "MDN: Intl.DateTimeFormat", "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat" }, { "titel": "MDN: Intersection Observer API", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" } ], "kombinierbar_mit": [ "split-screen-sticky-seiten", "galerie-shared-element-vollbild", "akkordeon-hoehe-auto", "in-den-warenkorb-flug", "toast-stapel", "button-zustaende", "druck-feedback" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/", "meta": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/meta.json", "demo": "https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo" }, "herkunft": { "quelldateien": [ "DEF-Recherche 01.11.2026" ], "pruefnotizen": [ "Baymard-Richtlinie 850 am 02.11.2026 gelesen (nur frei sichtbarer Teil). Die 62-%-Zahl stammt aus der DEF-Recherche und ist nicht selbst geprüft.", "Bewegungswerte eigene Festlegung nach Rezept d2c-produkt-zuerst. Rechtliches (Preisangaben, Lieferzeit) nur als Hinweis, vom Kunden prüfen lassen.", "Korrektur 02.11.2026: GPSR Art. 19 nach IHK Köln (ihk.de/koeln, Produktsicherheit) am 02.11.2026 gelesen; Angaben zur verantwortlichen Person in der EU und § 11 PAngV nicht neu recherchiert. Rechtliches vom Kunden prüfen lassen." ] }, "bau": { "status": "fertig", "kurz": "Kaufbox mit echten Radio-Gruppen für Farbe und Größe, ausverkauften Größen mit „Benachrichtige mich“, Bestand und Lieferdatum, Menge und einem Knopf mit drei Zuständen; das selbst gezeichnete Produktbild wechselt mit der Farbe, auf dem Telefon bleibt eine Kaufleiste unten.", "demo": true, "abhaengigkeiten": [], "werte": { "easing_auf": "cubic-bezier(0, 0, 0.2, 1) für Auswahl, Bild, Leiste ein", "easing_zu": "cubic-bezier(0.4, 0, 1, 1) für Leiste aus", "auswahl_ms": 150, "bild_ms": 400, "bild": "Farben als CSS-Variablen (--ober, --ueber, --sohle, --ferse, --futter, --senkel, --naht) am , im Symbol per style=\"fill: var(--ober); transition: fill var(--bt)\", weil Klassen-Selektoren den -Schattenbaum nicht erreichen", "knopf": "bereit → wird hinzugefügt (650 ms, Kreisel 700 ms linear) → im Warenkorb (Grün #10714e, 1800 ms) → bereit; Text gleitet 8 px, 150 ms; Druck scale .97", "korb_zahl": "scale 0 → 1 in 200 ms, Puls 1.35 in 400 ms", "leiste": "translate 0 110 % → 0 in 250 ms (auf) / 200 ms (zu), IntersectionObserver auf Menge und Knopf", "lieferung": "Intl.DateTimeFormat de-DE { weekday: short, day: numeric, month: numeric }, 1 bis 3 Werktage nach Versand, Annahmeschluss 14 Uhr", "bestand": "≤ 2 Stück: „Nur noch n“, Punkt #9a5b00; 0: Durchstrich, Text „ausverkauft“, Knopf „Benachrichtige mich“", "farben": "#f5f4f1 Grund, #ece9e2 Bildfläche, #212121 Knopf, #6b6b6b Nebentext, #10714e verfügbar, #c4472d Abzeichen", "schrift": "Instrument Sans für UI, Preise und Knöpfe; Young Serif nur für den Claim", "hersteller_und_sicherheit": "
als viertes Akkordeon: Hersteller mit Post- und E-Mail-Adresse, Produkt mit Art.-Nr. je Farbe (AL-1407-TAN/KAL/LEH/NAC), Abbildung, Warnhinweise als Liste; dl zweispaltig 8.5em / 1fr, bis 560 px einspaltig; im Schnellkauf als einziges Akkordeon sichtbar" }, "ausloeser": "klick", "touch": "Unter 760 px Galerie oben, Kaufbox darunter, Größen in vier Spalten mit 48 px Höhe. Eine feste Leiste mit Miniaturbild, Preis, Auswahl und Knopf erscheint, solange der Knopf der Kaufbox nicht im Bild ist; ohne Größe springt sie zur Größenwahl und zeigt den Hinweis. In der Schnellkauf-Variante gibt es keine Leiste.", "reduziert": "Farbwechsel des Bildes ohne Übergang, Leiste ohne Gleiten, kein drehender Kreisel (Text „Wird hinzugefügt“ bleibt), kein Tipp-Kreis in der Vorführung.", "korrekturen": { "umsetzung": "Farbe und Größe als
mit