Nieuwsbericht

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.

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.

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 implementaties. Wij zijn trots op deze integratie en kijken uit naar de samenwerking!"
Ronald Meeuwissen - Tweakwise Partner Platforms

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 implementeren van een nieuwe front-end gebaseerd op Hyvä Themes ontstond er al snel de wens voor een Tweakwise implementatie 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 implementatie van deze module laagdrempelig en minder gevoelig voor issues die kunnen ontstaan tijdens het updaten van de module naar een nieuwere versie.

Direct aan de slag met Hyvä en Tweakwise

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.

Tweakwise Tuesday Talk

Hoe Tweakwise aansluit op jouw Hyvä shop

Magento extensie

Tweakwise + Magento

Platformen

Benieuwd welke platformen wij ondersteunen?

Benieuwd naar Tweakwise?

Neem contact op Vraag een demo aan Bereken je opbrengst Vraag een offerte aan

Neem contact met ons op voor een demo, offerte of berekening van je shop’s potentie. Laten we samen je shop verbeteren!

TE KOPPELEN MET JOUW PLATFORM

Tweakwise is een add-on voor alle platformen
en programmeertalen

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.