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 their dependencies):

bin/magento module:enable `bin/magento module:status | grep -E 'Yireo|Loki'`

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:

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

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.

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>