I have made extra step in between shipping and payment steps by using KO. Now I want to add some logic in HTML file and for that I want to run php code so that I can call my model to check my module is active or not that I can easily do in PHTML. Any good suggestion what should I do?


Add the JavaScript file implementing the new step

A new checkout step must be implemented as UI component. That is, its JavaScript implementation must be a JavaScript module.

The file must be stored under the /view/frontend/web/js/view directory.

A sample my-step-view.js with comments follows:

function (
) {
    'use strict';
    * mystep - is the name of the component's .html template, 
    * <Vendor>_<Module>  - is the name of the your module directory.
    return Component.extend({
        defaults: {
            template: '<Vendor>_<Module>/mystep'

        //add here your logic to display step,
        isVisible: ko.observable(true),

        * @returns {*}
        initialize: function () {
            // register your step
                //step code will be used as step content id in the component template
                //step alias
                //step title value
                'Step Title',
                //observable property with logic when display step or hide step

                _.bind(this.navigate, this),

                * sort order value
                * 'sort order value' < 10: step displays before shipping step;
                * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                * 'sort order value' > 20 : step displays after payment step

            return this;

        * The navigate() method is responsible for navigation between checkout step
        * during checkout. You can add custom logic, for example some conditions
        * for switching to your custom step 
        navigate: function () {


        * @returns void
        navigateToNextStep: function () {


Add the .html template

In the module directory, add the .html template for the component. It must be located under the /view/frontend/web/template directory.

A sample mystep.html follows:

<!--The 'step_code' value from the .js file should be used-->

<div id="checkout-step-title"

    <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
        <div class="actions-toolbar">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>

Add your step to the Checkout page layout

For the new step to be displayed on the page, you need to declare it in the Checkout page layout, which is defined in checkout_index_index.xml.

So you need to add an extending checkout_index_index.xml layout file in the following location: /view/frontend/layout/checkout_index_index.xml

A sample checkout_index_index.xml follows:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!-- The new step you add -->
                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                                <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                                <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                                <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->

And in last run

 php bin/magento setup:upgrade
 php bin/magento setup:static-content:deploy
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.