Mfrhtyj

I'm customizing the checkout process in magento 2 by adding a custom step between Shipping and Payment steps and by adding a checkbox in Shipping step.

The problem

When going to checkout page for the first time both my Shipping and Custom steps are selected as shown in the image.

So there are two questions:

1. How can i make that only the Shipping step is visible when i go to checkout page for the first time?




2. How can i make that if i select the checkbox that i added in Shipping step, i skip my Custom step (going directly from shipping to payment) but if i do not select the checkbox i go to my Custom step?

What i have done so far

I've created the custom step using the documents provided by magento team in http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

This is my Vendor_CustomCheckout/view/frontend/web/js/view/step-view.js

define(

[

    'ko',

    'uiComponent',

    'underscore',

    'Magento_Checkout/js/model/step-navigator',

    'Magento_Ui/js/form/form'

],

function (

    ko,

    Component,

    _,

    stepNavigator

) {

    '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_CustomCheckout/mystep'

        },



        //add here your logic to display step,

        isVisible: ko.observable(true),



        /**

         *

         * @returns {*}

         */

        initialize: function () {

            this._super();

            // register your step

            stepNavigator.registerStep(

                //step code will be used as step content id in the component template

                'custom_step',

                //step alias

                null,

                //step title value

                'Direccion de Facturacion',

                //observable property with logic when display step or hide step

                this.isVisible,



                _.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

                 */

                15

            );



            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 () {

            this.isVisible(false);

            this.isVisible = false;

        },



        /**

         * @returns void

         */

        navigateToNextStep: function () {

            // trigger form validation

            this.source.set('params.invalid', false);

            this.source.trigger('customStepForm.data.validate');

            console.dir(this.isVisible);

            // verify that form data is valid

            if (!this.source.get('params.invalid')) {

                // data is retrieved from data provider by value of the customScope property

                var formData = this.source.get('customStepForm');

                // do something with form data

                console.dir(formData);

            }

            stepNavigator.next();

        }

    });

}

);   

This is my Vendor_CustomCheckout/view/frontend/layout/checkout_index_index.xml

<item name="custom-step" xsi:type="array">

    <item name="component" xsi:type="string">Vendor_CustomCheckout/js/view/step-view</item>

    <item name="provider" xsi:type="string">checkoutProvider</item>

    <item name="config" xsi:type="array">

        <item name="template" xsi:type="string">Vendor_CustomCheckout/mystep</item>

    </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.5</item>

    <item name="children" xsi:type="array">

    <!--add here child component declaration for your step-->

        <item name="custom-step-form-fieldset" xsi:type="array">

        <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->

            <item name="component" xsi:type="string">uiComponent</item>

            <!-- the following display area is used in template (see below) -->

            <item name="displayArea" xsi:type="string">custom-step-form-fields</item>

            <item name="children" xsi:type="array">

                <item name="name" xsi:type="array">

                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>

                    <item name="config" xsi:type="array">

                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->

                        <item name="customScope" xsi:type="string">customStepForm</item>

                        <item name="template" xsi:type="string">ui/form/field</item>

                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>

                    </item>

                    <item name="provider" xsi:type="string">checkoutProvider</item>

                    <item name="dataScope" xsi:type="string">customStepForm.name</item>

                    <item name="label" xsi:type="string">Nombre</item>

                    <item name="sortOrder" xsi:type="string">1</item>

                    <item name="validation" xsi:type="array">

                        <item name="required-entry" xsi:type="string">true</item>

                    </item>

                </item>                

        </item>

    </item>

</item>

1. Instead of you, I added the new custom step before and not after the Shipping Information step but I discovered the same behavior. Did you managed to solve it?


2. It should be possible to use the navigateTo(code, scrollToElement) function of the Magento_Checkout/js/model/step-navigator for this purpose.
   
   
   
   
   • Actual the next() function of the step-navigator.js is called in the setShippingInformation() function of the Magento_Checkout/js/view/shipping.js(which will be called by clicking the Next button).
   
   
   • In order to override this function you can copy the whole shipping.js file to your custom module and add the following to your custom checkout_index_index.xml.
   
   
   
   

checkout_index_index.xml

<item name="steps" xsi:type="array">

...

    <item name="shipping-step" xsi:type="array">

        <item name="children" xsi:type="array">

            <item name="shippingAddress" xsi:type="array">

                <item name="component" xsi:type="string"><Vendor>_<ModuleName>/js/view/shipping</item>

            </item>

        </item>

    </item>

...

</item>

If this does work, I suggest you to not override the whole shipping.js file, but extending it, like itself extends the Magento_Ui/js/form/form (Component). Then you should be able to just override the setShippingInformation() function.