Seite 5 - Hyvä

Wer Luma-Layout-Gewohnheiten unreflektiert in ein Hyvä-Theme überträgt, schleppt jsLayout-Reste, RequireJS-Verweise und überflüssige Blockklassen mit. Hyvä Layout-XML nutzt weiterhin das reguläre Magento-Schema, ersetzt die Knockout-lastigen Konventionen von Luma aber durch schlanke Block-Template-ViewModel-Kombinationen.

Nicht jedes Compatibility-Modul verdient einen Platz im Produktivsystem. Wer Luma-Fallbacks blind aktiviert, statt sie gezielt zu auditieren, zahlt mit Ladezeit, CSP-Verstößen und unnötigem Wartungsaufwand für Rendering-Pfade, die kein Kunde je zu Gesicht bekommt.

Die Darstellung der Versandmethoden im Checkout entscheidet oft über Kaufabbruch oder Abschluss. Im Hyvä-Checkout ersetzt eine schlanke Alpine.js-Komponente, die ihre Daten per GraphQL availableShippingMethods query lädt, die Knockout shipping-rates-Komponente aus Luma. Wer diese Komponente anpassen will, arbeitet mit shipping-methods.phtml, ViewModels und eigenen Carrier-Modellen statt mit uiComponents, Observables und RequireJS-Modulen, und bekommt dafür Kartenansichten, Liefertermine, Freigrenzen-Hinweise und Click-and-Collect als reaktive, wartbare Bausteine.

Eine einzelne, vorausgewählte oder mit der Datenschutzerklärung kombinierte AGB-Checkbox im Checkout ist ein rechtliches Risiko, das im Hyvä-Theme durch fehlende Serverprüfung zusätzlich verschärft wird. Dieser Beitrag zeigt, wie dieses Pflichtfeld über Magentos checkout_agreements-Mechanismus, eine erweiterte Alpine.js-Komponente für mehrere Pflichtfelder und ein serverseitiges PHP-Plugin so implementiert wird, dass Kunden aktiv zustimmen müssen und eine Bestellung ohne echte Bestätigung technisch unmöglich bleibt.

Ein Hyvä-Theme ist von Haus aus schlank, aber ein hoher Lighthouse-Score entsteht nicht automatisch. Wer Tailwind-Purging, Bildstrategie, Font-Loading und Full Page Cache nicht gezielt aufeinander abstimmt, verschenkt genau die Vorteile, für die Hyvä eigentlich gebaut wurde. Diese Hyvä-Performance-Optimierung zeigt die konkreten Stellschrauben mit echten Codebeispielen aus Magento 2.4.8 und Tailwind CSS v4.

Wer eine neue Magento-Storefront plant, steht meist vor der Grundsatzfrage Hyvä oder PWA Studio. Der eine Ansatz rendert PHP direkt im Magento-Monolithen, der andere trennt Frontend und Backend vollständig und kommuniziert ausschließlich über GraphQL. Dieser Artikel vergleicht Architektur, Hosting-Aufwand, Performance, Team-Skillset und Erweiterbarkeit konkret und zeigt, wann welcher Ansatz sinnvoll ist.

Wer die Produktdetailseite im Hyvä-Theme erweitern will, greift nicht zu Fotorama-Plugins oder Knockout-Templates, sondern zu Layout-XML, ViewModels und Alpine.js-Komponenten. Diese Anleitung zeigt an konkreten Codebeispielen, wie Galerie, Tabs und eigene Attribute sauber ins bestehende Hyvä-Blocksystem eingebunden werden, inklusive GraphQL-Anbindung, Performance-Optimierung und CSP-konformer Deploy-Sequenz.

Wer Business-Logik direkt in Block-Klassen schreibt, baut Magento-Templates, die sich weder isoliert testen noch sauber wiederverwenden lassen. Das Hyvä ViewModel-Pattern trennt Datenaufbereitung strikt von Darstellung, macht jede Regel als reine PHP-Klasse mit PHPUnit prüfbar und hält phtml-Templates auf reine Ausgabe beschränkt.

Wer in einem Hyvä-Theme jedes Icon als vollständiges Inline-SVG in jedes phtml-Template kopiert, bläht den DOM unnötig auf und erschwert spätere Änderungen am Icon-Set. SVG-Icon-Sprites lösen dieses Problem, indem sie jede Icon-Form nur einmal definieren und über eine einfache Referenz an beliebig vielen Stellen im Theme wiederverwenden. Dieser Artikel zeigt, wie sich SVG-Icon-Sprites in einem Hyvä-Theme aufbauen, optimieren, generieren und barrierefrei einbinden lassen, inklusive konkretem Node-Build-Skript, SVGO-Konfiguration und einem wiederverwendbaren Icon-Partial.

Eine robuste Reorder-Funktion tut mehr, als Bestellpositionen blind in den Warenkorb zu kopieren: Sie prüft vor dem Klick, ob Produkte noch verkäuflich sind, zeigt fehlende Artikel transparent an und lässt Kunden über einen Alpine.js-Bestätigungsdialog bewusst entscheiden, welche Positionen tatsächlich erneut bestellt werden, sauber über Controller, ViewModel, CSRF-Schutz und CSP-konforme Skripte abgesichert.