2

How to display summery total on checkout page on sidebar above cart items list? enter image description here

4

2 Answers 2

10

There are two changes required to display summary in shipping step. Override both files in your current theme.

1. change /Magento_Checkout/js/view/summary/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.
            }
        });
    }
);

Now order summary will be displayed in shipping step.

  1. change /Magento_Checkout/js/view/summary/shipping.js file This change is for to update shipping charge in the selection of shipping methods.

Change getValue() function.

 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);
        }

Hope this answer will help you.

7
  • 1
    @ketankp-borada Please try this solution and let me know it's working for you or not.? Commented Apr 18, 2018 at 6:49
  • 1
    not working,only cart items are shown prntscr.com/j6r8sk Commented Apr 18, 2018 at 7:18
  • After file change, Have you upgrade data ? and clean cache ? please check in private browser because code is uploaded after testing. Commented Apr 18, 2018 at 7:20
  • Yes working now,but totals are not updating after changing shipping method only shipping title updating. Commented Apr 18, 2018 at 7:32
  • 1
    Perfect Solution .. !!! Thanks @Emipro Technologies Pvt. Ltd.
    – Raghav
    Commented Aug 3, 2018 at 6:30
1

UPDATED ANSWER

I'm creating these files in my custom theme but it can also be done with an extension. If you use an extension then the requirejs-config.js file will need to be adjust slightly according to the magento documentation.

theme/Magento_Checkout/requirejs-config.js:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/abstract-total': {
                'Magento_Checkout/js/view/summary/abstract-total-mixin': true
            },
            'Magento_Checkout/js/view/shipping': {
                'Magento_Checkout/js/view/shipping-mixin': true
            }
        }
    }
};

theme/Magento_Checkout/web/js/view/summary/abstract-total-mixin.js:

define([

], function () {
    'use strict';

    return function (Component) {
        return Component.extend({
            isFullMode: function () {
                var result = this._super();
                
                if (!this.getTotals()) {
                    return false;
                }
                
                return true;
            }
        });
    };
});

theme/Magento_Checkout/web/js/view/shipping-mixin.js:

define([
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/set-shipping-information'
], function (
    quote,
    setShippingInformationAction
) {
    'use strict';
    
    return function (Component) {
        var currentMethod;

        return Component.extend({
            initialize: function() {
                this._super();
                
                quote.shippingMethod.subscribe(function (method) {
                    setShippingInformationAction();
                });
            }
        });
    };
});

UPDATE Magento 2.4.3 When I updated to magento 2.4.3 from 2.3.6 I started getting an error that the billing address street was not type of array. This is due to new behavior in the checkout where the billing address is rendered as soon as the shipping data is pushed to the server. Since we are pushing it early (potentially before the shipping address has been entered) this fix is needed.

theme/Magento_Checkout/web/js/action/select-billing-address.js:

line 27 replace:

quote.billingAddress(address);

with:

if(Array.isArray(billingAddress.street)){
    quote.billingAddress(address);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.