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.