Seite 6 - Hyvä

Ein funktionaler Test bestätigt, dass ein Button klickbar bleibt und ein Formular absendet, sagt aber nichts darüber aus, ob dieselbe Interaktion nach einem Tailwind-Refactoring plötzlich zwei Pixel verschoben oder mit falschem Kontrast dargestellt wird. Dieser Artikel zeigt, wie Visual-Regression-Testing mit Playwright-Screenshots oder Percy als eigene Test-Ebene im Hyvä-Theme aufgebaut wird, welche Seiten für den Testumfang tatsächlich sinnvoll sind, und wie dynamische Inhalte wie Preise und Datumsangaben Snapshots nicht länger verfälschen.

Ein Cookie-Banner, das per Inline-Skript Google Tag Manager freischaltet, verletzt in einem Hyvä-Theme sofort die Content-Security-Policy und wird vom Browser stillschweigend blockiert. Dieser Artikel zeigt, wie ein Cookie-Consent-Modul im Hyvä-Theme entsteht, das DSGVO-Anforderungen und CSP-Restriktionen gleichzeitig erfüllt, ohne Nonce-Verletzungen und ohne dass Drittanbieter-Skripte vor der Einwilligung geladen werden.

Eigene Hyvä Page-Builder-Content-Types entstehen nicht durch Knockout-Widgets, sondern durch serverseitiges phtml-Rendering mit Tailwind-Klassen und gezielter Alpine.js-Interaktivität. Dieser Guide zeigt Registrierung, Rendering-Architektur und Performance-Patterns anhand echter Code-Beispiele.

Claude Code kann ein neues Hyvä-Template in Sekunden skizzieren, doch nur mit den passenden Projektkonventionen als Kontext entsteht wirklich brauchbarer Code. Dieser Artikel zeigt, wie man ein phtml-Template mit ViewModel scaffoldet, Alpine.js-Komponenten CSP-konform generieren lässt und KI-vorgeschlagene Tailwind-Klassen gegen das tatsächliche Design-System prüft, bevor sie in Produktion landen.

Mehrere Marken oder Ländershops auf derselben Magento-Instanz brauchen unterschiedliche Farben, Schriften und teils sogar unterschiedliche Layouts, sollen aber dieselbe Codebasis nutzen. Sauberes Hyvä Multi Store Theming mit Tailwind CSS trennt gemeinsame Struktur von Store-spezifischen Design Tokens, statt für jede Marke eine komplette Kopie des Themes zu pflegen.

Ein Hyvä-Update, das plötzlich die Struktur der Mini-Cart-Komponente ändert, trifft Projekte besonders hart, die den Core an mehreren Stellen direkt kopiert statt über das Fallback-System überschrieben haben. Dieser Artikel zeigt, wie sich Breaking Changes in Hyvä-Releases zuverlässig erkennen lassen, warum das Fallback-Prinzip eigene Anpassungen und Parent-Updates strukturell trennt, und welche Testing-Strategie vor einem Hyvä-Major-Update tatsächlich Sicherheit gibt.

Die Hyvä-Minicart ersetzt Knockout-Templates und Customer-Data-Sections durch ein schlankes Alpine.js-Komponentenmodell, das seine Daten direkt per GraphQL cart query lädt. Wer sie anpassen will, arbeitet mit minicart.phtml, Alpine-State und Layout-XML statt mit Knockout-Observables, RequireJS-Modulen und UI-Components, und bekommt dafür eine Komponente, die sich gezielt um Icon, Slide-in-Verhalten, Cross-Sell-Inhalte und Mengenänderung erweitern lässt.

Ein frisches Hyvä-Theme liefert im Entwicklungsmodus ein CSS-Bundle von mehreren Megabyte aus, weil Tailwind CSS im Watch-Modus bewusst nicht purged. Der CSS-Purge-Schritt im Production-Build scannt jede phtml- und Alpine.js-Datei nach tatsächlich verwendeten Klassennamen und reduziert das Stylesheet dadurch auf wenige Kilobyte, sofern dynamische Klassennamen korrekt behandelt und die Deploy-Sequenz sauber ausgeführt wird.

Wer nicht genau weiß, in welcher Reihenfolge Magento und Hyvä ein Template zwischen Modul, Parent-Theme und eigenem Theme auflösen, verliert Zeit mit Overrides, die scheinbar wirkungslos bleiben. Der Hyvä Fallback-Mechanismus folgt einer festen, deterministischen Reihenfolge, die sich mit dem richtigen Wissen gezielt nutzen lässt, ohne das Parent-Theme zu duplizieren oder künftige Updates zu blockieren.

Die Standard-Bestellhistorie von Hyvä zeigt nur einen groben Order-Status, aber keine Tracking-Nummer und keine Zustell-Timeline. Dieser Artikel zeigt, wie sich Shipment- und Track-Daten performant per GraphQL laden lassen, wie ein Carrier-Code-zu-Tracking-URL-Mapping als ViewModel aussieht und wie eine Alpine-Komponente daraus eine verständliche Status-Timeline baut. Ergänzt um Teillieferungen, Caching-Aspekte und die wichtigsten Edge Cases.