How to show the totals section in the checkout shipping step

If you want to show the totals section when you first go to the default checkout in your magento 2 website you need to extend the abstract-total object defined in the Magento_Checkout/js/view/summary/abstract-total.js file.

The function isFullMode needs to be replaced by a custom function that avoids not showing the total section in the shipping step. Basically the last statement on this function should be changed by a return true statement.

To implement this change you should create a javascript module that makes use of requireJS mixin. The mixin allows to replace an existing method with a custom one. To create a javascript module you need the standard 2 files:

  • registration.php
  • etc/module.xml

Then, create file requirejs-config.js under view/frontend with the following content:

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

This tells magento to mix the javascript defined in our custom file Webguru_TotalsAtCheckout/js/abstract-total-mixin with the existing object located at Magento_Checkout/js/view/summary/abstract-total.

The abstract-total-mixin.js file should be created in view/frontend/web/js with the following content:

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

    return function (target) {
        return target.extend({
            /**
             * @return {*}
             */
            isFullMode: function () {
                if (!this.getTotals()) {
                    return false;
                }

                return true;
            }
        });
    }
});

You can download the full module at github.

Leave a Reply

Your email address will not be published.