Die Team-Seite ist funktional fertig - fehlt nur noch ein entscheidender Schritt aus Kapitel 9: Das Inline-<script> aus Kapitel 21 muss per $hyvaCsp->registerInlineScript() registriert werden, sonst blockiert die strikte CSP des Parent-Themes es im Browser lautlos.

Die Registrierung ergänzen

Direkt nach dem </script>-Tag aus Kapitel 21 kommt die Registrierung dazu - $hyvaCsp steht dabei genau wie $escaper als Standard-Variable in jedem Hyvä-Template zur Verfügung:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('teamFilter', (members) => ({
            /* ... wie in Kapitel 21 ... */
        }));
    });
</script>
<?php $hyvaCsp->registerInlineScript(); ?>

Das vollständige Template im Überblick

Zusammengefasst besteht team/index.phtml jetzt aus vier Teilen, in dieser Reihenfolge:

1. PHP-Kopf mit @var-Annotationen und Zugriff auf ViewModel + JSON-Serializer (Kapitel 19-21).
2. HTML-Struktur: Überschrift, Kategorie-Buttons, Alpine-x-for-Grid (Kapitel 20-21).
3. Inline-<script> mit der Alpine.data('teamFilter', ...)-Komponente (Kapitel 21).
4. $hyvaCsp->registerInlineScript(); direkt danach (dieses Kapitel).

Testen: ohne und mit Registrierung

Um den Effekt der Registrierung wirklich zu sehen, lohnt sich ein bewusster Test: Wird die Zeile $hyvaCsp->registerInlineScript(); testweise entfernt und die Seite neu geladen, verschwindet die Filter-Funktion - die Kategorie-Buttons reagieren nicht mehr auf Klicks, obwohl im Template augenscheinlich nichts kaputt ist.

Den vollständigen Flow noch einmal testen

bin/cache-clean
# Browser: /team aufrufen
# 1. Grid zeigt alle vier Team-Mitglieder
# 2. Klick auf "Entwicklung" -> nur Anna und David sichtbar
# 3. Klick auf "Alle" -> wieder alle vier sichtbar
# 4. Netzwerk-Tab der Entwicklertools: kein Request bei Klick
# 5. Konsole der Entwicklertools: keine CSP-Verletzungsmeldung

Das durchgehende Projekt abgeschlossen

Damit ist die Team-Seite vollständig: eigenes Modul, Route und Controller, ein ViewModel mit sauber getrennten Daten, ein responsives Tailwind-Template, clientseitige Alpine-Filterung und eine korrekt registrierte CSP-konforme Inline-Skript-Registrierung. Block 6 wendet dieses Wissen jetzt auf bestehende Magento-Standardseiten an - Produktdetailseite, Checkout und Performance.