Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›
Oksana Mironjuk
Kontakt aufnehmen Warenkorb

Mein Warenkorb

Laden...

Kundenlogin

Checkout as a new customer

Ein Konto zu erstellen hat viele Vorteile:

  • Bestellungen und Sendungen verfolgen
  • Alte Bestellungen einsehen
  • Schneller zur Kasse gehen
Ein Konto erstellen

Hyvä Themes Tutorial: Magento 2 Frontend von Grund auf lernen | Mironsoft

Hyvä Themes: Das komplette Tutorial für Magento-2-Entwickler

Hyvä Themes von Grund auf lernen: warum es Luma, KnockoutJS und UI-Components ersetzt, wie Tailwind CSS v4 und Alpine.js zusammenspielen, wie Layout-XML, ViewModels und CSP funktionieren - demonstriert an einer durchgehenden eigenen Storefront-Seite mit Kategorie-Filter.

Das lernst du

  • Warum Hyvä Themes Luma, KnockoutJS, jQuery und UI-Components vollständig ersetzt, und wie die Architektur aus Tailwind CSS, Alpine.js und PHP-Templates zusammenspielt
  • Wie Hyvä installiert, als Child-Theme eingerichtet und über die korrekte vierstufige Sequenz deployt wird
  • Wie Layout-XML, ViewModels, der Escaper und die Content Security Policy (registerInlineScript) in Hyvä-Templates zusammenwirken
  • Wie Tailwind CSS v4 im CSS-first-Ansatz konfiguriert und wie Alpine.js für Interaktivität eingesetzt wird
  • Wie man Schritt für Schritt eine eigene Storefront-Seite baut: Modul, Route, Controller, ViewModel, Tailwind-Template und CSP-konforme Alpine-Filterlogik
  • Wie man bestehende Magento-Seiten (Produktseite, Checkout) anpasst, Performance optimiert, von Luma migriert und typische Fehler debuggt

Voraussetzungen

  • PHP-Grundkenntnisse werden vorausgesetzt, idealerweise etwas Erfahrung mit Magento 2 - Hyvä-spezifisches Wissen (Tailwind CSS, Alpine.js, Hyvä-Konventionen) wird in dieser Serie vollständig von Grund auf aufgebaut

Kapitel dieser Serie

  1. 1 Was ist Hyvä Themes? Warum kein Luma, kein KnockoutJS, keine UI-Components mehr ~7 Min. Lesezeit
  2. 2 Architektur-Überblick: Tailwind CSS, Alpine.js, PHP-Templates ohne schweren Framework-Overhead ~7 Min. Lesezeit
  3. 3 Hyvä installieren und einrichten: Parent-Theme, eigenes Child-Theme anlegen ~8 Min. Lesezeit
  4. 4 Theme-Struktur verstehen: registration.php, theme.xml, view.xml, Verzeichnisaufbau ~6 Min. Lesezeit
  5. 5 Der Build-Prozess: npm, Tailwind CSS v4 CSS-first-Ansatz, Watcher, korrekte Deploy-Sequenz ~9 Min. Lesezeit
  6. 6 Layout-XML in Hyvä: Blocks, Container, getChildNames()-Iteration ~7 Min. Lesezeit
  7. 7 ViewModels (ArgumentInterface) vs. klassische Block-Klassen - warum ViewModels bevorzugt werden ~8 Min. Lesezeit
  8. 8 phtml-Templates schreiben: Escaper, Best Practices, keine rohen Ausgaben ohne Escaping ~7 Min. Lesezeit
  9. 9 Content Security Policy (CSP) verstehen: registerInlineScript() im Detail ~8 Min. Lesezeit
  10. 10 Eigene Templates überschreiben: Theme-Fallback-Konventionen ~6 Min. Lesezeit
  11. 11 Tailwind CSS v4 Grundlagen im Hyvä-Kontext: CSS-first-Konfiguration mit @theme, Utility-Klassen ~8 Min. Lesezeit
  12. 12 Eigene Design-Tokens und wiederkehrende Komponenten-Klassen definieren ~7 Min. Lesezeit
  13. 13 Responsive Design mit Tailwind in Hyvä-Templates ~7 Min. Lesezeit
  14. 14 Alpine.js Grundlagen im Hyvä-Kontext: x-data, x-show, x-on, x-model ~8 Min. Lesezeit
  15. 15 Bestehende Alpine-Komponenten in Hyvä verstehen: Mobile-Menu, Mini-Cart als Lernbeispiele ~8 Min. Lesezeit
  16. 16 Eigene Alpine-Komponente bauen: State, Events, Interaktivität ohne separate JS-Datei ~8 Min. Lesezeit
  17. 17 Projektvorstellung: eine eigene Team-Seite mit Kategorie-Filter, Modul- und Seitenkonzept ~7 Min. Lesezeit
  18. 18 Layout-XML und Controller für die neue Seite anlegen ~8 Min. Lesezeit
  19. 19 ViewModel für die Team-Daten schreiben ~7 Min. Lesezeit
  20. 20 Template mit Tailwind gestalten ~8 Min. Lesezeit
  21. 21 Alpine-Filterlogik integrieren: Kategorie-Buttons, Live-Filterung ohne Page-Reload ~9 Min. Lesezeit
  22. 22 CSP-konformes Inline-Script korrekt registrieren und testen ~7 Min. Lesezeit
  23. 23 Produktdetailseite in Hyvä anpassen (Custom-Optionen, Galerie als Beispiel) ~8 Min. Lesezeit
  24. 24 Checkout in Hyvä: Aufbau und die wichtigsten Anpassungspunkte ~8 Min. Lesezeit
  25. 25 Performance-Best-Practices: Critical CSS, Lazy Loading, warum Hyvä spürbar schneller ist als Luma ~8 Min. Lesezeit
  26. 26 Von Luma auf Hyvä migrieren: typische Stolperfallen ~8 Min. Lesezeit
  27. 27 Die korrekte Deploy-Sequenz im Detail und warum die Reihenfolge zählt ~8 Min. Lesezeit
  28. 28 Typische Fehler und wie man sie debuggt (fehlendes registerInlineScript, CSP-Verletzungen, hartnäckige Caches) ~9 Min. Lesezeit
  29. 29 Zusammenfassung: Spickzettel aller wichtigsten Hyvä-Patterns aus dieser Serie ~9 Min. Lesezeit