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
<pre class="lang:default decode:true">
<?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="Vendor\Extension\Block\Files" name="shiiping_address" before="checkout.cart.shipping" template="Vendor_Extension::cart.phtml"/>
</referenceContainer>
</body>
</page>
</pre>
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
<pre class="lang:default decode:true">
<div id="example" class="field">
<label for="example" class="label required">
<span><?php echo __('Send To') ?></span>
</label>
<input id="exampleinput" name="exampleinput" type="text" />
<input type=”button” value=”submit” class=”submitsendto” />
</div>
$("#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);
});
}
});
});
</pre>
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!