Hello Magento Friends,
Today I will explain How to Update Shipping Methods when Street Field Input Change on Checkout Page in Magento 2.
Magento 2 supports different shipping methods like FedEx, DHL, UPS, USPS, and more. You can also Create Custom Shipping Method in Magento 2.
On the Magento 2 checkout page, the user enters the address and selects their desired shipping method. But the same shipping methods are not available for all the regions. When the user makes input changes in the street field, the shipping methods provided must change based on that particular region.
To achieve this, follow the below steps.
Contents
Steps to Update Shipping Methods when Street Field Input Change on Checkout Page in Magento 2:
Step 1: Add a mixin for shipping rates validation rules. For that, create a file at the below path
app\code\Vendor\Extension\view\frontend\requirejs-config.js
Now, add the below code
|
1 2 3 4 5 6 7 8 9 |
var config = { config: { mixins: { 'Magento_Checkout/js/model/shipping-rates-validation-rules': { 'Vendor_Extension/js/checkout/model/shipping-rates-validation-rules-mixin': true } } } }; |
Step 2: Now go to the following path
app\code\Vendor\Extension\view\frontend\web\js\checkout\model\shipping-rates-validation-rules-mixin.js
Add the below code. In mixin we will wrap the original rules and add the street:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
define([ 'jquery', 'mage/utils/wrapper' ],function ($, Wrapper) { "use strict"; return function (origRules) { origRules.getObservableFields = Wrapper.wrap( origRules.getObservableFields, function (originalAction) { var fields = originalAction(); fields.push('street'); return fields; } ); return origRules; }; }); |
This will add the street rule to each available shipping method on the front end.
Conclusion:
This way you can Update Shipping Methods when Street Field Input Change on Checkout Page in Magento 2. Also, check out Shipping and Payment Method per Customer Group Extension which allows the store owner to manage shipping and payment method for the specific customer groups. If you have any doubts, just mention them in the comment box. Share the article with your friends and social media handles.
Happy Coding!
