To display cart summary on checkout step pages, we just need to override 2 core files.
- Magento_Checkout/web/js/view/summary/shipping.js
- Magento_Checkout/web/js/view/summary/abstract-total.js
You can either override the above files from theme or custom module. Here are the steps for the same:
1. For the shipping.js file, update getValue() function
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'underscore',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote',
'Magento_SalesRule/js/view/summary/discount'
], function ($, _, Component, quote, discountView) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/shipping'
},
quoteIsVirtual: quote.isVirtual(),
totals: quote.getTotals(),
/**
* @return {*}
*/
getShippingMethodTitle: function () {
var shippingMethod,
shippingMethodTitle = '';
if (!this.isCalculated()) {
return '';
}
shippingMethod = quote.shippingMethod();
if (!_.isArray(shippingMethod) && !_.isObject(shippingMethod)) {
return '';
}
if (typeof shippingMethod['method_title'] !== 'undefined') {
shippingMethodTitle = ' - ' + shippingMethod['method_title'];
}
return shippingMethodTitle ?
shippingMethod['carrier_title'] + shippingMethodTitle :
shippingMethod['carrier_title'];
},
/**
* @return {*|Boolean}
*/
isCalculated: function () {
return this.totals() && this.isFullMode() && quote.shippingMethod() != null; //eslint-disable-line eqeqeq
},
/**
* @return {*}
*/
getValue: function () {
var price;
if (!this.isCalculated()) {
return this.notCalculatedMessage;
}
// price = this.totals()['shipping_amount'];//remove 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);
},
/**
* If is set coupon code, but there wasn't displayed discount view.
*
* @return {Boolean}
*/
haveToShowCoupon: function () {
var couponCode = this.totals()['coupon_code'];
if (typeof couponCode === 'undefined') {
couponCode = false;
}
return couponCode && !discountView().isDisplayed();
},
/**
* Returns coupon code description.
*
* @return {String}
*/
getCouponDescription: function () {
if (!this.haveToShowCoupon()) {
return '';
}
return '(' + this.totals()['coupon_code'] + ')';
}
});
});
2. Change whole 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.
}
});
}
);
And here is the result: shipping checkout step page

Payment checkout step page:

Thanks,
Be the first to comment.