Hyvä Themes
Magento Frontend neu gedacht
Das neue Magento-Frontend
Hyvä Themes ist ein neuer Ansatz einer Software-Lösung für das Frontend von Magento, welcher eine starke Performance mit einem simplen Design vereint. Mit dem Ziel die Abhängigkeit von Drittmodulen und die Komplexität in der Entwicklung zu verringern, wurde Hyvä von unserem Kollegen Willem Wigman konzipiert und die Entwicklung gestartet. Wir setzen es nun in einigen Projekten ein und sind als technischer Partner an der Weiterentwicklung von Hyvä beteiligt. Dieses neue Frontend basiert auf TailwindCSS und Alpine JS, wodurch ein einzigartiges User Interface mit schnellen und flexiblen Magento Themes leicht gestaltet werden kann.
Als Ergänzung zu Hyvä Themes gibt es einen auf React basierten Checkout, der unter dem Namen Hyvä Checkout als kostenloses, Open-Source-Modul zur Verfügung steht und in sämtlichen Magento 2 Shops – unabhängig von Hyvä Themes – eingesetzt werden kann. Ebenfalls Open Source und kostenlos gibt es Hyvä Admin, was in Zusammenarbeit mit Vinai Kopp entwickelt wurde.
Das macht Hyvä Themes aus
Starke Performance
Durch den schlank gehaltenen Code punktet Hyvä Themes mit geringen Ladezeiten und erzielt standardmäßig einen Google Lighthouse Score von über 90, auch auf mobilen Endgeräten. Mit diesem Score wird die Basis für ein gutes Ranking in Suchmaschinen gelegt.
Reduzierte Komplexität
Basierend auf TailwindCSS und AlpineJS wird auf den Ballast enormer Mengen an Code verzichtet, um mit Hyvä ein Frontend Theme mit starkem Design und flexiblen Möglichkeiten bei der individuellen Gestaltung des Online-Shops zu schaffen.
Reduzierte Abhängigkeit
Hyvä Themes reduziert die Abhängigkeit zu Code-Bibliotheken von Drittanbietern. Zusätzlich schafft Hyvä Themes eine Alternative zu Luma und PWA, die es ermöglicht optimal auf die individuellen Anforderungen unterschiedlicher Shops einzugehen.
Entwicklerorientierung
Mit Hyvä Themes gibt es eine Alternative in der Entwicklung zu JavaScript basierten Lösungen. Trotz des modernen Frontend-Stacks bleibt viel des klassischen Magento-Frontends erhalten, das allen vertraut ist, die Erfahrung mit den Luma/Blank-Themes von Magento 2 haben.
Die Ausgangssituation für Hyvä
Die E-Commerce-Plattform Magento überzeugt mit vielen Stärken, wie beispielsweise der Flexibilität für Anpassungen und der Multistore-Funktionalität für internationale Online-Shops. Das Frontend von Magento zählt dabei leider nicht zu den Stärken des Systems. Weder das traditionelle Frontend Luma, noch der moderne PWA-Ansatz sind frei von Problemen.
Das eigene Magento 2 Frontend Luma galt schon bei der Veröffentlichung als veraltet. Zur Unterstützung dynamischer Komponenten hat Magento die UI Components eingeführt, welche den Umgang mit vielen einzelnen Komponenten und Erweiterungen ermöglichen. Im Checkout und Admin-Bereich sind diese eingesetzt und anfangs gab es Pläne diese auf das gesamte Frontend zu erweitern. Das Problem: UI Components sind sehr komplex, wodurch ein enormer Mehraufwand in der Entwicklung entsteht. Selbst erfahrene Entwickler*innen brauchen viel Einarbeitungszeit, um vermeintlich kleine Anpassungen umzusetzen. Generell basiert das Luma-Theme auf bewerten Technologien, die jedoch nicht mehr zeitgemäß sind. Das größte Problem ist die große Menge an JavaScript-Code, der für lange Ladezeiten sorgt und nur mit viel Aufwand optimiert werden kann.
Abhilfe soll die neue PWA-Technologie schaffen, die die Vorteile von nativen Apps mit einer Webseite verbinden. Aber auch PWA leiden unter großen Mengen an JavaScript-Code. Unsere Erfahrungen haben gezeigt, dass PWA nur dann eine stabile Basis bieten, wenn man entweder nah am Standard der jeweiligen PWA-Lösung bleibt und mit dem begrenzten Feature-Set zufrieden ist oder man ein umfangreiches Budget zur Verfügung steht, welches umfangreiche individuelle Feature-Entwicklung ermöglicht. Zudem ist der Entwicklungsaufwand bei PWA sehr hoch, da es keine reine Frontend-Web-Entwicklung ist, sondern umfangreiche Fähigkeiten und Einarbeitung auch in Themen der Backend-Entwicklung gefragt sind.
Aus diesen Gründen waren für uns weder Luma noch PWA-Technologien eine zufriedenstellende Lösung. Insbesondere kleine und mittelständische Händler bleiben bei diesen Optionen auf der Strecke, was für uns nicht akzeptabel war und uns motiviert hat, das Problem selbst in die Hand zu nehmen. Was daraus geworden ist? Hyvä!
Luma Demo
Vue Storefront PWA Demo
Hyvä Demo
Die Funktionen von Hyvä Themes
Verschaffen Sie sich einen Überblick über die bereits implementierten Funktionen von Hyvä Themes, darüber, was aktuell in Arbeit ist und bald zu erwarten ist und die Funktionen, die zukünftig dazu kommen.
Produktbilder
Funktion |
verfügbar |
kommt bald |
in Planung |
| Mehrere Bilder | x | ||
| Zoom-In | x | ||
| Wasserzeichen | x |
Preisgestaltung
Funktion |
verfügbar |
kommt bald |
in Planung |
| Staffelpreise | x | ||
| Kundengruppen-Preise | x | ||
| Geissweb EU VAT Enhanced | x |
Produktdetailseiten
Funktion |
verfügbar |
kommt bald |
in Planung |
| Benachrichtigung bei Nichtverfügbarkeit | x | ||
| Produktbewertungen | x | ||
| Benutzerdefinierte Optionen | x | ||
| Lagerverfügbarkeit | x | ||
| Swatches | x | ||
| Auswahl der Produktoptionen | x | ||
| Herunterladbare Produktproben | x |
Kategorien
Funktion |
verfügbar |
kommt bald |
in Planung |
| Kategorie-Landingpage | x | ||
| Kacheln Produktübersicht | x | ||
| Listen Produktübersicht | x | ||
| Swatches | x |
Content Management
Funktion |
verfügbar |
kommt bald |
in Planung |
| CMS Widgets | x | ||
| Accessibility-Features | x |
Marketing
Funktion |
verfügbar |
kommt bald |
in Planung |
| Newsletter-Anmeldung | x | ||
| Katalog Preisregeln | x | ||
| Upselling-Features | x | ||
| Yireo Google Tag Manager | x | ||
| Warenkorb-Preisregeln | x | ||
| Integer_net Cookie Consent | x | ||
| Cross-Selling-Features | x |
Kundenaccount
Funktion |
verfügbar |
kommt bald |
in Planung |
| Dashboard | x | ||
| Standard Rechnungs- und Versandadresse | x | ||
| Adressbuch | x | ||
| Status der Bestellung | x | ||
| Bestellhistorie | x | ||
| Nachbestellen | x | ||
| Kürzlich bestellte Artikel | x | ||
| Verwaltung Newsletter-Abonnement | x | ||
| Produktbewertungshistorie | x | ||
| Zugriff auf herunterladbare/digitale Produkte | x | ||
| Wunschliste | x | ||
| Teilen der Wunschliste | x | ||
| Dropdown-Menü in Header | x |
Kunden-Features
Funktion |
verfügbar |
kommt bald |
in Planung |
| Kontaktformular | x | ||
| Produktvergleich | x |
Seitenstruktur & Navigation
Funktion |
verfügbar |
kommt bald |
in Planung |
| Suchfunktion | x | ||
| Erweiterte Suche | x | ||
| Autovervollständigung der Suche | x | ||
| Breadcrumbs | x | ||
| Filter Navigation | x | ||
| CAPTCHA | x | ||
| Mega-Menü | x | ||
| Sprach-Switch | x | ||
| Währungs-Switch | x | ||
| Mehrfachauswahl in Filtern | x | ||
| EU Cookie-Benachrichtigung | x |
Check-Out und Warenkorb
Funktion |
verfügbar |
kommt bald |
in Planung |
| One-Page Checkout | x | ||
| Gast Checkout | x | ||
| Registrierter Checkout | x | ||
| Geschätzte Versandkosten | x | ||
| Persistenter Einkaufswagen | x |
Die Funktionen von Hyvä Themes
Verschaffen Sie sich einen Überblick über die bereits implementierten Funktionen von Hyvä Themes, darüber, was aktuell in Arbeit ist und bald zu erwarten ist und die Funktionen, die zukünftig dazu kommen.v
Produktbilder
Funktion |
|
| Mehrere Bilder | ✔️ |
| Zoom-In | ✔️ |
| Wasserzeichen | ✔️ |
Preisgestaltung
Funktion |
|
| Staffelpreise | ✔️ |
| Kundengruppen Preise | ✔️ |
| Geissweb EU -VAT Enhanced | ⏳ |
Produktdetailseiten
Funktion |
|
| Benachrichtigung bei Nichtverfügbarkeit | ✔️ |
| Produktbewertungen | ✔️ |
| Benutzerdefinierte Optionen | ✔️ |
| Lagerverfügbarkeit | 🔜 |
| Swatches | ⏳ |
| Auswahl der Produktoptionen | ⏳ |
| Herunterladbare Produktproben | ⏳ |
Kategorien
Funktion |
|
| Kategorie-Landingpages | ✔️ |
| Kacheln Produktübersicht | ✔️ |
| Listen Produktübersicht | 🔜 |
| Swatches | ⏳ |
Content Management
Funktion |
|
| CMS Widgets | 🔜 |
| Accesibility-Features | ⏳ |
Marketing
Funktion |
|
| Newsletter Anmeldung | ✔️ |
| Katalog Preisregeln | ✔️ |
| Upselling-Features | ✔️ |
| Yireo Google Tag Manager | ✔️ |
| Warenkorb Preisregeln | ✔️ |
| Integer_net Cookie Consent | 🔜 |
| Crossselling-Features | ⏳ |
Kundenaccount
Funktion |
|
| Dashboard | ✔️ |
| Standard Rechnungs- und Versandadresse | ✔️ |
| Adressbuch | ✔️ |
| Status der Bestellung | ✔️ |
| Bestellhistorie | ✔️ |
| Nachbestellen | ✔️ |
| Kürzlich bestellte Artikel | ✔️ |
| Verwaltung Newsletter-Abonnement | ✔️ |
| Produktbewertungs-historie | ✔️ |
| Zugriff auf herunterladbare/ digitale Produkte | ✔️ |
| Wunschliste | ✔️ |
| Teilen der Wunschliste | ✔️ |
| Dropdown im Header | 🔜 |
Kunden-Features
Funktion |
|
| Kontaktformular | ✔️ |
| Produktvergleich | ⏳ |
Seitenstruktur & Navigation
Funktion |
|
| Suchfunktion | ✔️ |
| Erweiterte Suche | ✔️ |
| Autovervollständigung der Suche | ✔️ |
| Breadcrumbs | ✔️ |
| Filter Navigation | ✔️ |
| CAPTCHA | ✔️ |
| Mega-Menü | 🔜 |
| Sprachen-Switch | 🔜 |
| Währungs-Switch | 🔜 |
| Mehrfachauswahl Filter | ⏳ |
| EU Cookie-Benachrichtigung | ⏳ |
Check-Out und Warenkorb
Funktion |
|
| One-Page Checkout | ✔️ |
| Gast Checkout | ✔️ |
| Registrierter Checkout | ✔️ |
| Geschätzte Versandkosten | 🔜 |
| Persistenter Einkaufswagen | ⏳ |
Unser Hyvä Themes Blog
Das ist Willem Wigman – der Erfinder von Hyvä
Willem ist bereits seit einigen Jahren Teil des Teams von integer_net und ist der Kopf hinter Hyvä. Die Vision: ein Magento Frontend, welches kurze Ladezeiten ermöglicht, flexibel und gut zu gestalten ist. Eine zuverlässige Basis, die die Umsetzung der Kundenwünsche und individuelle Designs effizient ermöglicht. Unter Willems Leitung wurde die Idee in die Tat umgesetzt. Bei der Entwicklung wird viel Wert auf den simplen Aufbau gelegt, der eine optimale Grundlage für die Weiterentwicklung bietet. Aktuell wird Hyvä Themes schon in einigen unserer Kundenprojekte eingesetzt.
Sie möchten ein unverbindliches Angebot einholen oder haben eine Frage zu Hyvä? Dann melden Sie sich jetzt bei uns!
Andreas von Studnitz
Geschäftsführung