How to show subtotals in first checkout step?

All of these solutions imply that you need to copy the abstract-total.js to your own theme, but this is not necessary. Even more so: it might introduce new problems as soon as a Magento update decides to update the original abstract-total.js.

A better (more unobtrusive) solution to this is to make use of a RequireJs mixin. This way you can extend a JavaScript object provided by Magento and only add your own adjustments:

In view/frontend/requirejs-config.js:

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

In view/frontend/web/js/abstract-total-mixin.js:

define([], function () { "use strict"; return function (target) { return target.extend({ /** * @return {*} */ isFullMode: function () { if (!this.getTotals()) { return false; } return true; } }); } }); 

Now you have the same results in an upgrade-safe way ;-)

I had a similar issue and this is the way i managed to get it working.

You can override the following file

app/code/Magento/Checkout/view/frontend/web/js/view/summary/abstract-total.js

and update isFullMode function to return

true

instead of

return stepNavigator.isProcessed('shipping');

isFullMode: function() { if (!this.getTotals()) { return false; } return true; } 

Full code of overriden abstract-total.js file

/** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ /*global define*/ define( [ 'uiComponent', 'Magento_Checkout/js/model/quote', 'Magento_Catalog/js/price-utils', 'Magento_Checkout/js/model/totals', 'Magento_Checkout/js/model/step-navigator' ], function (Component, quote, priceUtils, totals, stepNavigator) { "use strict"; return Component.extend({ getFormattedPrice: function (price) { return priceUtils.formatPrice(price, quote.getPriceFormat()); }, getTotals: function() { return totals.totals(); }, isFullMode: function() { if (!this.getTotals()) { return false; } return true; } }); } ); 

Hope it helps

In addition to enabling the full mode for the cart summary, you want to make sure its shipping price, taxes and grand total get refreshed when picking/changing shipping methods during that first step.

You can copy the following file to your theme (don't edit it directly):

module-checkout/view/frontend/web/js/view/summary/shipping.js

Add the Magento_Checkout/js/model/cart/estimate-service to the list of dependencies like so:

define([ 'jquery', 'Magento_Checkout/js/view/summary/abstract-total', 'Magento_Checkout/js/model/quote', 'Magento_Checkout/js/model/cart/estimate-service' ], function ($, Component, quote, estimateService) { 'use strict'; //...

Source: https://magento.stackexchange.com/a/176238/62137

Maybe it is interesting to take a look at the Clean Checkout module which simplifies the checkout and also adds the subtotal to the shipping step.

https://github.com/danslo/CleanCheckout

Basically its not magento default functionality to enable total summary in shipping step. So we have to change some of files.
Let's follow below steps:

Step:1 To enable summary override below file.

app/code/Magento/Checkout/view/frontend/web/js/view/summary/abstract-total.js

override isFullMode()

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

It is working (y).