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.