Produktdetailseite in Hyvä anpassen (Custom-Optionen, Galerie als Beispiel)
Produktdetailseite in Hyvä anpassen (Custom-Optionen, Galerie als Beispiel)
~8 Min. Lesezeit Zuletzt aktualisiert am 9. August 2026
Nach dem eigenen Team-Seiten-Modul schauen wir uns jetzt an, wie dasselbe Wissen (Layout-XML, ViewModel, Alpine, CSP) auf eine bestehende Magento-Standardseite angewendet wird - die Produktdetailseite. Statt eines eigenen Moduls arbeiten wir hier meist mit gezielten Layout-XML-Anpassungen und Template-Overrides (Kapitel 10).
Die Bildergalerie als Alpine-Komponente
Hyväs Standard-Produktgalerie ist selbst eine Alpine-Komponente: Hauptbild, Thumbnails, Zoom und Lightbox-Ansicht laufen komplett clientseitig, mit den Bild-URLs bereits serverseitig (über ein ViewModel) als JSON eingebettet - dasselbe Muster wie beim Mini-Cart aus Kapitel 15 und der Team-Filterung aus Kapitel 21.
<div x-data="initGallery(<?= /* @noEscape */ $json->serialize($galleryImages) ?>)">
<img :src="activeImage.full" class="w-full rounded-xl">
<div class="mt-4 flex gap-2">
<template x-for="image in images" :key="image.id">
<button @click="activeImage = image">
<img :src="image.thumbnail" class="h-16 w-16 rounded-lg object-cover">
</button>
</template>
</div>
</div>Wer die Galerie anpassen möchte (z. B. ein anderes Zoom-Verhalten oder eine andere Thumbnail-Anordnung), überschreibt in der Regel gezielt das Galerie-Template im eigenen Theme-Ordner (Kapitel 10), statt die komplette Produktseite neu zu bauen.
Custom-Optionen: Formularfelder mit x-model
Produkte mit Custom-Optionen (Text, Auswahl, Datei-Upload) nutzen für die Live-Preisberechnung genau das x-model-Muster aus Kapitel 14: Jede Änderung an einer Option aktualisiert sofort den angezeigten Gesamtpreis, ohne Page-Reload.
<div x-data="{ selectedOption: null, basePrice: 49.90 }">
<select x-model="selectedOption">
<option value="">Bitte wählen</option>
<option value="gravur">Mit Gravur (+9,90 €)</option>
</select>
<p>Gesamtpreis: <span x-text="(basePrice + (selectedOption === 'gravur' ? 9.9 : 0)).toFixed(2)"></span> €</p>
</div>Tipp: Für komplexere Preisberechnungen mit vielen Optionen lohnt sich - genau wie beim Akkordeon-Beispiel aus Kapitel 16 - eine benannte Alpine.data()-Komponente statt eines wachsenden Inline-Objekts.
Was nicht angefasst werden sollte
Bei aller Anpassungsfreude: Kern-Funktionen wie Warenkorb-Validierung, Preisberechnung mit Steuern und Rabatten oder Lagerbestandsprüfung bleiben serverseitige Magento-Logik (Backend-Validierung beim Hinzufügen zum Warenkorb). Die clientseitige Alpine-Preisvorschau ist nur eine Anzeige-Optimierung für bessere UX - sie ersetzt nicht die serverseitige Validierung.
Achtung: Wer eigene Preisberechnung nur clientseitig in Alpine implementiert und sich darauf verlässt, öffnet eine Sicherheitslücke: Ein Angreifer kann den finalen Preis über Browser-Entwicklertools manipulieren, bevor der Request an den Server geht. Die serverseitige Preisberechnung in Magentos Custom-Options-Verarbeitung bleibt die verbindliche Quelle - Alpine zeigt nur eine Vorschau.