Diese Serie hat mit der Frage "Was ist Hyvä?" begonnen und ist über Architektur, Templates, Tailwind, Alpine und ein vollständiges eigenes Projekt (die Team-Seite aus Block 5) bis hin zu Deployment und Debugging gegangen. Dieses letzte Kapitel fasst alle wichtigen Muster als Nachschlagewerk zusammen.

Die fünf Grundprinzipien

1. Hyvä ersetzt die Frontend-Schicht, nicht Magentos Kernarchitektur - Layout-XML, Blocks, DI bleiben unverändert (Kapitel 1-2).
2. ViewModels statt Block-Klassen für reine Datenversorgung (Kapitel 7).
3. Jede dynamische Ausgabe geht durch den Escaper - escapeHtml, escapeHtmlAttr, escapeUrl, escapeJs (Kapitel 8).
4. Jedes Inline-Skript braucht $hyvaCsp->registerInlineScript() direkt danach (Kapitel 9).
5. Die Deploy-Sequenz läuft immer in derselben Reihenfolge: Build → Löschen → Deploy → Cache-Flush (Kapitel 5, 27).

Spickzettel: Layout und Templates

<!-- ViewModel binden -->
<argument name="my_view_model" xsi:type="object">Vendor\Module\ViewModel\MyModel</argument>

<!-- Kind-Blocks iterieren (im Template) -->
<?php foreach ($block->getChildNames() as $name): ?>
    <?= $block->getChildHtml($name) ?>
<?php endforeach; ?>

Spickzettel: CSP

<script>
    /* ... Alpine-Initialisierung ... */
</script>
<?php $hyvaCsp->registerInlineScript(); ?>

Spickzettel: Tailwind

@import 'tailwindcss';

@theme {
  --color-brand-accent: #0ea5e9;
}

@layer components {
  .btn-primary { @apply rounded-lg bg-brand-accent px-5 py-2.5 text-white; }
}

Spickzettel: Alpine

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open" x-cloak>Inhalt</div>
</div>

<!-- Liste aus eingebetteten JSON-Daten -->
<template x-for="item in items" :key="item.id">
    <div x-text="item.name"></div>
</template>

Spickzettel: Deploy-Sequenz

bin/npm --prefix app/design/frontend/[Vendor]/[theme]/web/tailwind run build
cd src && rm -rf var/view_preprocessed/* pub/static/frontend/*
bin/magento setup:static-content:deploy de_DE -t [Vendor]/[theme] -f
bin/magento cache:flush

Das Team-Seiten-Projekt als Vorlage

Die sechs Kapitel des durchgehenden Projekts (17-22) - eigenes Modul, Route, Controller, ViewModel, Tailwind-Template, Alpine-Filterlogik mit CSP-Registrierung - lassen sich direkt als Vorlage für jede weitere eigene Storefront-Seite in einem Hyvä-Projekt verwenden. Die Reihenfolge bleibt dabei immer gleich: Struktur zuerst (Modul, Route, Controller), dann Daten (ViewModel), dann Aussehen (Tailwind-Template), dann Interaktivität (Alpine + CSP).

Neun goldene Regeln für die tägliche Arbeit

1. Kein Luma, kein KnockoutJS, kein jQuery, keine UI-Components - Hyvä-Konventionen konsequent durchziehen.
2. ViewModels statt eigener Block-Klassen, wo immer reine Datenversorgung reicht.
3. Jede dynamische Ausgabe im Template escapen - ausnahmslos.
4. Nach jedem Inline-<script>: sofort registerInlineScript().
5. getChildNames()-Iteration für Kind-Blocks beibehalten.
6. Tailwind-Konfiguration im CSS über @theme, nicht in einer separaten JS-Config.
7. @apply sparsam, erst ab drei bis vier identischen Wiederholungen.
8. Deploy-Sequenz immer in der festen Reihenfolge: Build → Löschen → Deploy → Cache-Flush.
9. Bei unerwartetem Verhalten zuerst die Browser-Konsole prüfen, erst danach im Code suchen.

Damit ist diese Serie abgeschlossen. Mit diesen Grundlagen lässt sich jede weitere Hyvä-Storefront-Seite - ob eigenes Modul wie die Team-Seite oder Anpassung einer Standard-Magento-Seite wie Produktdetailseite oder Checkout - strukturiert und mit Vertrauen in die zugrunde liegenden Muster umsetzen.