How to show checkout price summary in shipping step Magento 2?

Question

The checkout sidebar cart summary with the price is displayed on at payment step, I want to show them on the shipping step as well. is there any solution to do this?

Screenshots

Here I want to show:

This section:

Answer 1

Below step need to follow:

Step 1: create require config js files under the

Vendor/ModuleName/view/frontend/requirejs-config.js

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

Step 2: Create an abstract total js for showing order summary in step 1 as below

Vendor/ModuleName/view/frontend/web/js/view/summary/abstract-total-mixin

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/step-navigator'
],
function (Component, stepNavigator) {
    "use strict";
    return function (abstractTotal) {
        return abstractTotal.extend({
            isFullMode: function() {
                if (!this.getTotals() || stepNavigator.getActiveItemIndex() === 1) {
                    return false;
                }
                return true; //add this line to display forcefully summary in shipping step.
            }
        });
    }
});

Step 3: Create a file for showing shipping method in order summary total.

Vendor/ModuleName/view/frontend/web/js/view/summary/shipping-mixin

define([
   'jquery',
   'Magento_Checkout/js/view/summary/abstract-total',
   'Magento_Checkout/js/model/quote'
], function ($, Component, quote) {
    'use strict';
    return function (shipping) {
        return shipping.extend({
            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);
            }
        });
    }});