I have already checked Stack for answers to my problem, I cant seem to find anything that corresponds with or resolves this issue. But apologies if this has indeed already been answered somewhere; a point in the right direction would be great in that case

I have some experience with M2 checkout, only done basic stuff so far, nothing to this level.

So, I need to create a new checkout step between Shipping Method step and Payment step. I followed devdocs to do this: https://devdocs.magento.com/guides/v2.0/howdoi/checkout/checkout_new_step.html

So now I have a new step (albeit only a html template) as described in above devdocs guide, that sits between Shipping Method step and Payment step, so all good so far.

The problem I have is, that in my template in the new step, I need to call a block or model method, that returns data from an external source. I dont know how to do this in M2; I have tried several approaches, none have worked so far.

so following the dev docs guide....

  • my js file


    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: 'MyVendor_MyModule/checkout/shipping/storecollection'

            //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
                    'Choose Store',
                    //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 () {

            getBasketThings: function () {
                return 'basket stocks';
  • my html template


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

    <li id="step_code" data-bind="fadeVisible: isVisible">
        <div class="step-title" data-bind="i18n: 'Chose Store'" data-role="title"></div>
        <div id="checkout-step-title"

            <!-- I need to display data from my block/model method here somehow -->

            <!-- different form and button for each branch -->
            <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: 'Select'--><!-- /ko --></span>

  • Checkout page layout


<?xml version="1.0"?>

<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">
                                    <!-- Custom Step -->
                                    <item name="storecollection" xsi:type="array">
                                        <item name="component" xsi:type="string">MyVendor_MyModule/js/view/checkout/shipping/storecollection</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">1</item>
                                        <item name="children" xsi:type="array">
                                            <!--add here child component declaration for your step-->


It seems using this approach that the template has to be a html file and not phtml. Using phtml seems to break the checkout; this makes life more difficult in trying to call block/model methods.

So, from my new checkout step template, I need to call and render the response from my block/model method.

Ive looked into ConfigProviders, injecting blocks, ajax amongst other things, but detailing my attempts would serve no value as nothing has worked so far, so no real point going over any of that.

Hope the problem read well and makes sense. Im sure theres a solution, any examples or pointers would be much appreciated.

Your Answer

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

Browse other questions tagged or ask your own question.