2

I want to hide the sidebar in this Shipping Address Page on Checkout.

Note: I only want to hide the sidebar in Shipping Address step, not in other steps.

I did some research on it But found Solution for custom Step LINK.

image

Please guide me to achieve a solution for this.

Thanks in advance.

  • magento.stackexchange.com/questions/174206/… Check this out. – Condor Apr 12 '18 at 6:58
  • @bramulous Hi, I mentioned this link in the question. I tried it But it is for custom step not for shipping address step – Raghav Apr 12 '18 at 7:02
  • How you have added edit button on address?any extension? – Ketan Borada Apr 18 '18 at 5:09
  • 1
    No. Its a default functionality but have to enable it js file – Raghav Apr 18 '18 at 5:12
  • waw,can you give me file and line number? thanks – Ketan Borada Apr 18 '18 at 8:43
2
+50

Create a custom module:

We need to use our custom component and template.

Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="component" xsi:type="string">Vendor_Module/js/view/summary</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Vendor_Module/summary</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Vendor/Module/view/frontend/web/js/view/summary.js

define([
    'Magento_Checkout/js/view/summary',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator'
], function (Component, quote, stepNavigator) {
    'use strict';

    return Component.extend({
        /**
         * @return {Boolean}
         */
        isVisible: function () {
            return !quote.isVirtual() && stepNavigator.isProcessed('shipping');
        }
    });
});

Our custom script should extend from the original summary script and we need to check the shipping step is processed or not.

Vendor/Module/view/frontend/web/template/summary.html

<!-- ko if: isVisible() -->
    <div class="opc-block-summary" data-bind="blockLoader: isLoading">
        <span data-bind="i18n: 'Order Summary'" class="title"></span>
        <!-- ko foreach: elems() -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>
<!-- /ko -->

Try to clear your Magento cache and see the result.

  • Hi Khoa, Thanks for your Answer. I want remove entire sidebar and make it one column block without sidebar. But it was displaying like this – Raghav Apr 16 '18 at 11:55
  • Waiting me. I think we can do it easily. – Khoa TruongDinh Apr 16 '18 at 12:14
  • Didn't Get you. Can you Suggest me how to achieve this. Thanks – Raghav Apr 16 '18 at 12:16
  • You can try this solution: magento.stackexchange.com/a/157802/33057 – Khoa TruongDinh Apr 16 '18 at 12:22
  • But I want to remove sidebar only from Shipping address step. It was removing on Payment step also. – Raghav Apr 17 '18 at 2:27
1

You need to add <!-- ko if: isShow() --> this line in your summary.phtml file

Vendor/Module/view/frontend/web/template/summary.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko if: isShow() -->

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" class="title"></span>
    <!-- ko foreach: elems() -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>
<!-- /ko -->

After, call isShow() function and define Magento_Checkout/js/model/step-navigator in your summary.js file

Vendor/Module/view/frontend/web/js/view/summary.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'uiComponent',
    'Magento_Checkout/js/model/totals',
    'Magento_Checkout/js/model/step-navigator'

], function (Component, totals, stepNavigator) {
    'use strict';

    return Component.extend({
          isShow: function () {
       return stepNavigator.isProcessed('shipping');
    },

     isLoading: totals.isLoading

    });

});
  • @Raghav Please, try our solution and let us know is this working for you or not? – Emipro Technologies Pvt. Ltd. Apr 17 '18 at 13:08
  • Thanks for your answer but Its not working. I want to remove complete sidebar and make shipping address block single column. Only in shipping address step not in payment step. – Raghav Apr 18 '18 at 9:25

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.