Checkout, our favourite Magento 2 part. Any changes which need to be done in checkout scares us every time when we see this kind of task. Fortunately, it is not that scary anymore once we start understanding its implementation. I hope, by sharing my own experiences, will help you to go through your tasks much faster and easier.

I am happy to share with you all the necessary code that you will need to add to your project. I will provide you with an example and I will focus on a case where we want to display total price summary on shipping step (right side) in the checkout on our Magento 2 project. If you need any help, book with me 1hr Magento 2 Frontend consultation or learn more about starting work with Magento 2!

How to display total price summary on shipping step in checkout in Magento 2?

Let’s start with the plan of what we need to do in order to display total price summary on shipping step in checkout in Magento 2. The only thing we need to do is to show the price total block at the first step of checkout. Moreover, we want to make sure that the price values in this block are correct, based on shipping methods which we choose.

SUBSCRIBE TO MAGENTO 2 NEWSLETTER!

Would you like to get information when new Magento tutorial is available?
Subscribe to the newsletter and be up to date!

Javascript

In our case, we will need to work only with javascript files. We will need to extend the abstract-total.js file and shipping.js file. In the abstract-total.js file we will extend isFullMode method to show the price total block already in the first step. In shipping.js file we will make sure that the price values are updated. Let’s start by extending the files.

requirejs-config.js

It is really important to add this file into the correct place. It should be added to vendor/vendor-name/module-name/view/frontend/ or vendor/vendor-name/theme-name/module-name/ or vendor/vendor-name/theme-name/ where “vendor-name“, “theme-name” and “module-name” needs to be replaced with your name of vendor, theme and module name. If you are not creating a new module, you can follow the second example and use the Magento_Checkout module in your theme for this case, as we make an implementation into the checkout part. Another solution would be to follow the third example and add files directly into your theme.

Whichever solution you will choose, requirejs-config.js needs to be in the root folder of the module, theme or theme module. As soon as you choose one way, you need to follow it.

Solution 1

Let’s say we will add our file to vendor/vendor-name/module-name/view/frontend/ or vendor/vendor-name/theme-name/module-name/,  our file should look like as below:

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

Solution 2

In case, you decide to choose the last solution vendor/vendor-name/theme-name/,  your file should look like the following:

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

abstract-total-mixin.js

At this point, we will add our new file abstract-total-mixin.js. The new file will be added to vendor/vendor-name/module-name/view/frontend/web/js/ or vendor/vendor-name/theme-name/module-name/web/js/ or vendor/vendor-name/theme-name/web/js/ where “vendor-name“, “theme-name” and “module-name” needs to be replaced with your name of vendor, theme and module name. If you are not creating a new module, you can follow the second example and use the Magento_Checkout module in your theme for this case, as we make an implementation into the checkout part. Another solution would be to follow the third example and add files directly into your theme. Your decision depends on where you have added the requirejs-config.js file.

For extending UiComponent you need to use the base method extend, as described Extend a default UI competent in Magento 2 documentation.

define([

], function () {
    'use strict';

    return function (Component) {
        return Component.extend({
            isFullMode: function () {
                var result = this._super();

                if (!this.getTotals()) {
                    return false;
                }

                return true;
            }
        });
    };
});

Let’s analyse this code to understand what each part means. I also really often struggle to understand which part of the code or names I can change for my custom ones and which I need to keep as an example, all of it I will try to explain right now.

isFullMode: function () {
    var result = this._super();

    if (!this.getTotals()) {
        return false;
    }

    return true;
}

This part of the code extends isFullMode method. result = this._super() is not necessary in our case, but I have added it so you know how to get the results of the original function. As you can see, I am still checking this.getTotals()  whether the total exists, however, I removed stepNavigator.isProcessed(‘shipping’) and I always return true, doesn’t matter which step the user is in at the moment.

shipping-mixin.js

At this point, we will add our new file shipping-mixin.js. The new file will be added to vendor/vendor-name/module-name/view/frontend/web/js/ or vendor/vendor-name/theme-name/module-name/web/js/ or vendor/vendor-name/theme-name/web/js/ where “vendor-name“, “theme-name” and “module-name” needs to be replaced with your name of vendor, theme and module name. If you are not creating a new module, you can follow the second example and use the Magento_Checkout module in your theme for this case, as we make an implementation into the checkout part. Another solution would be to follow the third example and add files directly into your theme. Your decision depends on where you have added the requirejs-config.js file.

For this case, I used JavaScript Mixins as described in the Magento 2 documentation.

define([
    'Magento_Checkout/js/model/cart/estimate-service'
], function (estimateService) {
    'use strict';

    var mixin = {
        initialize: function () {
            this._super();
        }
    };

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

Let’s analyse the code. All that I needed to do was to add references to ‘Magento_Checkout/js/model/cart/estimate-service’ which recalculates the summary block after switching the shipping method. However, I also made sure that my original function is returned.

That’s it! Our price block should be shown on the shipping step.

Result

I took for you some screenshots of our implementations based on the Luma theme. I have not added any styling so this is how it will be displayed by default.  As you can see I have displayed total price summary on shipping step in checkout in Magento 2.

---

MORE MAGENTO 2 TUTORIALS

Magento 2 Frontend Developer Interview – Technical Test

How To In Magento 2 – How To Add Additional Dropdown With Options Based On Selected Shipping Methods In The Checkout

---

PIN ME!

I hope it can help with your journey with M2! Also feel free to give your feedback and advice. In case I made a mistake, let me know! I am only human being ?

Did you find this post useful? I would be more than happy if you share it with your friends, maybe someone else will find it useful as well. Good luck!

Editor – Natasha Jay O’Neil, please contact Natasha directly for queries related to her services.

Zaneta Baran

Zaneta loves challenges so deciding about career path she has chosen typical male industry. Woman who codes. Every 1-2 years she lives in different part of the world. Gym dates is something what she specialised in. Healthy lifestyle, extreme sports and motorbikes have stolen her hear years ago.