Emico Magento 2 Tweakwise compatibility module voor Hyvä Themes - Tweakwise
Hyva themes

Emico Magento 2 Tweakwise compatibility module voor Hyvä Themes

Emico is al jaren de officiële partner van Tweakwise, en tevens ontwikkelaar en beheerder van de Tweakwise modules voor Magento 1 & 2. In die hoedanigheid hebben we het project opgepakt om een Hyvä Themes Compatibility module te bouwen. Hiervoor hebben we de front-end van de module herschreven in lijn met de stack die gebruikt wordt in het Hyvä Thema.
Hyva & Tweakwise

Hyvä

Hyvä Themes biedt een goede oplossing voor de twee grootste pijnpunten van de Magento 2 native front-end (Luma theme). Allereerst is door het volledig uitkleden en opnieuw opbouwen met gebruik van lightweight libraries de snelheid van het thema out of the box vele malen beter. Daarnaast is de ontwikkeling een stuk eenvoudiger en prettiger, omdat de moderne stack waar gebruik van is gemaakt een flinke community achter zich heeft en zeer goed gedocumenteerd is. Wat automatisch resulteert in een een snellere time to market en meer flexibiliteit tijdens de ontwikkeling.
Hyva Tweakwise search

Een voorbeeld van Tweakwise search binnen het standaard Hyvä Thema

Het Hyvä Themes pakket bestaan uit een aantal modules die de front-end van Magento 2 volledig vervangen. De basistechniek voor de opbouw van templates is gelijk gebleven aan de Magento 2 native front-end (Luma theme), dit gaat nog steeds met layout instructions via XML en templating in PHTML files. Echter zijn alle zware en verouderde Javascript libraries (RequireJS, KnockoutJS en jQuery) en styling technieken (LESS) vervangen voor een moderne stack van Alpine.js en Tailwind CSS.
In het Hyvä Thema wordt vooral gebruikt gemaakt van moderne vanilla Javascript. Voor het initialiseren van de Javascript functionaliteiten en bijvoorbeeld het updaten van een prijs, of het open en dichtklappen van een accordeon is gekozen voor het lichtgewicht framework Alpine.js. Dit framework is slechts 9 kilobytes groot en de enige 3rd party Javascript die standaard geladen wordt.

"Hyvä Themes zal op korte termijn uitgroeien tot een van de leading front-end platformen voor Magento 2. Voor ons was de keuze logisch hier snel op in te spelen! Met het Hyvä partnership committeren we ons aan een soepele integratie, volledige ondersteuning van onze feature set en optimale support bij integraties. Wij zijn trots op deze integratie en kijken uit naar de samenwerking!"

Tailwind CSS is een “utility-first CSS framework”, dit houdt in dat er veel classes zijn voorgedefinieerd voor de meest voorkomende styling, deze kunnen worden gebruikt in de HTML om elementen te stylen. Daarna wordt deze CSS wordt via PostCSS opgebouwd en opgeschoond op basis van daadwerkelijk gebruikte onderdelen en daardoor blijft er slechts een klein beetje CSS over.
Wat win je hier dan precies mee? Over het algemeen een vermindering van minimaal 90% van het aantal en kb’s aan JS en CSS bestanden die over de lijn moeten en een Google Lighthouse score van ver boven de 80 zonder verdere optimalisaties. Daarnaast is de “learning curve” niet zo steil als bij veel andere nieuwe technieken.

De Emico Magento 2 Tweakwise compatibility module

Vanuit Emico hebben we deze ontwikkelingen met veel interesse gevolgd. Nadat we onlangs zijn gestart het integreren van een nieuwe front-end gebaseerd op Hyvä Themes ontstond er al snel de wens voor een Tweakwise integratie en naarmate de Hyvä community groeide kwamen er steeds meer geluiden dat er behoefte was aan een compatibility module voor Tweakwise welke compatible is met de Hyvä stack. Dit project hebben we dan ook met veel plezier opgepakt.

Een voorbeeld van de Tweakwise prijsfilter op mobiel binnen het standaard Hyvä Thema. Inclusief super snelle wijziging van sorteer volgorde.

Voor de bouw van de Emico Magento 2 Tweakwise compatibility module hebben we de volledige front-end moeten herschrijven om deze compatibel te maken met de gebruikte technieken binnen het Hyvä Thema. Alle filter functionaliteit is opnieuw ontwikkeld in vanilla Javascript in combinatie met Alpine.js, waarbij de werking ongemoeid is gebleven. Daarnaast hebben we de standaard styling van het thema doorgetrokken in onze module templates, zodat deze out of the box naadloos aansluit op het uiterlijk van Hyvä.

De back-end code is intact gebleven en de compatibility module werkt als toevoeging op de standaard module, waarbij alleen de front-end onderdelen via XML worden overschreven met de Hyvä compatible templates. Hierbij hebben we een scheiding gemaakt tussen de bestanden waar de stukken Javascript voor de functionaliteiten in staan en de templates die je tijdens het ontwikkelen wellicht wil aanpassen met eigen Tailwind CSS styles. Dit maakt het gebruik en de integratie van deze module laagdrempelig en minder gevoelig voor issues die kunnen ontstaan tijdens het updaten van de module naar een nieuwere versie.

De Hyva integratie is per direct beschikbaar en wordt kostenloos via Github/Packagist gedistribueerd. Heb je feedback of loop je tegen zaken aan?

Sluit een Tweakwise licensie af voordat je gaat testen.

Benieuwd naar Tweakwise?
Ben je nieuwsgierig geworden hoe Tweakwise jouw webshopconversie met 15% kan verhogen? Neem contact met ons op voor een gratis demo.
Tweakwise E-man

Geef jouw shop een boost met Tweakwise!

Eenvoudig integreren met een krachtig script of naadloos aansluiten op elk platform

Tweakwise werkt op alle e-commerce platformen, inclusief je eigen maatwerk platform gebouwd met PHP, JavaScript, Python, C#, Java, Ruby (on Rails), Go, Kotlin, Swift of elke andere programmeertaal. Bekijk de volledige lijst en neem vooral contact op als je jouw platform niet ziet staan.