Installation (Hyvä)

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

Composer installation and module setup

Install the Yireo_LokiCheckoutHyva module:

composer require yireo/magento2-loki-checkout-hyva

Note that dev-main or specific commits do not work via the composer.yireo.com API. If you want to use the latest development version, use @dev.

Enable the relevant modules (and their dependencies):

bin/magento module:enable Yireo_LokiCheckoutHyva Yireo_LokiCheckout  Yireo_LokiComponents Yireo_CspUtilities Yireo_HyvaThemeAutoRegistration

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>
Last modified: April 8, 2025