Bestehende Alpine-Komponenten in Hyvä verstehen: Mobile-Menu, Mini-Cart als Lernbeispiele

~8 Min. Lesezeit Zuletzt aktualisiert am 9. August 2026

Der schnellste Weg, ein neues Muster zu lernen, ist oft, ein bestehendes, funktionierendes Beispiel zu lesen. Zwei Komponenten, die in praktisch jedem Hyvä-Theme vorkommen und alle Grundlagen aus Kapitel 14 kombinieren: das Mobile-Menü und der Mini-Cart.

Das Mobile-Menü als Lernbeispiel

Ein typisches Mobile-Menü besteht aus einem Umschalt-Button und einem Panel, das ein- und ausgeblendet wird - genau das Muster aus Kapitel 14, nur mit ein paar zusätzlichen Details für Barrierefreiheit und Body-Scroll-Sperrung:

<div x-data="{ mobileMenuOpen: false }">
    <button
        type="button"
        @click="mobileMenuOpen = !mobileMenuOpen"
        :aria-expanded="mobileMenuOpen"
        aria-label="Menü öffnen"
        class="lg:hidden"
    >
        <span x-show="!mobileMenuOpen">☰</span>
        <span x-show="mobileMenuOpen">✕</span>
    </button>

    <nav
        x-show="mobileMenuOpen"
        x-cloak
        @click.outside="mobileMenuOpen = false"
        class="fixed inset-0 z-40 bg-white p-6"
    >
        <!-- Menüpunkte -->
    </nav>
</div>

Neue Details gegenüber Kapitel 14: :aria-expanded (Kurzform für x-bind:aria-expanded) bindet ein HTML-Attribut dynamisch an einen Alpine-Wert - wichtig für Screenreader. @click.outside schließt das Menü, sobald irgendwo außerhalb geklickt wird. x-cloak verhindert ein kurzes Aufblitzen des ungestylten Elements, bevor Alpine geladen ist (per CSS-Regel [x-cloak] { display: none; }, die im Hyvä-Basis-CSS bereits enthalten ist).

Der Mini-Cart als Lernbeispiel

Der Mini-Cart zeigt ein weiteres wichtiges Muster: Zustand, der nicht rein clientseitig entsteht, sondern von einer serverseitigen Datenquelle stammt. Der anfängliche Warenkorb-Inhalt wird beim Laden der Seite bereits als PHP-Array (über ein ViewModel) mitgeliefert und als JSON in x-data eingebettet:

Vereinfachtes Prinzip des Mini-Cart-Musters

<?php
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\Framework\Serialize\Serializer\Json $json */
?>
<div x-data="{ items: <?= /* @noEscape */ $json->serialize($cartViewModel->getCartData()) ?> }">
    <span x-text="items.length"></span>
</div>

Dieses Muster - serverseitig gerenderte Startdaten als JSON in x-data einbetten, danach clientseitig damit weiterarbeiten - ist der Standardweg, um Alpine mit "echten" Magento-Daten zu füttern, ohne einen zusätzlichen AJAX-Request beim ersten Laden der Seite zu brauchen.

Achtung: JSON, das in ein x-data-Attribut eingebettet wird, muss über einen echten JSON-Serializer erzeugt werden (z. B. \Magento\Framework\Serialize\Serializer\Json), nicht per manueller String-Verkettung - sonst drohen kaputtes JSON oder XSS-Lücken über nicht escapte Anführungszeichen.

Was wir daraus für die Team-Seite mitnehmen

Für unsere eigene Team-Seite ab Kapitel 17 nutzen wir ein ganz ähnliches Muster: Die Team-Mitglieder-Daten kommen aus dem ViewModel, werden als JSON in ein x-data-Attribut eingebettet, und die Kategorie-Filterung passiert danach komplett clientseitig in Alpine - ohne Page-Reload und ohne zusätzlichen Server-Request.

Vorheriges Kapitel Alpine.js Grundlagen im Hyvä-Kontext: x-data, x-show, x-on, x-model Nächstes Kapitel Eigene Alpine-Komponente bauen: State, Events, Interaktivität ohne separate JS-Datei