Step logic

The LokiCheckout supports multiple steps and advanced customizations to the step logic. This page gives you the details that you need for this.

What are steps?

Steps are nothing more than child blocks to the parent block loki-checkout.steps. They do not need to be registered, except for the fact that they need to be a LokiComponent with a ViewModel that implements LokiCheckout\Core\Component\Checkout\Step\StepViewModelInterface and that they need to be registered in the etc/loki_checkout.xml file.

For example, the default theme is defined in the etc/loki_checkout.xml file of the LokiCheckout_Core module as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:LokiCheckout_Core:etc/loki_checkout.xsd">
    <themes>
        <theme name="default" label="Multi Step Checkout (default)">
            <steps>
                <step name="shipping" blockName="loki-checkout.steps.shipping" />
                <step name="billing" blockName="loki-checkout.steps.billing" />
            </steps>
        </theme>
    </themes>
</config>

Next, in the XML layout file loki_checkout_theme_default.xml, the step blocks are placed within the parent block loki-checkout.steps.

StepNavigator

Steps are automatically detected by the class LokiCheckout\Core\Step\StepNavigator (dubbed here as StepNavigator). The StepNavigator maintains a list of all steps. It knows the current step (stored in the checkout session), it knows how many steps there are, what the first step is, what the last step is, it is able to go back and forward, etcetera.

A step (so actually an instance of StepViewModelInterface) has multiple flags that are important within the StepValidator.

  • Enabled or not: When a step is not enabled, it is removed from the list of steps.
  • Accessible or not: When a step is enabled but not accessible, it is shown in the navigation, but you simply can not navigate to it.
  • Visible or not: When a step is enabled and accessible, it is visible when it is shown. Normally, this simply defaults to true. However, when a one-page checkout is used, this flag allows toggling the visibility of the step in Alpine.js.

The step button component

The step button (forward or backward) is a Loki Component, so it is rendered via ComponentViewModel and whenever the button is hit, a POST message is sent via AJAX to Magento, where it is handled by the ComponentRepository. In the case of the forward button, this is LokiCheckout\Core\Component\Checkout\StepButton\StepForwardButton\StepForwardButtonRepository. There, logic is handed over to the LokiCheckout\Core\Step\StepNavigator to navigate to the next step. Each step allows validation, so that is validation fails, the next step is never navigated to.

A special story deals with the final step (as in: when the current step is actually the last step in the checkout). At this moment, the step navigator calls upon LokiCheckout\Core\Step\FinalStep which validates (calling upon the regular quote validator) and submits the last details. For instance, the quote is converted into an order, events are being dispatched, an email is being sent, etcetera.

Adding new steps

More docs coming soon
Last modified: September 19, 2025