Magento 2 Checkout Order Summary

Magento 2 Checkout Order Summary: How to display in Shipping Step?

by

In this article, you going to see how to display in Shipping step Magento 2 Checkout Order Summary in a detail and step by step.

If you are looking for this topic then you are at right place.

Let’s start with topic to get Magento 2 Checkout Order Summary.

It is very simple to get the order summary in shipping step of the checkout.

In Shipping Step of the Checkout in Magento 2, you can display Order Summary as subtotal, discount, shipping charges and order total.

It is completely disabeled by default in shipping step of checkout in Order Summary.

With the help of abstract-total.js file of module called checkout get loaded.

To display order summary in the shipping step, you need to create mixins for file called abstract-total.js file

There is function is completely responsible for show and hide for order summary in the shipping step in checkout and the function is called isFullMode() function.

For that you need to create mixins for the Js file.

To define mixins definition create file called requirejs-config.js file.

File Path is as follow as.

app/code/Techone/Checkout/view/frontend/requirejs-config.js
var config = {
    config: {
        mixins: {
            /**
             * Mixins for rendering order summary in the shipping step of checkout.
             */
            'Magento_Checkout/js/view/summary/abstract-total': {
                'Techone_Checkout/js/view/summary/abstract-total-mixins': true
            }
        }
    }
};

The name called Techone which is a package name and Checkout is your module name.

Below path for the file called abstract-total-mixins.js file.

app/code/Techone/Checkout/view/frontend/web/js/view/summary/abstract-total-mixins.js
/**
 * Abstract Total Mixin
 */

define([], function () {
    'use strict';

    /**
     * Mixin for abstract-total UI Component.
     */
    var mixin = {

        /**
         * Show Order Summary in the Shipping Step of Checkout SideBar
         *
         * @return {boolean}
         */
        isFullMode: function () {
            if (!this.getTotals()) {
                return false;
            }
            return true;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

After updating all this file, our next step is execute the following command given below for clear cache.

php bin/magento cache:clean
php bin/magento cache:flush

Now next step is to check the shipping step on checkout.

In Right side of Shipping step of the Checkout page finally you will see that order get display.

Magento 2 get Order Items Collection by Item Id

Conclusion:

Finally, you come know from the above code snippet how to display Magento 2 Order Summary.

I hope you like this article and if you have any query, please comment below.

Leave a Comment