Name: Magento Development
Brand: Mage Monkeys
Rating: 4.8 (552 reviews)

Basically, Magento doesn’t provide functionality to enable total summary in shipping step. So we have to change some of the files.
Let’s follow below steps:

Step 1: To enable summary, you need to override below file.

app/code/Magento/Checkout/view/frontend/web/js/view/summary/abstract-total.js
Override isFullMode() function
isFullMode: function() { if (!this.getTotals()) { return false; } // return stepNavigator.isProcessed('shipping'); return true; }
1
2
3
4
5
6
7
isFullMode: function() {
            if (!this.getTotals()) {
                return false;
            }
           // return stepNavigator.isProcessed('shipping');
            return true;
        }

Step:2 To change shipping price value on selection of the shipping method. You can override the following file.
app/code/Magento/Checkout/view/frontend/web/js/view/summary/shipping.js
Change getValue() function.
getValue: function() { if (!this.isCalculated()) { return this.notCalculatedMessage; } //var price = this.totals().shipping_amount; /* comment this line and add below two lines. */ var shippingMethod = quote.shippingMethod(); var price = shippingMethod.amount; return this.getFormattedPrice(price); }
1
2
3
4
5
6
7
8
9
10
getValue: function() {

                if (!this.isCalculated()) {
                    return this.notCalculatedMessage;
                }
                //var price =  this.totals().shipping_amount; /* comment this line and add below two lines. */
                 var shippingMethod = quote.shippingMethod();
                var price =  shippingMethod.amount;
                return this.getFormattedPrice(price);
            }