Home Emico Magento 2 Tweakwise compatibility module for Hyvä Themes

Emico Magento 2 Tweakwise compatibility module for Hyvä Themes

Emico has been the official partner of Tweakwise for many years, and has also been developer and administrator of the Tweakwise modules for Magento 1 & 2. In that capacity, we took up the project to build a Hyvä Themes Compatibility module. For this, we rewrote the front-end of the module in line with the stack used in the Hyvä Theme.

Hyvä Themes

Hyvä Themes provides a good solution to the two biggest pain points of the Magento 2 native front-end (Luma theme). First of all, by completely stripping down and rebuilding using lightweight libraries, the speed of the theme is many times better out of the box. In addition, development is a lot easier and more pleasant, because the modern stack used has a large community behind it and is very well documented. This automatically results in a faster time to market and more flexibility during development.

An example of Tweakwise search in the standard Hyvä theme

The Hyvä Themes package consists of a number of modules that completely replace the front-end of Magento 2. The basic technique for building templates has remained the same as the Magento 2 native front-end (Luma theme), still using layout instructions via XML and templating in PHTML files. However, all heavy and outdated Javascript libraries (RequireJS, KnockoutJS and jQuery) and styling techniques (LESS) have been replaced for a modern stack of Alpine.js and Tailwind CSS.

The Hyvä Theme mainly uses modern vanilla Javascript. For initializing the Javascript functionalities and for example updating a price, or opening and closing an accordion, the lightweight framework Alpine.js was chosen. This framework is only 9 kilobytes in size and the only 3rd party Javascript that loads by default.

Hyvä Themes will grow to one of the leading front-end platforms for Magento 2 on short term. For us, the choice was logical: play into this development! This Hyvä partnership commits us to a smooth integration, complete support of our feature set and optimum support with integrations. We are proud of this integration and look forward to further cooperation.
Ronald Meeuwissen - Tweakwise Partner Platforms

Tailwind CSS is a “utility-first CSS framework”, this means that many classes are predefined for the most common styling, these can be used in the HTML to style elements. This CSS is then built and cleaned up via PostCSS based on the actual components used, leaving only a small amount of CSS.

So what exactly do you gain from this? In general, a reduction of at least 90% in the number and kb’s of JS and CSS files that have to cross the line and a Google Lighthouse score of well over 80 without further optimizations. In addition, the “learning curve” is not as steep as with many other new technologies.

The Emico Magento 2 Tweakwise compatibility module

We at Emico have followed these developments with great interest. After we recently started implementing a new front-end based on Hyvä Themes, the desire for a Tweakwise integration quickly arose, and as the Hyvä community grew more and more people thought there was a need for a compatibility module for Tweakwise which is compatible with the Hyvä stack. We’re excited to be taking up this project.

An example of the Tweakwise price filter on mobile in the standard Hyvä theme. Including super fast switch in sorting order.

For the construction of the Emico Magento 2 Tweakwise compatibility module we had to rewrite the entire front-end to make it compatible with the techniques used within the Hyvä Theme. All filter functionality was redeveloped in vanilla Javascript in combination with Alpine.js, leaving the functionality untouched. In addition, we extended the standard styling of the theme into our module templates, so that it blends seamlessly with the look of Hyvä out of the box.

The back-end code has remained intact, and the compatibility module works as an addition to the standard module, only overwriting the front-end components via XML with the Hyvä compatible templates. Here we have made a separation between the files that contain the pieces of Javascript for the functionalities and the templates that you may want to customize during development with your own Tailwind CSS styles. This makes the use and integration of this module easy and less sensitive to issues that may arise when updating the module to a newer version.

Get started now with Hyvä and Tweakwise

The Hyvä integration is available right now and is distributed via GitHub/Packagist free of charge. Any feedback or issues? Create an issue in GitHub!

Be sure to get a Tweakwise license before testing the functionalities.