In Magento-2 how to edit order summary labels with values and addon more labels there in cart page?

Question

I want to add some labels in order summary box on cart page in magento2. Right now I got only the subtotal and tax in the order summary from default magento2 behavior, see the screenshot: https://prnt.sc/1ggnt4j

I want to add and display labels with values like all these see the screenshot for reference: https://prnt.sc/1ggna7r

dummy code e.g.,

<div class="cart-summary" role="tablist" style="top: 0px;"><strong class="summary title">Summary</strong></div>
<div class="table-wrapper" data-bind="blockLoader: isLoading">
    <table class="data table totals">
        <tbody><tr><td>Price on Mrp</td><!---Want to show regular price -->
</tr><tr><td><?= _$regularprice; ?></td><!---regular price value -->
</tr><tr><td>Discount on MRP</td><!---Want to show discount amount-->
</tr><tr><td><?= _$discountamount; ?></td><!---discount price amount value-->
</tr><tr><td>Shipping</td><!---Want to show shipping custom label here -->
</tr><tr><td><strike>₹80</strike><?= _"FREE"; ?></td><!---shipping value -->
</tr><tr><td>Subtotal</td><!---Default show specail price -->
</tr><tr><td><?= _$specialprice; ?></td><!---Default special price value -->
</tr><tr><td>Tax</td><!---Default -->
</tr><tr><td><?= _$tax; ?></td><!---Default tax value -->
</tr>        </tbody>
    </table>
</div>

How we do this in magento2 please help?

Thanks in advance!

Answer 1

You need to override the abstract-total.js to make this happen using a RequireJs mixin. This way you can extend a JavaScript object provided by Magento and only add your own adjustments:

In view/frontend/requirejs-config.js:

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

In view/frontend/web/js/abstract-total-mixin.js:

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

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

                return true;
            }
        });
    }
});

Reference: https://magento.stackexchange.com/a/235329/56248