How to Make Magento 2 Extensions Compatible with Hyva Theme?

Magento 2 store owners use Hyva themes because of their superior performance, enhanced user interface, and simplicity of customization. 

Nevertheless, you could run into compatibility issues when integrating third-party extensions with Hyva themes to offer more functionality. These involve, among other things, reworking frontend code to swap out Magento’s built-in components and modifying legacy code to fit within Hyva’s condensed architecture. 

You must apply some code-level upgrades in order to preserve compatibility with the Magento 2 Hyva theme. Everything you need to know about compatibility with the Hyva theme extension will be covered in this blog post. 

Requirements for Compatibility of Magento 2 Hyva Theme

• Knowledge of Hyva Architecture: Become acquainted with Hyva’s architecture, particularly how it uses Alpine.js, Tailwind CSS, and layouts and templates.

• Installing Magento 2 with Hyva: Make sure you have an operational Magento environment installed together with the Hyva theme. For reasons related to performance and security, we advise updating to Magento’s most recent version. 

• Server Access: To apply modifications made to the source code, confirm that you have user permissions and SSH access to the server. 

• Obtaining the Source Code: Acquire the complete source code of the third-party addon in order to alter, simplify, and verify its compatibility with Hyva. 

• Testing Environment Setup: To safely build and test the Hyva compatibility of the extension without disrupting your life, set up a Magento 2 testing environment. 

In case something goes wrong during installation, make sure you take a backup of your website so you can easily restore it to an earlier version.

How Can a Third-Party Module Be Made Hyva Theme Compatible?

Installing a module to replace a third-party module template with the frontend files is necessary for compatibility with the Magento Hyva theme. 

Because Hyva doesn’t support jQuery and requireJS and the default Magento theme uses JavaScript/jQuery, there are certain complaints Hyva extensions. To make it happen, take the following actions:

Step 1: Install the Compat Module Fallback Repo:

To install the compat module fallback repo, navigate to the composer:

“hyva-themes/magento2-compat-module-fallback”

Step 2: DI Configuration

Create an extension similar to what you do for the default Magento theme. Create di.xml in etc/frontend/di.xml and define the structure like below:

<type name="Hyva\CompatModuleFallback\Model\CompatModuleRegistry">

 <arguments>

 <argument name="compatModules" xsi:type="array">

 <item name="orig_module_map" xsi:type="array">

 <item name="original_module" xsi:type="string">Orig_Module</item>

 <item name="compat_module" xsi:type="string">Hyva_OrigModule</item>

 </item>

 </argument>

 </arguments>

</type>

Step 3: Use an Incompatible Template Instead of One

Now, override the template per the directory structure. Here are the steps you follow:

• Template declaration:

VendorName_ModuleName::FileName.phtml

• Original Module Template 

VendorName/ModuleName/view/frontend/templates/FileName.phtml

• Compatible Module Template

Hyva/VendorNameModuleName/view/frontend/templates/FileName.phtml

• Theme Override: 

app/design/frontend/Vendor/theme/VendorName_ModuleName/templates/FileName.phtml

Step 4: Configuring a Module in Tailwind

Next, you create the tailwind.config.js file at view/frontend/tailwind/tailwing.config.js and add the below content.

module.exports = {

 purge: {

 content: [

 '../templates/**/*.phtml',

 ]

 }

 }

Step 5: Using the Tailwind CSS Source to Add a Module

You can build a tailwind.source.css file at view/frontend/tailwind-source.css if you require custom CSS for your extension. If not, you can just activate the module and carry out the setup upgrading procedure. 

bin/magento module:enable VendorName_ModuleName

bin/magento setup:upgrade

bin/magento cache:clean

Here, VendorName and ModuleName should be changed to the true names of the vendor and module. 

Mention the Common Pitfalls & Ways to Avoid Them

Issues with CSS/JS Overwriting

Hyva performs worse when core styles are overridden or when scripts containing legacy code from the original extensions are used. You must carefully refactor CSS and JavaSript to prevent this. Use Alpine. Js with tailwind CSS to replace any outdated code. 

Layout Issues

If you use Hyva to directly replicate the Magento default theme layout, you can discover certain broken user interface elements. As a result, you must modify the layout files of the extension to match the simple design of Hyva themes.

Incompatibility with Other Extensions

Functionality issues result from extensions that are not compliant with Hyva’s coding standards. Make sure the extension follows Hyva’s best practices and test it alongside other Hyva-compatible extensions to prevent this kind of scenario.

Inconsistent User Experience

If you integrate third-party extensions with the Hyva theme, your device’s user experience can become uneven. It is imperative that you properly test the extension on various devices and browsers to prevent issues related to responsiveness. .

Compatible Hyva Theme Extensions

EVRIG SOLUTIONS has created Hyva-compatible extensions in response to the growing popularity of Hyva themes. Thus, by using our Hyva theme extensions, you may get rid of the headaches associated with maintaining Hyva theme extension compatibility. At a reasonable cost, enhance your customer’s experience using EVRIG SOLUTIONS Hyva theme extensions.