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

My Cart

Loading...

Customer Login

Checkout as a new customer

Creating an account has many benefits:

  • See order and shipping status
  • Track order history
  • Check out faster
Create an Account

Hyvä Themes Tutorial: Learn Magento 2 Frontend Development | Mironsoft

Hyvä Themes: The Complete Tutorial for Magento 2 Developers

Learn Hyvä Themes from the ground up: why it replaces Luma, KnockoutJS, and UI components, how Tailwind CSS v4 and Alpine.js work together, how Layout XML, ViewModels, and CSP work - demonstrated through a continuous own storefront page with a category filter.

Das lernst du

  • Why Hyvä Themes fully replaces Luma, KnockoutJS, jQuery, and UI components, and how the architecture of Tailwind CSS, Alpine.js, and PHP templates fits together
  • How to install Hyvä, set it up as a child theme, and deploy it through the correct four-step sequence
  • How Layout XML, ViewModels, the escaper, and the Content Security Policy (registerInlineScript) work together in Hyvä templates
  • How Tailwind CSS v4 is configured with its CSS-first approach, and how Alpine.js is used for interactivity
  • How to build an own storefront page step by step: module, route, controller, ViewModel, Tailwind template, and CSP-compliant Alpine filter logic
  • How to customize existing Magento pages (product page, checkout), optimize performance, migrate from Luma, and debug common errors

Voraussetzungen

  • Basic PHP knowledge is assumed, ideally with some Magento 2 experience - Hyvä-specific knowledge (Tailwind CSS, Alpine.js, Hyvä conventions) is built up completely from scratch in this series

Kapitel dieser Serie

  1. 1 What Is Hyvä Themes? Why No More Luma, KnockoutJS, or UI Components ~7 Min. Lesezeit
  2. 2 Architecture Overview: Tailwind CSS, Alpine.js, PHP Templates Without Heavy Framework Overhead ~7 Min. Lesezeit
  3. 3 Installing and Setting Up Hyvä: Parent Theme, Creating Your Own Child Theme ~8 Min. Lesezeit
  4. 4 Understanding Theme Structure: registration.php, theme.xml, view.xml, Directory Layout ~6 Min. Lesezeit
  5. 5 The Build Process: npm, Tailwind CSS v4's CSS-First Approach, the Watcher, and the Correct Deploy Sequence ~9 Min. Lesezeit
  6. 6 Layout XML in Hyvä: Blocks, Containers, and the getChildNames() Iteration ~7 Min. Lesezeit
  7. 7 ViewModels (ArgumentInterface) vs. Classic Block Classes - Why ViewModels Are Preferred ~8 Min. Lesezeit
  8. 8 Writing phtml Templates: the Escaper, Best Practices, No Raw Output Without Escaping ~7 Min. Lesezeit
  9. 9 Understanding Content Security Policy (CSP): registerInlineScript() in Detail ~8 Min. Lesezeit
  10. 10 Overriding Templates: Theme Fallback Conventions ~6 Min. Lesezeit
  11. 11 Tailwind CSS v4 Fundamentals in the Hyvä Context: CSS-First Configuration with @theme, Utility Classes ~8 Min. Lesezeit
  12. 12 Defining Your Own Design Tokens and Recurring Component Classes ~7 Min. Lesezeit
  13. 13 Responsive Design with Tailwind in Hyvä Templates ~7 Min. Lesezeit
  14. 14 Alpine.js Fundamentals in the Hyvä Context: x-data, x-show, x-on, x-model ~8 Min. Lesezeit
  15. 15 Understanding Existing Alpine Components in Hyvä: Mobile Menu and Mini Cart as Learning Examples ~8 Min. Lesezeit
  16. 16 Building Your Own Alpine Component: State, Events, Interactivity Without a Separate JS File ~8 Min. Lesezeit
  17. 17 Project Introduction: an Own Team Page with a Category Filter, Module and Page Concept ~7 Min. Lesezeit
  18. 18 Creating the Layout XML and Controller for the New Page ~8 Min. Lesezeit
  19. 19 Writing the ViewModel for the Team Data ~7 Min. Lesezeit
  20. 20 Styling the Template with Tailwind ~8 Min. Lesezeit
  21. 21 Integrating Alpine Filter Logic: Category Buttons, Live Filtering Without a Page Reload ~9 Min. Lesezeit
  22. 22 Correctly Registering and Testing the CSP-Compliant Inline Script ~7 Min. Lesezeit
  23. 23 Customizing the Product Detail Page in Hyvä (Custom Options, Gallery as an Example) ~8 Min. Lesezeit
  24. 24 Checkout in Hyvä: Structure and the Most Important Customization Points ~8 Min. Lesezeit
  25. 25 Performance Best Practices: Critical CSS, Lazy Loading, Why Hyvä Is Noticeably Faster Than Luma ~8 Min. Lesezeit
  26. 26 Migrating from Luma to Hyvä: Common Pitfalls ~8 Min. Lesezeit
  27. 27 The Correct Deploy Sequence in Detail and Why the Order Matters ~8 Min. Lesezeit
  28. 28 Common Errors and How to Debug Them (Missing registerInlineScript, CSP Violations, Stubborn Caches) ~9 Min. Lesezeit
  29. 29 Summary: A Cheat Sheet of the Most Important Hyvä Patterns From This Series ~9 Min. Lesezeit