Reading list Switch to dark mode

    Show cart summary on checkout steps in Magento 2

    Updated 10 December 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

    Start your headless eCommerce
    now.
    Find out More
    Screenshot-54-1

    Payment checkout step page:

    Screenshot-55-1

    Thanks,

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home