A Compat module is installed and used to override a third-party module’s template and frontend files, something not fully supported out of the box in Magento 2’s theme fallback system.
Suppose you have an extension that works in the default Magento theme but when it comes to hyva, it stops working. In this case, we will need to create a Hyva compatibility extension to make it work.
Let’s understand why it stopped working. Suppose you have a free shipping bar on the top of the page and there are many JavaScript/jQuery works on it. For example, hide/show bar, hide bar automatically after a while, Close bar upon click, etc…
Hyva does not support jQuery and RequireJS. This is the reason we need to create a compatibility extension in Hyva.
Steps to Create a Hyva Compatibility Extension
So, now let’s create a compatibility extension.
Step 1: Install the Compat Module Fallback repo
We would need to install the Compat Module Fallback repo first composer require hyva-themes/magento2-compat-module-fallback. It is recommended to install compat module via composer.
Step 2: DI Configuration
The initial configuration is automatically included in the compatibility module skeleton.
Create an extension the same as we do in the default Magento theme. Now create di.xml in etc/frontend/di.xml and define the structure as given 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>New to Hyvä?? Learn about the Hyvä Theme from scratch!
Step 3: Overriding a compatibility template in a theme
Now override the template as per the directory structure.
For Example:
Template declaration:
- Mirasvit_Gdrp::cookie_bar.phtml
Original Module Template:
- Mirasvit/Gdpr/view/frontend/templates/cookie_bar.phtml
Compat Module Template:
- Hyva/MirasvitGdpr/view/frontend/templates/cookie_bar.phtml
Theme Override:
- app/design/frontend/Vendor/theme/Mirasvit_Gdpr/templates/cookie_bar.phtml
Step 4: Adding a module to the tailwind purge config
Create the tailwind.config.js file at view/frontend/tailwind/tailwind.config.js and add the below content.
Any paths are specified relative to this file. For example, to include the modules *.phtml templates into the tailwind config, use the code below:
module.exports = {
purge: {
content: [
'../templates/**/*.phtml',
]
}
}Step 5: Adding a module to the tailwind CSS source
If there is custom CSS needed in your extension then, create the tailwind-source.css file at view/frontend/tailwind/tailwind-source.css.
Note: If you are creating a fresh extension/module then you don’t need to create Compat module/extension.
Read more resources on Hyva themes:
- Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
- Hyva Themes Development – For Online Merchants
- Hyvä Theme Benefits that your store needs
- 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
- Hyvä VS PWA: Where to Invest?
- How a Slow Magento Website Can Cost You Advertising Dollars
- Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Post a Comment
Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️