Custom component skips step validation

If you add a custom component to a Loki Checkout step, you might include certain fields that are required to be filled in, before proceeding to the next step. When this component is actually not validated before going to the next step, this document helps you debug what goes wrong.

The validation of an entire step takes place via the step-button (a component of type LokiCheckoutStepForwardButton). So the first thing to validate is to see if the custom component is picked up by this logic.

Is the component in the LokiCheckout store

First of all, determine if the custom component is registered in the component store. Run the following in the browsers Error Console:

Alpine.store('LokiCheckout').getComponentIds();

If the listed component IDs do not include your custom component, you probably are working with a regular Alpine.js component and not a Loki Component.

Is the component registered with the right step?

If the component is properly registered, the next logical thing to check is the step in which the component is listed. Run the following in the browsers Error Console (in this case, checking if the custom component is in the step billing):

Alpine.store('LokiCheckout').getComponentsByStep(['billing', 'any']);

If the component is not listed, its step is probably wrong.

Adding a step to your component

We recommend you not to hard-code a value for the property step into your Alpine.js component. Do not hard-code the method getStep() in your ComponentViewModel either.

Instead, just makes sure your Alpine.js component has a step property (for instance, by extending from ``). And then make sure your ComponentViewModel is extending from LokiCheckout\Core\Component\Base\Generic\CheckoutViewModel. This way the step is determined dynamically by its location in the XML layout.