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.

Improve this question
6
  • magento.stackexchange.com/questions/174206/… Check this out.
    – Condor
    Apr 12, 2018 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, 2018 at 7:02
  • How you have added edit button on address?any extension?
    – Ketan Borada
    Apr 18, 2018 at 5:09
  • 1
    No. Its a default functionality but have to enable it js file
    – Raghav
    Apr 18, 2018 at 5:12
  • waw,can you give me file and line number? thanks
    – Ketan Borada
    Apr 18, 2018 at 8:43

2 Answers 2

Reset to default
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.

Improve this answer
17
  • 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, 2018 at 11:55
  • Waiting me. I think we can do it easily.
    – Khoa TruongDinh
    Apr 16, 2018 at 12:14
  • Didn't Get you. Can you Suggest me how to achieve this. Thanks
    – Raghav
    Apr 16, 2018 at 12:16
  • You can try this solution: magento.stackexchange.com/a/157802/33057
    – Khoa TruongDinh
    Apr 16, 2018 at 12:22
  • But I want to remove sidebar only from Shipping address step. It was removing on Payment step also.
    – Raghav
    Apr 17, 2018 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

    });

});
Improve this answer
2
  • @Raghav Please, try our solution and let us know is this working for you or not?
    – Emipro Technologies Pvt. Ltd.
    Apr 17, 2018 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, 2018 at 9:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.