# Installation (Hyvä)

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

> Loki Checkout is Hyvä Theme 1.4 ready. It simply just works.

> WARNING: Note that Alpine.js 2 does not work with LokiCheckout. If you are using a theme based on Hyvä Themes 1.1 or older, upgrade that theme first. Alpine.js 3 is required.

## Composer installation and module setup

Install the `LokiCheckout_Hyva` module:
```bash
composer require loki-checkout/magento2-hyva
```

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

Enable the relevant modules (and their dependencies):
```bash
bin/magento module:enable `bin/magento module:status | grep -E 'Yireo|Loki'`
```

> Also read our doc on [enabling Magento 2 modules](/misc/enabling-modules)

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

```bash
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.

```bash
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 `LokiCheckout_Core` 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 `LokiCheckout_*`.

File `etc/di.xml`:
```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="LokiCheckout_" xsi:type="string">LokiCheckout_</item>
            </argument>
        </arguments>
    </type>
</config>
```

## Combining the Hyvä Checkout and the Loki Checkout in the same instance
Note that the Loki Checkout is **not** based upon Hyvä Checkout and a clean setup would not have both installed. When developing your own extensions, you might want to have both the Hyvä Checkout and the Loki Checkout installed. In development, we highly recommend you to disable the Hyvä Checkout module, when working with the Loki Checkout modules. And vice versa. Not doing is might lead into weird issues, like the header of the Loki Checkout being changed by layout files of the Hyvä Checkout.

We do not support having both modules enabled in production. It doesn't make sense. It shouldn't be done.

If you really want to enable the Hyvä Checkout module and the Loki Checkout module at the same time, use the following configuration:

- Loki > Loki Checkout > General > Enabled (`loki_checkout/general/enable`): Configure this to be "Yes" (`1`) when working with the Loki Checkout and "No" (`0`) when working with the Hyvä Checkout.

- Hyvä Themes > Checkout > General > Checkout (`hyva_themes_checkout/general/checkout`): Configure this to be "Magento Luma (original)" (`magento_luma`) when working with the Loki Checkout and another value when working with the Hyvä Checkout.

- Hyvä Themes > Theme Fallback > General Settings > Apply fallback to requests containing: Make sure to remove any entry starting with `checkout/*` or disable the fallback mechanism entirely (set `hyva_theme_fallback/general/enable` to `0`).