Magento 2: Disable checkout step

Question

I add a new step in checkout. Now I am working on functionality like if customer logged in: default shipping step disabled it's working fine.

But it displays both my custom step HTML and also shipping step HTML in the first step.

This is my Knockout js where I add if condition for check customer login status.

Shipping.js

define(
    [
        'jquery',
        'ko',
        'Magento_Customer/js/model/customer',
        'Magento_Checkout/js/view/shipping'
    ],
    function(
        $,
        ko,
        customer,
        Component
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Prince_CheckoutStep/shipping',
            },
            visible: function(){
                if(!customer.isLoggedIn())
                {
                    ko.observable(false);
                }
                else
                {
                    ko.observable(true);
                }
            },

            initialize: function () {
                var self = this;
                this._super();
            }
        });
    }
);

This is my HTML where I add fadevisible property to li tag

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible">
    <div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <!-- ko if: (!quoteIsVirtual) -->
            <!-- ko foreach: getRegion('customer-email') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        <!--/ko-->

        <!-- ko foreach: getRegion('address-list') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- ko foreach: getRegion('address-list-additional-addresses') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- Address form pop up -->
        <!-- ko if: (!isFormInline) -->
        <button type="button"
                data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
                class="action action-show-popup">
            <span data-bind="i18n: 'New Address'"></span></button>
        <div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible()">
            <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
        </div>
        <!-- /ko -->

        <!-- ko foreach: getRegion('before-form') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

        <!-- Inline address form -->
        <!-- ko if: (isFormInline) -->
        <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
        <!-- /ko -->
    </div>
</li>

Also please explain what is difference between visible, fadevisible and enable in knockout js.

Answer 1

You Need to override the shipping.js.

Here the the path:-

Copy this file-

Magento\Checkout\view\frontend\web\js\view\shipping.js

In theme folder as below-

app\design\frontend\Vendor\theme\Magento_Checkout\web\js\view

Now the file you copied (shipping.js) some where line no 123-124 (inside initialize function) put your condition to display this step.

if (!isCustomerLoggedIn){
       self.visible(false);
   }

not sure about your condition of displaying this step but hope above would be your condition. you can change the condition as per your requirement.

Do static-content deploy flush the cache you would see the change.

Alternatively you can directly edit this file-- pub/static/frontend/Vendor/theme/en_US/Magento_Checkout/js/view/shipping.js

but this is just for testing as this static content which will be deleted after you deploying the content again.

Hope this will help.

Note: Any step you don't want show when checkout step loads put you condition inside initialize function to the respective js.