How to Make a Third-party Module Compatible With Hyva Theme?
Chapters Close

How to Make a Third-party Module Compatible With Hyva Theme?

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:

  1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
  2. Hyva Themes Development – For Online Merchants
  3. Hyvä Theme Benefits that your store needs
  4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
  5. Hyvä VS PWA: Where to Invest?
  6. How a Slow Magento Website Can Cost You Advertising Dollars
  7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Speak your Mind

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! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 4,081 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.