JavaScript compatibility

Because the Loki Checkout supports both Hyvä Themes and Luma themes, as a module developer, you will need to aim for compatility with both as well. You could actually use Tailwind classes within the Luma-based Loki Checkout as well - the Yireo_LokiCheckoutLuma module uses it too.

However, when it comes to JavaScript, it is often required with Luma to load the JavaScript via RequireJS. To support both themes with different templates, we can use the hyva_ layout prefix that Hyvä Themes provide. For instance, you could create a PHTML template for Luma with a default handle loki_checkout.xml and then rewrite the PHTML template to Hyvä with another layout file hyva_loki_checkout.xml.

File hyva_loki_checkout.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <body>
        <referenceBlock
            name="loki.checkout.billing-step.payment-methods.foobar.form"
            template="Yireo_Example::hyva/method/foobar.phtml"/>
    </body>
</page>

Within Hyvä, you can often load JavaScript in the following way:

<script>
    (() => {
        // Do your magic
    })();
</script>

With Luma, this might need to be wrapped with RequireJS:

<script>
    require([], function () {
        // Do your magic
    });
</script>
Last modified: June 2, 2025