Where to begin coding

This page describes the process of creating a Compatibility Module.

If you already feel at home with Hyvä, this page is probably not for you.

But in case you prefer some guidance, here are the steps we tend to follow when creating compatibility modules.

This page assumes you already have the new, empty, compatibility module installed in your development instance, as outlined in Clone the repository.

Note

The process of creating a compatibility module is slightly different every time, depending on the original module. We are trying to provide an overview here for you to adjust as needed.

First, choose a page that includes some functionality offered by the module.

Open the page in a private browser window and switch to a Luma theme reference store view.

Open the same page in your browser for the Hyvä theme store view.

Open the Browser Console in the Hyvä store view and look for any errors (e.g. require is not defined).

Locate the template containing the feature of that is causing the error in the original module.

Copy the template into the compatibility module to the same location in view/frontend/templates.

Open the copy in the IDE.

Inline any JavaScript code and convert it to vanilla JavaScript and Alpine.js. Then style the component using Tailwind CSS.
This whole process is described in more detail in the "From Luma to Hyvä" section.

Once the template renders without any errors and the feature works, take a moment to clean up the code, and then move on to the next template.

Tip

If there are several templates on a page causing errors, copy all of them to the compatibilty module and short-circuit then with an early return so it is possible to get one after the other working.

<?php
return; // temporarily disabled

Important

Remember to try and take one small step after the other, instead of trying to tackle all at once (that is probably good life advice in general).