Magento Question posted in
The official documentation can be found here.

Magento 2, how to remove the order-summary in shipping-step?

i am trying to customize the checkout of a Magento 2. At the moment, i want to change the appearance of the “shipping”-step. Can anyone give me a hint how to remove the sidebar (including the order summary)?

It should only bei visible on the “payment”-step, not in “shipping”.

Tags:

4

Answers


  1. 0

    The sidebar is added in the layout file checkout_index_index.xml in magento/module-checkout/view/frontend/layout/. You actually can’t modify that in order to meet your requirements without extensively modding the checkout.

    There is an easier solution to do it with CSS though.

    Put this line to your styles: .opc-summary-wrapper{display:none;} and modify magento/module-checkout/view/frontend/web/js/model/step-navigator.js do not edit core files! Make a copy in your Theme or Module and add the following code to the function getActiveItemIndex 

    if (activeIndex == 1) {
  $('.opc-summary-wrapper').css("display", "block");
} 
else {
  $('.opc-summary-wrapper').css("display", "none");
}

    Worked for me. Not my idea though,
    found this answer on magento stackexchange: https://magento.stackexchange.com/questions/229001/checkout-remove-sidebar-only-in-step-1

    Login or Signup to reply.
  2. 0

    Magento’s docs explain how to disable an item here: https://devdocs.magento.com/guides/v2.4/howdoi/checkout/checkout_customize.html#disable

    removing the summary (in this case, in mobile) is as simple as adding the following to your theme’s checkout_index_index.xml

    <item name="estimation" xsi:type="array">
      <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

    The checkout_index_index.xml should look something like this

    <?xml version="1.0" encoding="utf-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="estimation" xsi:type="array">
                                    <item name="componentDisabled" xsi:type="boolean">true</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
    Login or Signup to reply.
  3. 0

    Copy

    checkout_index_index.xml

    from

    PROJECT_ROOT/vendor/magento/module-checkout/view/frontend/layout

    folder and find the following line of code

    <item name="sidebar" xsi:type="array">

    then replace the lines of codes under this item block and place the following line of code

    <item name="disbaled" xsi:type="string">true</item>

    It will remove the order summary as well as the sidebar that contains the order summary block in shipping step of checkout page

    Hope you’ll find it helpful.

    Login or Signup to reply.
  4. 0

    create Vendor/Module/view/frontend/web/template/checkout/sidebar.html file & make copy paste html template from Magento_Checkout/view/frontend/web/template/sidebar.html

    <div id="opc-sidebar"
 data-bind="visible: canDisplaySidebarSummaryBlock(), afterRender:setModalElement, mageInit: {
'Magento_Ui/js/modal/modal':{
    'type': 'custom',
    'modalClass': 'opc-sidebar opc-summary-wrapper',
    'wrapperClass': 'checkout-container',
    'parentModalClass': '_has-modal-custom',
    'responsive': true,
    'responsiveClass': 'custom-slide',
    'overlayClass': 'modal-custom-overlay',
    'buttons': []
}}">

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

<div class="opc-block-shipping-information">
    <!-- ko foreach: getRegion('shipping-information') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</div>

    then. create Vendor/Module/view/frontend/web/js/view/checkout/sidebar-mixin.js

    define([
    'uiComponent',
    'ko',
    'jquery',
    'Magento_Checkout/js/model/step-navigator',
], function (Component, ko, $, stepNavigator) {
    'use strict';

    var mixin = {

        /**
         * current step is #payment or not. 
         * 
         * @returns {Boolean}
         */
        canDisplaySidebarSummaryBlock: function () {
            if(stepNavigator.isProcessed('shipping')) {
                // if stepNavigator is not #shipping . then display Order Summary & remove class of width 100%
                $('.opc-summary-wrapper').css("display", "block");
                $('#checkout .opc-wrapper').removeClass('w-100');
            }else{
                $('.opc-summary-wrapper').css("display", "none");
                $('#checkout .opc-wrapper').addClass('w-100');
            }

            return stepNavigator.isProcessed('shipping');
        }
    }

    return function (target) {
        return target.extend(mixin);
    };
});

    then Vendor/Module/view/frontend/requirejs-config.js

    var config = {
    config: {
        mixins: {             
            'Magento_Checkout/js/view/sidebar': {
                'Microtech_Storepickup/js/view/checkout/sidebar-mixin': true
            },
        }
    }
}

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

    <?xml version="1.0"?>

<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">
                                <!-- Order Summary -->
                                <item name="sidebar" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Microtech_Storepickup/checkout/sidebar</item>
                                        <item name="componentDisabled" xsi:type="boolean">false</item>
                                    </item>

                                    <!-- <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Microtech_Storepickup/checkout/summary</item>
                                            </item>
                                        </item>
                                    </item> -->
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search