Magento 2 – How to Show Checkout Price Summary in Shipping Step
checkoutmagento2onepage-checkoutorder-summary
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?
define(
[
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/cart/totals-processor/default'
],
function (stepNavigator, quote, totalsDefaultProvider) {
"use strict";
var estimateTotalsShipping = function () {
totalsDefaultProvider.estimateTotals(quote.shippingAddress());
};
// this should be added to get correct totals
quote.shippingMethod.subscribe(estimateTotalsShipping);
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.
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);
}
});
}});
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:
Edit: I assume that some component fails on the checkout and trigger .fail() method but the error processor is not handling errors correctly and display errors and hides the loader.
Best Answer
Below step need to follow:
Step 1: create require config js files under the
Step 2: Create an abstract total js for showing order summary in step 1 as below
Step 3: Create a file for showing shipping method in order summary total.