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);             }