# Installation (Luma)

**Loki Checkout is compatible with Luma-based themes by using the `LokiCheckout_Luma` module. The term *Luma* refers here to any theme that is based upon the same stack used by the core themes `Magento/blank` and `Magento/luma`. This stack includes jQuery, KnockoutJS, RequireJS and LESS. Loki Checkout does not make use of the native JavaScript stack though. It adds Alpine.js on top of the Luma stack. However, because it does not require KnockoutJS, it actually cuts the used JavaScript files in the checkout in half (without further optimization).**

## Composer installation and module setup
Install the Loki Checkout for Luma module:
```bash
composer require loki-checkout/magento2-luma
```

> 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)

> WARNING: When you are using a Hyvä-based theme, do not enable the `LokiCheckout_Luma` module.

## Removing legacy JavaScript
The Loki Checkout behaves like a blackbox within the Luma theme. It does not need any of the legacy JavaScript. So the legacy JavaScript is only needed for few widgets left on the page: The currency switcher, the Store View switcher, the minicart, the newsletter subscribe, the menu. Many of these widgets are actually best left-out of the checkout, to optimize conversion.

The Loki Theme Kit for Luma removes the legacy JS and replaces it with plain JS or Alpine.js components. It makes your checkout fly, even when compared to more modern day themes.

The `LokiTheme_LumaComponents` module takes care off the actual JavaScript upgrade. Once this module is enabled, the `LokiCheckout_Luma` module automatically configures it for the checkout. No further configuration required:

```bash
composer require loki-theme/magento2-luma-components
bin/magento module:enable LokiTheme_LumaComponents
bin/magento cache:flush
```

Optionally, look into the [Loki Theme Kit for Luma](/theme) documentation to allow for complete removal of all legacy JavaScript on multiple pages.

## Styling the Luma-based checkout
With the Loki Checkout in Luma, two types of styling are used:

- LESS-based files based upon Luma;
- A Tailwind build;

## Styling the checkout via LESS
The LESS-based stylesheets are typically regenerated when static content deployment is rerun:
```bash
bin/magento deploy:mode:set developer
```

## Styling the checkout via Tailwind
Before you run the Tailwind builds, you will need to install and enable the `LokiCheckout_CoreCli` module and then run the command `loki-checkout:modules:dump` to generate a file `app/etc/loki-checkout.json` which is used by the NPM scripts.

```bash
composer require loki-checkout/magento2-core-cli
bin/magento module:enable LokiCheckout_CoreCli
bin/magento loki-checkout:modules:dump
```

The Tailwind-based stylesheet is only refreshed via an NPM command:
```bash
cd vendor/loki-checkout/magento2-luma/view/frontend/tailwind/
npm install
npm run build
```

Optionally, you can also run the CSS compilation without optimizing it for production:
```bash
npm run dev
```

And you can run a watcher:
```bash
npm run watch
```

**Note that this NPM build needs to take place every time that you enable or disable a Magento module, because the Tailwind CSS build will include CSS rules based upon the list of active Magento modules.**

## Copying the Tailwind files to your own theme
If you want to customize things in the Loki Checkout, first of all, take note of the `CssClass` utility, which allows you to override and extend Tailwind CSS classes *without* template overrides. However, sometimes you want to just do more. In that case, simply copy the entire `view/frontend/tailwind/` folder from the  `LokiCheckout_Luma` module to your own theming folder `LokiCheckout_Luma/tailwind/` and customize things there.

## Adding a new Magento module to the Tailwind build
If you are adding a custom Magento module to the Loki Checkout under Luma, the HTML classes of that new module are only taken into account during the Tailwind build, if the module is listed as a *Loki Checkout* module. For this, add the following DI XML definition to your module (in this case `Yireo_Example`):

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="LokiCheckout\Config\LokiCheckoutModules">
        <arguments>
            <argument name="modules" xsi:type="array">
                <item name="Yireo_Example" xsi:type="string">Yireo_Example</item>
            </argument>
        </arguments>
    </type>
</config>
```

## Including custom CSS files in the Tailwind build
The Luma Tailwind file `tailwind-module.css` includes CSS fixes to make sure that Tailwind works in the Luma LESS-based styling. However, the module `LokiCheckout_Core` also includes definitions that are needed. These are pulled in with the following statement:

```css
@magentoImport "LokiCheckout_Core::view/frontend/tailwind/tailwind-source.css";
```

The `@magentoImport` rule is created with a custom PostCSS plugin and allows for copying the contents of the given file in the Luma Tailwind file. If you want, you can use the utility to include other CSS files as well.

## Not using Tailwind anymore
If you don't like Tailwind under Luma, you can simply remove the Tailwind CSS from the XML layout:

File `view/frontend/layout/default.xml`:
```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">
    <head>
        <remove src="LokiCheckout_Luma/css/tailwind.css"/>
    </head>
</page>
```