How to Make Magento 2 Extensions Compatible with Hyvä Theme?

Hyvä themes are popular among Magento 2 store owners due to their high-end performance, improved user experience, and ease of customization. 

However, developers may face third-party module compatibility challenges during the Hyvä theme development. These include refactoring frontend code to replace Magento’s default components, adapting legacy code to Hyvä’s simplified architecture, and more.

To maintain Magento 2 Hyvä theme compatibility, you need to make certain code-level updates. This blog post will explain everything you need to know about Hyvä theme extension compatibility.

Prerequisites for Magento 2 Hyvä Theme Compatibility

• Understanding of Hyvä Architecture: Familiarize yourself with Hyvä’s structure, including its use of Tailwind CSS, Alpine.js, and its approach to layouts and templates.
• Magento 2 Installation with Hyvä: Ensure you have the Hyvä theme installed with an active Magento environment. We recommend upgrading to Magento’s latest version for security and performance reasons. 
• Server Access: Make sure you have SSH access to the server and user rights to implement changes in the source code. 
• Access to Extension Source Code: Obtain the full source code of the third-party extension to modify, refactor, and test for compatibility with Hyvä.
• Testing Environment Setup: Set up a Magento 2 testing environment to safely develop and test the extension’s compatibility with Hyvä without affecting your live site.

Note: Make sure you take a backup for your site to quickly revert to an existing version in case anything goes wrong during installation.

How to Make a Third-party Module Compatible with Hyvä Theme?

For theme compatibility, a Hyvä compatibility module is installed to override a third-party module template with the frontend files. 

Some compatibility challenges occur since the default Magento theme uses JavaScript/jQuery and Hyvä doesn’t support jQuery and RequireJS. Here comes the need to create a compatible extension in Hyvä. Follow the below steps to make it happen: 

Step 1: Install the Compat Module Fallback Repo

Navigate to the composer to install the compat module Fallback repo:

composer require Hyvä-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 structure like below:

<type name="Hyvä\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">Hyvä_OrigModule</item>
 </item>
 </argument>
 </arguments>
</type>

Step 3: Overriding a Compatibility Template 

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: Adding a Module to the Tailwind Config 

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: Adding a Module to the Tailwind CSS Source 

When you need custom CSS for your extension, you can create a tailwind.source.css file at view/frontend/tailwind-source.css. Else, you can simply enable the module and run the setup upgrade process –

bin/magento module:enable VendorName_ModuleName

bin/magento setup:upgrade

bin/magento cache:clean

Here, replace VendorName and ModuleName with the actual vendor and module name. 

Mention the Common Pitfalls & Ways to Avoid Them

Issues with CSS/JS Overwriting

Overriding core Hyvä styles or scripts with legacy code from the original extension impacts Hyvä’s performance. To avoid this, you need to refactor CSS and JavaScript carefully. Replace legacy code with Tailwind CSS and Alpine.js. 

Layout Issues

You may find certain broken UI elements if you directly copy Magento’s default theme layout with Hyvä. So, you need to adapt the extension’s layout files to align with the minimal layout of Hyvä themes. 

Incompatibility with Other Extensions

Extensions incompatible with Hyvä’s coding standards lead to functionality errors. To avoid such a situation, ensure the extension adheres to Hyvä’s best practices and test them alongside other Hyvä-compatible extensions. 

Inconsistent User Experience 

Integrating third-party extensions with the Hyvä theme may cause you to have inconsistent user experience across devices. To avoid such responsiveness challenges, you must thoroughly test the extension across browsers and devices. 

For instance you can also have a look at the latest partnerships and integrations, such as the Hyva Commerce partners with Mollie, which could improve the experience of using Hyvä Theme with specific payment solutions or other integrations.

Compatible Hyvä Theme Extensions 

Considering the growing popularity of Hyvä themes, at Meetanshi, we have developed hundreds of Hyvä compatible extensions.

So, you can avoid the hassles of managing Hyvä theme extension compatibility by implementing our Hyvä-theme extensions. Improve your shoppers’ experience at an affordable price with Meetanshi’s Hyva theme extensions.