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.
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.phtmlStep 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