Loki Checkout is out-of-the-box (using the Yireo_LokiCheckoutLuma module) compatible with Luma-based themes. 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).
Install the additional package for Luma:
composer require yireo/magento2-loki-checkout-luma
Enable the module:
bin/magento module:enable Yireo_LokiCheckoutLuma
WARNING: When you are using a Hyvä-based theme, do not enable the Yireo_LokiCheckoutLuma module.
With the Loki Checkout in Luma, two types of styling are used:
The LESS-based stylesheets are typically regenerated when static content deployment is rerun:
bin/magento deploy:mode:set developer
The Tailwind-based stylesheet is only refreshed via an NPM command:
cd vendor/yireo/magento2-loki-checkout/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.
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 Yireo_LokiCheckoutLuma module to your own theming folder Yireo_LokiCheckoutLuma/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 :)
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="Yireo\LokiCheckout\Config\LokiCheckoutModules">
<arguments>
<argument name="modules" xsi:type="array">
<item name="Yireo_Example" xsi:type="string">Yireo_Example</item>
</argument>
</arguments>
</type>
</config>
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 Yireo_LokiCheckout also includes definitions that are needed. These are pulled in with the following statement:
@magentoImport "Yireo_LokiCheckout::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.
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="Yireo_LokiCheckoutLuma/css/tailwind.css"/>
</head>
</page>