The LokiCheckout supports multiple steps and advanced customizations to the step logic. This page gives you the details that you need for this.
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
.
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.
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.