Totals Block does not show in Order Summary in Checkout Page;Magento2

Question

In Order Summary block(Checkout Page), totals block is missing. In the Cart Page, totals block is displayed.

I have to override checkout_cart_index.xml in my theme for Cart Page. The code in checkout_cart_index.xml is:

My console has Js errors. I have jquery.min.js version 1.12.4(Default one) in my theme. 1. Are these JS errors responsible for my issue?

2. Why do I get totals block in Cart Page but not in Checkout Page?

Can you please guide me to bring back my Totals block. Thanks in advance.

Answer 1

Total is display on Payment page not on shipping. There are two changes required to display summary in shipping step. Override both files in your current theme.

1. change /Magento_Checkout/js/view/summary/abstract-total.js file

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 stepNavigator.isProcessed('shipping'); // comment this line to enable right side bar in checkout shipping step.  
                return true; //add this line to display forcefully summary in shipping step.
            }
        });
    }
);

Now order summary will be displayed in shipping step.

2. change /Magento_Checkout/js/view/summary/shipping.js file This change is for to update shipping charge in the selection of shipping methods.

Change getValue() function.

 getValue: function () {
            var price;

            if (!this.isCalculated()) {
                return this.notCalculatedMessage;
            }
            //var price =  this.totals().shipping_amount; //comment this line

           var shippingMethod = quote.shippingMethod(); //add these both line
              var price =  shippingMethod.amount; // update data on change of the shipping method

            return this.getFormattedPrice(price);
        }

Hope this answer will help you.

Answer 2

I think it's normal. Total should be displayed on checkout second step (Review & Payments). Did you check it?

Answer 3

this is the full solution you need to modify 3 files

shipping.js

define([
    'jquery',
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/cart/estimate-service' // <--- add this 
], function ($, Component, quote, estimateService) { // <--- add the last param
....

 getValue: function () {
        var price;

        if (!this.isCalculated()) {
            return this.notCalculatedMessage;
        }
        //var price =  this.totals().shipping_amount; //comment this line

       var shippingMethod = quote.shippingMethod(); //add these both line
          var price =  shippingMethod.amount; // update data on change of the shipping method

        return this.getFormattedPrice(price);
    }

abstract-total.js

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator'
], function (Component, quote, stepNavigator) { 
...

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

grand-total.js

define([
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/step-navigator'
], function (Component, quote,stepNavigator) {
..
 getValue: function () {
    
        //
          var totals = quote.getTotals();
            if(typeof(quote.shippingMethod()) != "undefined" && quote.shippingMethod() !== null) {
            var shippingMethod = quote.shippingMethod();
            var price =  shippingMethod.amount;
        }
            var plus = "";
            var minus = "";
        if(totals['base_shipping_amount'] < price){
            plus = totals['base_shipping_amount'] + price;
            return this.getFormattedPrice((this.getPureValue() + price));
        } else if(totals['base_shipping_amount'] > price){
            minus = totals['base_shipping_amount'] - price;
            return this.getFormattedPrice((this.getPureValue() - minus));
        }
        
        
        return this.getFormattedPrice(this.getPureValue());
        }

Clear Magento cache and check.