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:

composer require loki-checkout/magento2-luma

Enable the relevant modules (and its dependencies):

bin/magento module:enable LokiCheckout_Luma LokiCheckout_Core Loki_CssUtils Loki_Components Loki_FieldComponents Loki_MapComponents Yireo_CspUtilities Yireo_HyvaThemeAutoRegistration

If you want to enable all Loki-related modules that you have installed via composer, you might also just run the following command:

bin/magento module:enable `bin/magento module:status | grep Loki`

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:

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.

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:

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:

npm run dev

And you can run a watcher:

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.

Take note that the Magento root will be different. To fix this, copy the config.ini.original to config.ini and modify the magentoRoot variable into the right relative path (../../) or an absolute path (/var/www/html/):

magentoRoot=../../../../../../../

If the Magento root is wrong, the npm run build command should simply fail :)

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

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