How to Change Shipping Price on Address Field Change in Magento 2 Custom Shipping Method

How-to-Change-Shipping-Price-on-Address-Field-Change-in-Magento-2-Custom-Shipping-Method

Customer convenience is the essential aspect of any successful online store. Offering a convenient method of purchasing as well as shipping is part and parcel of improving the customer experience in an online store.

By default, there are 7 different shipping methods in Magento 2. However, if these default methods are not enough for your business, you can create shipping method in Magento 2.

For custom shipping methods, you need to also look out for other behaviour that needs to be smoothly functioning with customization in the same way as with the default feature.

For example, the change in shipping price on the address field change when a custom shipping method is selected.

The customer has to refresh the page after changing the value of the address field in order to see the updated shipping rate in default Magento 2.

It’s annoying when you have to reload the page to see the effect on shipping rate after changing country, state, and postcode on the checkout page, isn’t it? That’s why I’ve come up with the solution to change shipping price on address field change in Magento 2 custom shipping method.

Method to Change Shipping Price on Address Field Change in Magento 2 Custom Shipping Method

  1. Use the below code in checkout_cart_index.xml at Vendor/Module/view/frontend/layout.
  2. Add the below code in checkout_index_index.xml at Vendor/Module/view/frontend/layout.
  3. Create the file <carrier-name>.js at Vendor/Module/view/frontend/web/js/model/shipping-rates-validation-rules.

    Here postcode, country_id, region_id and region_id_input are the checkout field name. Thus you can use other fields also on which you need required:true.
  4. Create another <carrier-name>.js at Vendor/Module/view/frontend/web/js/model/shipping-rates-validator and use the below code.

  5. Use the below code in <carrier-name>.js at Vendor/Module/view/frontend/web/js/view/shipping-rates-validation.

    Note : Replace <carrier-name> with your carrier name which you can find in class specified in <mode> tag of app/code/Vendor/Module/etc/config.xml file in which carrier name is specified as protected $_code = ‘<carrier-name>’;

That’s it.

If you have any doubts regarding this post, just mention them in the Comments section below.

I would be happy to help.

Feel free to share the solution with Magento Community via social media.

Thank You.

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

5
(based on 9 Reviews)

Yash is a Magento Developer at Meetanshi. He loves playing computer games and watching action movies. For brain exercise, he likes to play Chess.

Leave a reply:

Your email address will not be published.