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

Question

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 ?

Answer 1

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) {
                    setShippingInformationAction();
                });
            }
        });
    };
});

UPDATE Magento 2.4.3 When I updated to magento 2.4.3 from 2.3.6 I started getting an error that the billing address street was not type of array. This is due to new behavior in the checkout where the billing address is rendered as soon as the shipping data is pushed to the server. Since we are pushing it early (potentially before the shipping address has been entered) this fix is needed.

theme/Magento_Checkout/web/js/action/select-billing-address.js:

line 27 replace:

quote.billingAddress(address);

with:

if(Array.isArray(billingAddress.street)){
    quote.billingAddress(address);
}

Answer 2

Override grand-total.js file too and define step-navigator,

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

after that replace getValue() function with below code :

getValue: function () {
            var totals = quote.getTotals()();
            if(typeof(quote.shippingMethod()) != "undefined" && quote.shippingMethod() !== null) {
            var shippingMethod = quote.shippingMethod();
            var price =  shippingMethod.amount;
        }
            var plus = "";
            var minus = "";
        if(totals['base_shipping_amount'] < price){
            plus = totals['base_shipping_amount'] + price;
            return this.getFormattedPrice((this.getPureValue() + price));
        } else if(totals['base_shipping_amount'] > price){
            minus = totals['base_shipping_amount'] - price;
            return this.getFormattedPrice((this.getPureValue() - minus));
        }
        return this.getFormattedPrice(this.getPureValue());
        } 

Clear Magento cache and check.