Emico ist bereits seit vielen Jahren der offizielle Partner von Tweakwise und gleichzeitig Entwickler und Verwalter der Tweakwise-Module für Magento 1 und 2. Gemeinsam mit ihm haben wir daher das Projekt in Angriff genommen, ein Compatibility-Modul für Hyvä Themes zu entwickeln. Dazu haben wir das Frontend des Moduls passend zu dem Stack umgeschrieben, der im Hyvä Theme verwendet wird.
Hyvä Themes bietet eine gute Lösung für die beiden größten wunden Punkte des Magento 2 native Frontend (Luma Theme). Zunächst wurde durch vollständiges Zusammenstreichen und Neuaufbauen unter Nutzung von Lightweight Libraries die Geschwindigkeit des Themas out-of-the-box deutlich besser. Darüber hinaus ist die Entwicklung deutlich einfacher und angenehmer, da der verwendete moderne Stack eine recht große Community hinter sich hat und sehr gut dokumentiert ist. Dies führt automatisch zu einer schnelleren Time-to-Market und mehr Flexibilität bei der Entwicklung.
Ein Beispiel für eine Tweakwise-Suche im Standard-Hyvä-Theme.
Das Hyvä-Themes-Paket besteht aus mehreren Modulen, die das Frontend von Magento 2 vollständig ersetzen. Die grundlegende Technik für den Aufbau von Vorlagen ist identisch zum Magento 2 native Frontend (Luma Theme), das läuft immer noch mit Layout-Anweisungen über XML und Vorlagen in PHTML-Dateien. Jedoch wurden alle schweren und veralteten Javascript-Libraries (RequireJS, KnockoutJS und jQuery) und Stylingtechniken (LESS) durch einen modernen Stack von Alpine.js und Tailwind CSS ersetzt.
Im Hyvä Theme wird vor allem das moderne Vanilla Javascript genutzt. Zum Initialisieren der Javascript-Funktionen und beispielsweise dem Updaten eines Preises oder dem Auf- oder Zuklappen einer gruppierten Liste wurde der leichte Framework Alpine.js gewählt. Dieser Framework ist nur 9 Kilobyte groß und das einzige 3rd-Party-Javascript, das standardmäßig geladen wird.
„Hyvä Themes wird sich in Kürze zu einer der führenden Frontend-Plattformen für Magento 2 entwickeln. Für uns war es nur logisch, schnell darauf zu reagieren! Mit der Hyvä-Partnerschaft setzen wir auf problemlose Integration, vollständige Unterstützung unserer Funktionen und optimalen Support bei Implementierungen. Wir sind stolz auf diese Integration und freuen uns auf die Zusammenarbeit!“
Tailwind CSS ist ein „Utility First CSS Framework“, es sind also viele Classes für das am häufigsten vorkommende Styling vordefiniert; diese können in HTML zum Styling von Elementen verwendet werden. Darüber hinaus wird dieses CSS via PostCSS aufgebaut und auf Grundlage der tatsächlich verwendeten Elemente aufgeräumt, sodass letztendlich nur noch ganz wenig CSS vorhanden ist.
Welche Vorteile bietet das? Im Allgemeinen wird eine Verkleinerung der kb-Größe bei den verwendeten JS- und CSS-Dateien um mindestens 90 % und ein Google-Lighthouse-Score von weit über 80 ohne weitere Optimierungen erreicht. Darüber hinaus ist die „Lernkurve“ nicht so steil wie bei vielen anderen neuen Techniken.
Bei Emico haben wir diese Entwicklungen mit großem Interesse verfolgt. Nachdem wir vor Kurzem die Implementierung eines neuen Frontends auf Grundlage von Hyvä Themes gestartet haben, kam schnell der Wunsch nach einer Tweakwise-Implementierung auf; parallel zum Wachstum der Hyvä-Community wurde der Ruf nach einem Compatibility-Modul für Tweakwise immer lauter, das mit dem Hyvä-Stack kompatibel ist. Dieses Projekt haben wir dann mit Begeisterung in Angriff genommen.
Ein Beispiel für den Tweakwise-Preisfilter auf mobilen Geräten im Hyvä-Standardthema, inklusive superschneller Änderung der Sortierreihenfolge.
Für die Entwicklung des Emico Magento 2 Tweakwise-Compatibility-Moduls mussten wir das komplette Frontend neu schreiben, damit es zu den verwendeten Techniken in Hyvä Themes kompatibel wurde. Alle Filterfunktionen wurden in Vanilla Javascript in Kombination mit Alpine.js neu entwickelt, wobei die Funktionsweise unverändert blieb. Darüber hinaus haben wir das Standardstyling des Themas in unseren Modulvorlagen fortgesetzt, sodass diese out-of-the-box nahtlos an das Aussehen von Hyvä anschließen.
Der Backend-Code ist unverändert geblieben und das Compatibility-Modul funktioniert als Ergänzung zum Standardmodul, wobei nur die Frontend-Teile über XML mit den Hyvä-kompatiblen Vorlagen überschrieben werden. Dabei haben wir eine Trennung vorgenommen: Die Dateien, in denen die Javascript-Funktionen erfasst sind, sind von den Vorlagen, die du beim Entwickeln eventuell mit deinen eigenen Tailwind CSS-Styles anpassen möchtest, getrennt. So werden Nutzung und Implementierung dieses Moduls niedrigschwellig und weniger anfällig für Probleme, die beim Updaten des Moduls auf eine neuere Version entstehen können.
Die Hyvä-Integration ist sofort verfügbar und wird kostenfrei über Github/Packagist vertrieben. Möchtest du Feedback geben oder hast du ein Problem?
Erwirb eine Tweakwise-Lizenz, bevor du mit den Tests beginnst.
Abonniere den Tweakwise-Newsletter und bleibe auf dem Laufenden bei Updates, Events, Webinaren, Awards und anderen Neuigkeiten!
