How to Update Shipping Methods in Magento 2 Using JavaScript?

In Magento 2, updating shipping rates/shipping methods dynamically is a common requirement when customers change cart items. If a customer modifies the quantity or removes a product, the shipping options may also need to be recalculated.

In this blog, I will explore how you can recollect the shipping rates programmatically using Magento 2’s built-in JavaScript method in a simple and easy-to-understand way.

Why Recollect Shipping Rates Dynamically?

Suppose, you have implemented some Ajax call in the cart page and modified something like item qty or other items-related data using that Ajax call, then to ensure customers always see accurate shipping options, you may required to recollect/update shipping rates.

Recollecting shipping rates ensures that customers are always presented with up-to-date shipping options, avoiding potential checkout errors or inaccurate shipping costs.

Magento 2 provides an API for developers to trigger the recalculation of shipping rates using the Magento_Checkout/js/action/recollect-shipping-rates module. Let’s dive into how to integrate this functionality.

Sample Code

define([
    'jquery',
    'Magento_Checkout/js/action/get-totals',
    'Magento_Checkout/js/action/recollect-shipping-rates',
    'Magento_Customer/js/customer-data'
], function ($, getTotalsAction, recollectShippingRates, customerData) {
    'use strict';

    return function () {
        // Listen for quantity change in cart
        $(document).on('change', 'input[data-role="cart-item-qty"]', function () {
            var form = $('form#form-validate');
            
            // Send an AJAX request to update the cart
            $.ajax({
                url: form.attr('action'),
                data: form.serialize(),
                type: 'POST',
                showLoader: true,
                success: function () {
                    // Recollect the shipping rates after cart is updated
                    recollectShippingRates();

                    // Refresh cart totals
                    getTotalsAction([], $.Deferred());

                    // Reload the minicart to reflect the changes
                    customerData.reload(['cart'], true);
                }
            });
        });
    };
});

When a customer changes the quantity of an item in the cart, the script sends an AJAX request to update the cart.Once the cart is updated, the shipping methods are recollected based on the new cart total.The minicart is reloaded, and the cart totals are refreshed automatically.

By using this simple approach, you can ensure that when a customer updates the quantity of an item in their cart, the shipping rates are recollected dynamically. This method enhances the user experience and ensures accurate shipping options without requiring a page reload.

For more Magento 2 tutorials, keep following my blog!

People also searched for

Dynamically Update Cart Totals in Magento 2

Magento 2 AJAX Cart Quantity Update

How to Refresh Cart Totals After Update in Magento 2

Update shipping methods after Ajax call on the cart page

You may also like :

How to Get Admin URL in Magento 2

How to Use ViewModel in Magento 2: A Simple Guide

Magento 2: How to use helper in PHTML?