Select Page

Show cart summary on checkout steps in Magento 2

Vikas Kumar
Published: December 10, 2022

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

Screenshot-54-1

Payment checkout step page:

Screenshot-55-1

Thanks,

Source: webkul.com