How to Compatible the module with Hyvä

In this blog, we will see an overview of the compatible module and some prerequisites, tips, and naming conventions before beginning with working on the compatible Hyva theme extensions.

Modules based on the Magento luma or Blank themes require a Compatible module to work with Hyvä. The amount of work to create a compatibility module depends on the original module.

Because the compatibility module re-implements the code of a module that doesn’t work out of the box in a Hyvä storefront. The code is based on jQuery and Knockout which Hyvä doesn’t support instead it uses AlpineJs and TailwindCSS.

Few requirements you must know to work with compatible modules.

• Magento 2 frontend development.
• PHP.
• JavaScript.
• git
• Hyvä Theme installation and setup.
• Alpine js basics.
• Tailwind CSS basics.

Note:- Please read the blogs about TailwindCSS, AlpineJs, ViewModels, and Essentials require before going to work with the compatibility module. Otherwise, you will face difficulties while working on a compatible module.

Tips for Compatible Module

It helps to have a second store view running with a Magento Luma theme next to the store view using Hyvä.

This allows checking how exactly some aspect of a module works in Luma while making it work in Hyvä.

Naming Conventions

The module name consists of the Hyva namespace with the original module namespace and module name.

Magento Module:

For example:

Original: Webkul_CompatibleModule
Compat Module: Hyva_WebkulCompatibleModule

Composer Package:

The composer vendor’s name is hyva-themes.

For example:

Original: webkul/magento-compatiblemodule
Compat Module: hyva-themes/magento2-webkul-compatiblemodule

Folder Structure

Hyvä modules and compatibility modules use the following folder structure and minimal set of files:

magento2-example-module/
├── LICENSE.md
├── README.md
├── composer.json
└── src
    ├── etc
    │   ├── frontend
    │   │   └── di.xml
    │   └── module.xml
    └── registration.php

3 directories, 6 files

Any tests go into a tests/ directory on the same level as src/

The basic folder structure includes the LICENSE.md and README.md files are already present in new Compatibility Module repositories.

The LICENSE.md file is a copy of the Hyvä Themes Software User License and must not be changed.

The README.md file contains basic information about the original module. You can add any additional information that might be required for the Compatibility Module to work.

Previous Blog link : – How to work with sectionData in Hyvä