Magento – How to display order summary sidebar in shipping step of checkout page in magento 2

checkout-pagemagento2magento2.2.6order-summaryorders

I have referred the link

Magento2 : Show summery total on checkout page

and made changes in abstract-total.js and shipping.js. Now order summary is displayed and shipping amount updates correctly on changing shipping method but it is not getting updated in grand total. Any solution ?

Best Answer

UPDATED ANSWER

As @badwi noted, the old answer started creating an error. Here is the new way to do it using magento best practices. This is tested as working in M2.3.6. I'm creating these files in my custom theme but it can also be done with an extension. If you use an extension then the requirejs-config.js file will need to be adjust slightly according to the magento documentation.

theme/Magento_Checkout/requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/abstract-total': {
                'Magento_Checkout/js/view/summary/abstract-total-mixin': true
            },
            'Magento_Checkout/js/view/shipping': {
                'Magento_Checkout/js/view/shipping-mixin': true
            }
        }
    }
};

theme/Magento_Checkout/web/js/view/summary/abstract-total-mixin.js:

define([

], function () {
    'use strict';

    return function (Component) {
        return Component.extend({
            isFullMode: function () {
                var result = this._super();
                
                if (!this.getTotals()) {
                    return false;
                }
                
                return true;
            }
        });
    };
});

theme/Magento_Checkout/web/js/view/shipping-mixin.js:

define([
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/set-shipping-information'
], function (
    quote,
    setShippingInformationAction
) {
    'use strict';
    
    return function (Component) {
        var currentMethod;

        return Component.extend({
            initialize: function() {
                this._super();
                
                quote.shippingMethod.subscribe(function (method) {
                    if (currentMethod !== method) {
                        setShippingInformationAction();
                        currentMethod = method;
                    }
                });
            }
        });
    };
});
Related Topic