---
title: "How to Update Shipping Method Section of Cart Page Using Ajax in Magento 2"
url: "https://magecomp.com/blog/update-shipping-method-section-cart-page-using-ajax-magento-2/"
date: "2019-06-11T10:16:34+00:00"
modified: "2019-06-11T10:16:34+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "General"
word_count: 517
reading_time: "3 min read"
summary: "Magento custom development is a core part of any Ecommerce project to fulfill business needs, because at any stage if the store owner wants to integrate or want your own functionality in your exist..."
description: "Selling different types of products from light to heavy, shipping methods & charges vary depending on size, type & shipping location. That's the reason why a..."
keywords: "General"
language: "en"
schema_type: "Article"
related_posts:
  - title: "10+ Biggest Deals on Magento Extensions this Black Friday 2021"
    url: "https://magecomp.com/blog/biggest-deals-on-magento-extensions-this-black-friday-2021/"
  - title: "7 Simple Ways of Relieving Stress after Work (Web Developer Edition)"
    url: "https://magecomp.com/blog/7-simple-ways-relieving-stress-work/"
  - title: "Useful Tips That Will Enable You to Stretch Your E-Commerce Marketing Budget Further"
    url: "https://magecomp.com/blog/useful-tips-will-enable-stretch-e-commerce-marketing-budget/"
---

# How to Update Shipping Method Section of Cart Page Using Ajax in Magento 2

_Published: June 11, 2019_  
_Author: Dhiren Vasoya_  

![How to reload Shipping Method Selection of Cart summary on custom ajax Call in Magento 2](https://magecomp.com/blog/wp-content/uploads/2019/06/How-to-reload-Shipping-Method-Selection-of-Cart-summary-on-custom-ajax-Call-in-Magento-2-1024x332.webp)

Magento custom development is a core part of any Ecommerce project to fulfill business needs, because at any stage if the store owner wants to integrate or want your own functionality in your existing Magento store custom extension development is key to success. And shipping is one of the powerful factors that may make or break the business in multiple ways. Because selling different types of products from light to heavy, shipping methods and charges vary depending on product size, type, and shipping location.

That’s the reason why after developing your own custom shipping related action or event, you have to reload the Shipping Methods and cart summary of Magento 2 shopping cart page. Default, Magento 2 provides the functionality to reload the cart shipping method by using knockout JS. So, considering the above situation for our extension, here is code that allows you to call your custom Ajax on the shopping cart page through which you can update shipping method according to your logic.

To do the same, first we need to create ‘**checkout_cart_index.xml**’ inside our extension folder at this path.
**app\code\Vendor\Extension\frontend\view\layout\checkout_cart_index.xml**

```

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<body>

        <referenceContainer name="cart.summary">
        	<block class="VendorExtensionBlockFiles" name="shiiping_address" before="checkout.cart.shipping" template="Vendor_Extension::cart.phtml"/>
        </referenceContainer>
	</body>
</page>
```

Using the above code we have added our custom field in our shopping cart page before payment list.
Now, we have to create one more ‘**cart.phtml**’ at this path using below code.
**app\code\Vendor\Extension\view\frontend\templates\cart.phtml**

```

	<label for="example" class="label required">
	    <?php echo __('Send To') ?>	</label>
	<input id="exampleinput" name="exampleinput" type="text" />
<input type=”button” value=”submit” class=”submitsendto” />

$("#submitsendto").click(function (e) {
	var exampleinput = $("

# exampleinput ").val();
	addresstype = 0;
	$.ajax({
    	type: "POST",
    	url: '<?php echo $this->getUrl('distanceshipping/index/saveaddress')?>',
    	data: {' exampleinput ': exampleinput },
    	async:false,
    	success: function (data) {
            requirejs([
                'Magento_Checkout/js/model/quote',
                'Magento_Checkout/js/model/shipping-rate-registry'
        	], function (quote, rateRegistry) {
            	var address = quote.shippingAddress();
                address.trigger_reload = new Date().getTime();
                rateRegistry.set(address.getKey(), null);
                rateRegistry.set(address.getCacheKey(), null);
                quote.shippingAddress(address);
        	});
    	}
	});
});
```

As shown in the above example, we have submitted our data using AJAX call to the server and to respond to that we have reloaded the shipping area of the Magento shopping cart page.

That’s it for today! If you found this blog helpful, don’t forget to share it with your colleagues and Magento Friends.

And, Let us know if you are facing an issue while implementing this code.

Happy Reloading!

</body>


---

_View the original post at: [https://magecomp.com/blog/update-shipping-method-section-cart-page-using-ajax-magento-2/](https://magecomp.com/blog/update-shipping-method-section-cart-page-using-ajax-magento-2/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-18 05:57:39 UTC_