Magento 2 Update Shipping Rates when remove Products from Mini cart in Checkout Page via JS

[diego93crhefdd]

I have created a shipping rule with certain products so that such products have free shipping, but for example when I delete the product in the checkout cart from the mini cart, the shipping cost is not updated until I click on the Checkout button.

Is there a way to update the shipping rates using js when the product is removed from the mini cart?

[johnwebdes40a5]

Hello @diego93crhefdd 

To update shipping rates when products are removed from the mini cart in the checkout page via JavaScript in Magento 2, you can utilize the Knockout.js framework that Magento 2 heavily relies on for frontend interactions. Here's a high-level approach to achieve this:

Determine the JavaScript event that is triggered when a product is removed from the mini cart. This event will be used to trigger the update of shipping rates.

JavaScript (assuming jQuery is also used for AJAX):

require([
    'jquery',
    'Magento_Checkout/js/action/get-totals'
], function ($, getTotalsAction) {
    $(document).on('click', '.remove-product-button', function () {
        // Trigger AJAX to update shipping rates
        $.ajax({
            url: '/checkout/cart/updatePost',
            method: 'POST',
            dataType: 'json',
            data: {
                'item_id': $(this).data('item-id'),
                'form_key': window.FORM_KEY,
                'qty': 0 // Assuming the quantity is set to 0 for removal
            },
            success: function (response) {
                // Update shipping rates
                getTotalsAction([]);
            },
            error: function (xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
});

PHP (Controller to handle AJAX request):

<?php
namespace Vendor\Module\Controller\Cart;
use Magento\Framework\App\Action\Context;
class UpdatePost extends \Magento\Checkout\Controller\Cart
{
    public function __construct(
        Context $context,
        \Magento\Framework\App\Request\Http $request
    ) {
        parent::__construct($context);
        $this->request = $request;
    }


    public function execute()
    {
        $itemId = (int)$this->getRequest()->getParam('item_id');
        $qty = $this->getRequest()->getParam('qty');
        try {
            $this->cart->getQuote()->getItemById($itemId)->delete();
            $this->cart->save();
            $this->_eventManager->dispatch('checkout_cart_update_item_complete', ['item' => $item]);
            $this->messageManager->addSuccess(__('You removed the item from your shopping cart.'));
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            $this->messageManager->addException($e, __('We can\'t update the item right now.'));
            $this->_objectManager->get(\Psr\Log\LoggerInterface::class)->critical($e);
        } catch (\Exception $e) {
            $this->messageManager->addException($e, __('We can\'t update the item right now.'));
            $this->_objectManager->get(\Psr\Log\LoggerInterface::class)->critical($e);
        }
        return $this->_redirect('checkout/cart');
    }
}

Hope it helps !

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789