Magento2: Re- trigger total in checkout page

Question

I have to init js and corresponding template in checkout_index_index.

In that template, I have added checkout after the payment methods.

If I checked the checkbox, I have added a customs fee.

In page load, I have checked the checkbox using the afterRender method.

But the order total is not reflected in the fee.

How to re-trigger order total when the payment method tab is activated.

Answer 1

Using js

define([
    'uiComponent',
    'jquery',
    'Magento_Customer/js/customer-data'
], function (
        Component,
        $,
        customerData
    ) {
        'use strict';

        return Component.extend({

            /**
             * @param {obj} data, {obj} event
             *
             */
            yourFunction: function () {
                var sections = ['cart'];
                customerData.invalidate(sections);
                customerData.reload(sections, true);
            },
        }
    }
);

Using php

    /**
     * @var \Magento\Checkout\Model\Session
     */
    protected $checkoutSession;
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Checkout\Model\Session $checkoutSession
    ) {
        $this->checkoutSession = $checkoutSession;
        parent::__construct($context);
    }

    public function execute()
    {
        $this->checkoutSession->getQuote()->collectTotals()->save();
    }

Answer 2

If you want you totals to be recalculated after payment method select, then follow these steps

Create requirejs-config.js in app/code/Vendor/Module/view/frontend/requirejs-config.js the code will be:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/action/select-payment-method':
                'Vendor_Module/js/action/select-payment-method'
        }
    }
};

Now create select-payment-method.js file in app/code/Vendor/Module/view/frontend/web/js/action/select-payment-method.js the code will be:

define(
[
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/full-screen-loader',
    'jquery',
    'Magento_Checkout/js/action/get-totals'
],
function (quote, fullScreenLoader, jQuery, getTotalsAction) {
    'use strict';
    return function (paymentMethod) {
        quote.paymentMethod(paymentMethod);

        fullScreenLoader.startLoader();
        getTotalsAction([]);
        fullScreenLoader.stopLoader();
        jQuery.ajax('/frontname/index', {
            data: {payment_method: paymentMethod},
            complete: function () {
                getTotalsAction([]);
                fullScreenLoader.stopLoader();
            }
        });

    }
}
);

Now in your controller execute function add payment method to quote

public function execute()
{
    $pMethod = $this->getRequest()->getParam('payment_method');
    $quote = $this->cart->getQuote();
    $quote->getPayment()->setMethod($pMethod['method']);
    $quote->setTotalsCollectedFlag(false);
    $quote->collectTotals();
    $quote->save();
}

Hope this will help you

Answer 3

Try :

require(
    [
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/cart/totals-processor/default'
    ],
    function(
        quote,
        totalsDefaultProvider
    ) {
        totalsDefaultProvider.estimateTotals(quote.shippingAddress());
    }
);