Tag: Hyvä

1. Hyvä GraphQL-Queries im Frontend einbinden und cachen

   05.02.2025

   Wer in Hyvä-Themes eigene Frontend-Bausteine wie Produktempfehlungen, individuelle Widgets oder Filterlogik baut, kommt an eigenen Hyvä GraphQL-Queries kaum vorbei. Richtig strukturiert, serverseitig vorgeladen und mehrstufig gecacht, liefern sie Daten schnell nach, ohne Full Page Cache und Ladezeiten zu gefährden.

   Read more

2. Hyvä Store-Switcher & Währungsumschalter: Alpine-Dropdown Tutorial

   09.01.2025

   Der Store-Switcher und der Währungsumschalter im Header sind keine gewöhnlichen Dropdowns: Beide müssen einen echten Formular-Submit an einen Magento-Controller auslösen, damit Cookie und Session serverseitig aktualisiert werden und den Seiten-Reload überstehen. Dieser Artikel zeigt, wie man beide Komponenten als zugängliches Alpine.js-Dropdown im Hyvä-Header baut, inklusive ARIA-Listbox-Pattern, Tastatursteuerung, Gruppierung nach Website bei vielen Store Views und CSP-konformer Inline-Registrierung, ganz ohne zusätzliches JavaScript-Bundle.

   Read more

3. Hyvä-Watcher und Hot-Reload im lokalen Docker-Setup einrichten

   05.01.2025

   Ein funktionierender Hot-Reload-Loop entscheidet im Hyvä-Alltag darüber, ob eine Layout-Anpassung in Sekunden sichtbar wird oder erst nach einem manuellen Deploy-Zyklus. Der Hyvä-Watcher läuft im Hintergrund des Docker-Containers, beobachtet phtml-, CSS- und JS-Dateien über einen Bind-Mount und stößt bei jeder Änderung automatisch einen Tailwind-Rebuild sowie die Regeneration des view_preprocessed-Verzeichnisses an, ganz ohne setup:static-content:deploy. Wer die Mechanik dahinter kennt, inotify-Limits richtig setzt und den Watcher-Status sauber prüfen kann, spart im Entwicklungsalltag täglich Stunden gegenüber dem klassischen Production-Build-Zyklus.

   Read more

4. Live-Search-Autocomplete im Hyvä-Header integrieren

   05.01.2025

   Die Standard-Suchbox von Hyvä springt erst nach Enter zur Ergebnisliste und zeigt während der Eingabe keine Vorschläge. Live-Search-Autocomplete im Hyvä-Header schließt genau diese Lücke: eine GraphQL-Suggestion-Query liefert Produkte, Kategorien und Preise, eine schlanke Alpine.js-Komponente steuert Debounce, Request-Cancellation und Tastatur-Navigation, und ein CSP-konformes Rendering hält den Shop dabei sicher und performant.

   Read more