Hyvä Themes

Loki Checkout is out-of-the-box compatible with Hyvä Themes. It requires Alpine 3 and Tailwind CSS 3, which are supported by Hyvä Themes as well.

About Hyvä Checkout

Note that the Loki Checkout is not based upon Hyvä Checkout and a clean setup would not have both installed. If the Loki Checkout is enabled, the Hyvä Checkout needs to be disabled and removed. And vice versa.

Configuration

Make sure to rebuild the Hyvä configuration file first. This should add the Loki modules to the file app/etc/hyva-themes.json:

bin/magento hyva:config:generate

Next, rebuild the Tailwind CSS of your own theme. After this, your compiled CSS should now also include the CSS classes included with Loki.

cd app/design/frontend/Foo/bar/web/tailwind/
npm run build

When making use of the Hyva_ThemeFallback module, make sure that the setting Apply fallback to requests containing does not include checkout/index.

About Yireo_HyvaThemeAutoRegistration

The main Yireo_LokiCheckout module has a dependency with a helper module Yireo_HyvaThemeAutoRegistration. Normally, every single Magento module that wants to integrate its HTML into Hyvä would need to listen to an event hyva_config_generate_before to add its own module name to the file app/etc/hyva-themes.json. Within the Loki Checkout, this helper module takes care of the registration of any module that starts with Yireo_LokiCheckout*.

File etc/di.xml:

<?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="Yireo\HyvaThemeAutoRegistration\Observer\RegisterModuleForHyvaConfig">
        <arguments>
            <argument name="modulePrefixes" xsi:type="array">
                <item name="Yireo_LokiCheckout" xsi:type="string">Yireo_LokiCheckout</item>
            </argument>
        </arguments>
    </type>
</config>