How to customize and override templates in Hyvä compatibility module | Magento Hyva

Why do we need to customize and override templates for the Hyvä Theme?

To replace the Magento 2 default classes with Tailwind CSS classes.
To replace the RequireJS code with Alpine.js or vanilla JavaScript.

Ways to customize and override templates in the Hyvä Theme:

Override the templates in the Hyvä child theme.
Override the templates in the Hyvä compatibility module.

In this blog, I will explain how to override templates in a Hyvä compatibility module.

Open Table of contents

Step 1: Create the Original module
Step 2: Create the Hyvä compatibility module
Step 3: Override the template in the Hyvä compatibility module
Step 4: Customizing templates with Tailwind CSS and Alpine.js

Step 1: Create the Original module

First, let’s create a sample module named MyCompany_SampleModule with the layout file:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<body>
		<referenceContainer name="content">
			<block name="sample.block" template="MyCompany_SampleModule::sampleblock.phtml"/>
		</referenceContainer>
	</body>
</page>MyCompany_SampleModule::view/frontend/layout/default.xml

And the template file:

<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 * @var $escaper \Magento\Framework\Escaper
 */
?>
<div class="row">
	<?= $escaper->escapeHtml(__('Hello, this is a sample block in a MyCompany_SampleModule::sampleblock.phtml module!')) ?>
</div>MyCompany_SampleModule::view/frontend/templates/sampleblock.phtml

On the frontend, you will see the following text displayed:

Hello, this is a sample block in a MyCompany_SampleModule::sampleblock.phtml module!

Step 2: Create the Hyvä compatibility module

Next, create a Hyvä-compatible module named Hyva_MyCompanySampleModule. Add the following di.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Hyva\CompatModuleFallback\Model\CompatModuleRegistry">
        <arguments>
            <argument name="compatModules" xsi:type="array">
                <item name="mycompany_samplemodule_map" xsi:type="array">
                    <item name="original_module" xsi:type="string">MyCompany_SampleModule</item>
                    <item name="compat_module" xsi:type="string">Hyva_MyCompanySampleModule</item>
                </item>
            </argument>
        </arguments>
    </type>
</config>Hyva_MyCompanySampleModule::etc/frontend/di.xml

Here,

original_module: The name of the original module you want to override.
compat_module: The name of the new Hyvä-compatible module that will override the original module’s templates.

Step 3: Override the template in the Hyvä compatibility module

To override the template file MyCompany_SampleModule::sampleblock.phtml, create the template file at same path:

<?php
/**
 * @var $block \Magento\Framework\View\Element\Template
 * @var $escaper \Magento\Framework\Escaper
 */
?>
<div class="py-2">
	<?= $escaper->escapeHtml(__('Hello, this is a sample block in a Hyva_MyCompanySampleModule::sampleblock.phtml module!')) ?>
</div>Hyva_MyCompanySampleModule::view/frontend/templates/sampleblock.phtml

Once the Hyvä-compatible module is created, the new template file will override the original one. On the frontend, you will see the following text displayed:

Hello, this is a sample block in a Hyva_MyCompanySampleModule::sampleblock.phtml module!

Step 4: Customizing templates with Tailwind CSS and Alpine.js

To override any template file of the original module:

Copy the same template file to the Hyvä compatibility module, maintaining the same path.
Modify the content as needed, replacing default Magento classes with Tailwind CSS classes and replacing RequireJS code with Alpine.js.

I hope it helps you to customize and override templates in the Hyvä compatibility module. Next, we will check how to override the template in the Hyvä child theme. Cheers!