Hyvä: Anleitungen und Praxiswissen | Seite 3 | mironsoft Blog
Hyvä
-
09.02.2026
Ein einzelnes img-Tag mit fester Breite reicht für kaum ein modernes Layout aus. Wir zeigen, wie srcset und sizes im Hyvä-Theme korrekt erzeugt werden, wann ein picture-Element für echte Art Direction nötig ist und wie beides mit Magentos Bild-Resize-Cache zusammenspielt.
-
15.01.2026
Magentos native Review-Funktion ist funktional solide, aber optisch und interaktiv unauffällig. Wer eine Review-UI baut, die tatsächlich zur Kaufentscheidung beiträgt, muss das Bewertungsformular als Alpine-Komponente denken, die Sterne-Anzeige semantisch korrekt auszeichnen und Sortier- sowie Filteroptionen anbieten, ohne die zugrunde liegende Datenhaltung zu verkomplizieren.
-
11.01.2026
Wer in jeder Query dieselben Produktfelder erneut ausschreibt, vergrößert nicht nur den Quelltext, sondern auch jede einzelne Anfrage an den Server. Fragment-Komposition hält GraphQL-Queries im Hyvä-Frontend schlank, konsistent und über Magento-Updates hinweg wartbar.
-
28.12.2025
Hyvä Theme bringt durch sein schlankes, semantisches HTML-Fundament von Haus aus deutlich bessere Barrierefreiheit mit als klassische Luma-Themes, schließt aber nicht automatisch alle Lücken. Wer Alpine.js-Toggles ohne Fokus-Management einsetzt oder Icon-Buttons ohne zugängliche Namen auslässt, produziert echte WCAG-Verstöße. Dieser Artikel zeigt die Stärken, die häufigsten Fehler und eine praktische Checkliste für das erste Hyvä-Accessibility-Audit.
-
21.12.2025
Wenn die Warenkorb-Anzahl im Header, in der Sticky-Bar und im Minicart synchron bleiben soll, wird reines x-data-Denken schnell zur Verrenkung. Alpine.store() liefert dafuer einen zentralen, reaktiven Speicher, der theme-weit verfügbar ist, ohne dass Zustand über Dutzende Komponenten-Grenzen hinweg durchgereicht werden muss.
-
11.12.2025
Eine mobile Navigation, die nur ein- und ausblendet, reicht nicht: Ohne Zustandsmodell für verschachtelte Kategorien, ohne Fokus-Trap und ohne Scroll-Lock wird das Off-Canvas-Menü für Tastatur- und Screenreader-Nutzer schnell zur Sackgasse. Dieser Beitrag zeigt, wie die mobile Navigation in einem Hyvä-Theme als eigenständige Alpine-Komponente entsteht - mit Zustands-Stack für Kategorieebenen, x-transition für das Slide-in-Panel, Fokus-Trap, ARIA-Attributen und performanter CSS-Transform-Animation statt Layout-Thrashing.
-
08.12.2025
Bei Hyva-Theme-Projekten liegt der Fehler oft nicht klar auf einer Seite: Ist die Tailwind-Klasse falsch generiert oder wird sie vom Watcher gar nicht erst erkannt? PhpStorm kann Xdebug-Sitzung und Node-Prozess in einer einzigen Compound-Konfiguration buendeln, sodass beide Seiten synchron pausieren.
-
02.12.2025
Alpine.js macht x-data bewusst ungetypt, was in kleinen Snippets kein Problem ist, aber in größeren Hyvä-Komponenten schnell zu stillen Bugs, falschen Property-Namen und schwer wartbarem Code führt. Dieser Artikel zeigt typisierte Factory-Functions, JSDoc-basierte Typisierung ohne Build-Step und ein leichtgewichtiges TypeScript-Pattern, das CSP-konform bleibt, Hyvä's No-Build-Philosophie respektiert und trotzdem echte Typsicherheit für Teams und komplexe Komponenten liefert.
-
30.11.2025
Wer im B2B-Vertrieb regelmäßig große Stückzahlen bekannter Artikel bestellt, braucht mehr als die klassische Produktdetailseite. Ein Quick-Order-Formular mit freier SKU- und Mengen-Eingabe, optionalem CSV-Import und einer GraphQL-Batch-Mutation im Hintergrund verkürzt den Weg vom Einkaufszettel bis in den Warenkorb erheblich, inklusive Echtzeit-Validierung gegen den tatsächlichen Lagerbestand.
-
21.11.2025
Wer Inline-Skripte in Hyvä-Templates ohne das richtige Muster einbaut, sieht früher oder später eine blockierte Ausführung in der Browser-Konsole statt eines funktionierenden Alpine-Widgets. CSP in Hyvä basiert auf einem klaren Zusammenspiel aus Magento_Csp, dem HyvaCsp-ViewModel, csp_whitelist.xml und einem Hash-Mechanismus, der Full Page Cache und strikte Content Security Policy gleichzeitig möglich macht. Dieser Artikel zeigt jeden Baustein mit echtem Code aus Magento 2.4.8 und PHP 8.4.