0

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.

enter image description here

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.

  • What I understand from your question is both the steps (your custom & shipping) are coming once you go checkout, but you want only your step to come first ?? – Mohammad Mujassam May 10 '17 at 5:40
  • @MohammadMujassam Yes. – Prince Patel May 10 '17 at 5:41
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.

  • I already override shipping.js there issue with only condition – Prince Patel May 10 '17 at 6:54
  • @Mohammand Mujassam. I have not variable of "isCustomerLoggedIn" but I directly use customer.isLoggedIn() and your condition working fine. Thank You – Prince Patel May 10 '17 at 6:56

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.