Magento2 : Show summery total on checkout page

Question

How to display summery total on checkout page on sidebar above cart items list?

Answer 1

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

UPDATED ANSWER

I'm creating these files in my custom theme but it can also be done with an extension. If you use an extension then the requirejs-config.js file will need to be adjust slightly according to the magento documentation.

theme/Magento_Checkout/requirejs-config.js:

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

theme/Magento_Checkout/web/js/view/summary/abstract-total-mixin.js:

define([

], function () {
    'use strict';

    return function (Component) {
        return Component.extend({
            isFullMode: function () {
                var result = this._super();
                
                if (!this.getTotals()) {
                    return false;
                }
                
                return true;
            }
        });
    };
});

theme/Magento_Checkout/web/js/view/shipping-mixin.js:

define([
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/set-shipping-information'
], function (
    quote,
    setShippingInformationAction
) {
    'use strict';
    
    return function (Component) {
        var currentMethod;

        return Component.extend({
            initialize: function() {
                this._super();
                
                quote.shippingMethod.subscribe(function (method) {
                    setShippingInformationAction();
                });
            }
        });
    };
});

UPDATE Magento 2.4.3 When I updated to magento 2.4.3 from 2.3.6 I started getting an error that the billing address street was not type of array. This is due to new behavior in the checkout where the billing address is rendered as soon as the shipping data is pushed to the server. Since we are pushing it early (potentially before the shipping address has been entered) this fix is needed.

theme/Magento_Checkout/web/js/action/select-billing-address.js:

line 27 replace:

quote.billingAddress(address);

with:

if(Array.isArray(billingAddress.street)){
    quote.billingAddress(address);
}