Emico är sedan många år officiell partner till Tweakwise och utvecklar och hanterar även Tweakwise-modulerna för Magento 1 och 2. I denna egenskap har vi startat ett projekt för att bygga en Hyvä Themes Compatibility-modul. Vi har därför skrivit om modulens frontend i linje med den stack som används i Hyvä-temat.
Hyvä Themes erbjuder en bra lösning för de två största problemen med Magento 2:s ursprungliga frontend (Luma theme). Genom att helt skala av och sedan bygga upp med hjälp av lightweight libraries är hastigheten för temat out of the box avsevärt bättre. Dessutom är utvecklingen mycket enklare och praktisk eftersom en stor community ligger bakom den moderna stack som används, som därför är väldokumenterad. Det leder automatiskt till en snabbare time to market och mer flexibilitet under utvecklingen.
Ett exempel på Tweakwise-sökning inom standardmässiga Hyvä Theme
Hyvä Themes-paketet består av ett antal moduler som ersätter Magento 2:s frontend helt. Den grundläggande tekniken för att skapa mallar är samma som för Magento 2:s ursprungliga frontend (Luna theme), det sker fortfarande med layoutinstruktioner via XML och mallanvändning i PHTML-filer. Däremot har alla tunga och föråldrade Javascript libraries (RequireJS, KnockoutJS och jQuery) och stylingtekniker (LESS) bytts ut mot en modern stack av Alpine.js och Tailwind CSS.
I Hyvä Theme används framför allt modern Vanilla Javascript. För att initiera Javascript-funktionaliteterna och till exempel uppdatera ett pris, eller öppna och stänga ett dragspel, har man valt det lättviktiga ramverket Alpine.js. Detta ramverk är endast 9 kilobyte stort och det enda tredje parts Javascript som laddas som standard.
”Hyvä Themes kommer inom kort att växa till en av de ledande frontend-plattformarna för Magento 2. För oss var det ett logiskt val att använda detta! Med Hyvä-partnerskapet säkerställer vi en smidig integrering, fullständigt stöd för våra funktioner och optimal support vid implementeringar. Vi är stolta över denna integrering och ser fram emot samarbetet!”
Tailwind CSS är ett ”utility-first CSS framework”, vilket innebär att många klasser är fördefinierade för vanligast styling, som kan användas i HTML för att styla element. Därefter skapas och rensas denna CSS via PostCSS baserat på faktiskt använda delar, vilket leder till att det endast blir lite CSS över.
Vad är vinsten med detta? Generellt en minskning på minst 90 % av antalet kb av JS- och CSS-filer som måste skickas till slutanvändaren och en Google Lighthouse score på långt över 80 utan ytterligare optimering. Dessutom är inlärningskurvan inte så brant som för många andra nya tekniker.
Från Emico har vi följt denna utveckling med stort intresse. Efter att vi nyligen påbörjat implementeringen av en ny frontend baserad på Hyvä Themes uppstod snart behovet av en Tweakwise-implementering och allt eftersom Hyvä-communityn växte hörde vi allt oftare att det fanns behov av en kompatibilitetsmodul för Tweakwise som är kompatibel med Hyvä-stacken. Detta projekt har vi startat med stor entusiasm.
Ett exempel på Tweakwise-prisfiltret på mobil inom det standardmässiga Hyvä-temat. Inklusive supersnabb ändring av sorteringsordningen.
För att bygga Emico Magento 2 Tweakwise-kompatibilitetsmodulen skrev vi om den kompletta frontend för att göra den kompatibel med tekniken som används i Hyvä-temat. All filterfunktionalitet har utvecklats på nytt i Vanilla Javascript i kombination med Alpine.js, vilket inte ändrat på funktionen. Dessutom har vi överfört temats standardstyling till våra modulmallar, så att de ansluter sömlöst out of the box till Hyväs utseende.
Backendkoden har hållits intakt och kompatibilitetsmodulen fungerar som ett tillägg till standardmodulen, där alla frontenddelar via XML skrivs över med de Hyvä-kompatibla mallarna. Här har vi skiljt på filerna som innehåller bitar av Javascript för funktionaliteter och mallarna som du under utvecklingen kanske vill anpassa med egna Tailwind CSS styles. Det gör användningen och implementeringen av denna modul lättillgänglig och mindre känslig för problem som kan uppstå under uppdateringen av modulen till en nyare version.
Hyvä-integreringen är direkt tillgänglig och distribueras kostnadsfritt via Github/Packagist. Har du feedback eller stöter du på problem?
Erhåll en Tweakwise-licens innan du börjar testa.
Är du nyfiken på hur Tweakwise kan öka konverteringen i din e-handel? Kontakta oss för en kostnadsfri demo.
