How to show subtotals in first checkout step?

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