How to show subtotals in first checkout step?

Question

I want to add the subtotals to first checkout step "shipping" into the sidebar. In the checkout_index_index.xml

I can see the totals but I have no clue why it is not loading in the first checkout step.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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).