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
5
  • magento.stackexchange.com/questions/174206/… Check this out. Commented 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 Commented Apr 12, 2018 at 7:02
  • How you have added edit button on address?any extension? Commented Apr 18, 2018 at 5:09
  • 1
    No. Its a default functionality but have to enable it js file Commented Apr 18, 2018 at 5:12
  • Go to this link and make return true in isEditable function github.com/magento/magento2/issues/4771 Commented Apr 18, 2018 at 9:21

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.