Reload custom block on collectTotals on cart page Magento 2

In this blog, we are going to learn how to reload a custom block on collectTotals on the cart page in Magento 2.

At first, we need to override the Magento_Checkout/js/model/totals. js file to display the custom message on the cart page while updating cart total data like updating product quantity or applying any coupon the custom message will change.

In the previous blog, We learned to Display custom block in cart summary on checkout cart page in Magento 2

For Example, If you want to show the dynamic message on the cart summary page based on cart totals like if the cart amount is $100 then the customer will get 30 coins, this message will be visible in the cart summary section.

If the cart total amount is $40 then the message display will be like ‘You need to add more $60 products to get the coins’.

Now follow the below steps to reload a custom block on collectTotals on the cart page in Magento 2.

Step 1:

As you can see here we have overridden the vendor/magento/module-checkout/view/frontend/web/js/view/model/totals.js js in our custom module.

To override the js in our module need to create  requirejs-config.js inside the app/code/Vendor/CustomModule/view/frontend.

var config = 
{
    map: 
    {
        '*': 
        {
            'Magento_Checkout/js/model/totals':'Webkul_CustomModule/js/model/totals'
        }
    }
};

Step 2:

Now, cerate totals.js inside the app/code/Vendor/CustomModule/view/frontend/web/js/model to override the original js file.

Here is the code.

/**
 * @api
 */
define([
    'jquery',
    'ko',
    'Magento_Checkout/js/model/quote',
    'Magento_Customer/js/customer-data',
    'Magento_Catalog/js/price-utils'
], function ($, ko, quote, customerData, priceUtils) {
    'use strict';

    var quoteItems = ko.observable(quote.totals().items),
        cartData = customerData.get('cart'),
        quoteSubtotal = parseFloat(quote.totals().subtotal),
        subtotalAmount = parseFloat(cartData().subtotalAmount);

    quote.totals.subscribe(function (newValue) {
        quoteItems(newValue.items);
    });

    if (!isNaN(subtotalAmount) && quoteSubtotal !== subtotalAmount && quoteSubtotal !== 0) {
        customerData.reload(['cart'], false);
    }

    return {
        totals: quote.totals,
        isLoading: ko.observable(false),

        /**
         * @return {Function}
         */
        getItems: function () {
            return quoteItems;
        },

        /**
         * @param {*} code
         * @return {*}
         */
        getSegment: function (code) {
            var i, total;
            var amount = 100;
            if (!this.totals()) {
                return null;
            }

            for (i in this.totals()['total_segments']) {
                total = this.totals()['total_segments'][i];
                var netAmount = amount - total.value;
                if (total.code == code) {
                    $('#custom_block').text ("Add more "+priceUtils.formatPrice(netAmount, quote.getPriceFormat())+ " product to get coins.");
                    return total;
                }
            }
            return null;
        }
    };
});

Step 3:

Changes in the customblock.phtml file inside the app/code/Vendor/CustomModule/view/frontend/templates/ directory. Here we have added a unique ID “custom_block” to update the custom message while updating the cart totals.

<p style="color:green;" id="custom_block">
    Custom Block<br/>
    Write your content Here...
</p>

Here are a few links to customize your shopping cart page,

How to add more product information on checkout cart in magento2

Display Custom Price fee on Checkout Cart and Summary Total in Magento 2

How to show additional data on Mini-cart in Magento 2

Display custom block on the checkout cart page in Magento 2

Hope this will be helpful. Thanks 🙂