Magento 2, How regionUpdater is working?

Question

I'm trying to figure out how regionUpdater works in Magento 2. Region Updater is when you select a country, Magento reloads the region field depending on which country was selected.

I went to Magento's Checkout module then saw regionUpdater Javascript file in this path:

\vendor\magento\module-checkout\view\frontend\web\js\region-updater.js

I went to my browser and tried to put some breakpoints to it but I cannot see regionUpdater.js is included. I tried many ways to figure out how it is working but cannot understand it.

My purpose is I'm going to implement a **cityUpdater function that help Magento reload the city field based on the region field - the same way as regionUpdater.

Answer 1

It seems like the RegionUpdater Class is responsible for this. Check this file: https://github.com/magento/magento2/blob/077584c99ebb8007cad176c3b9a0144a05c259cd/lib/web/mage/adminhtml/form.js#L81

And https://github.com/magento/magento2/blob/077584c99ebb8007cad176c3b9a0144a05c259cd/lib/web/mage/adminhtml/form.js#L187

I don't know how this actually loaded in the frontend. (Haven't played with the new frontend architechure of Magento 2 yet). But what I did is searched for "country_id" which is the name of the dropdown field in the Magento 2 repo on github and filtered on javascript. From there you can see which files have to do with this functionality. Just follow the lead and search for key elements like classnames, function names and html element id's, classes or names.

Answer 2

1) It seems that you have a cache issue, or something like that. Breakpoint on _updateRegion function is working for me. Check source code of the "/customer/address/edit/" page to see params of regionUpdater.

2) Alternative way is to make jquery plugin that will check onChange event and upload needed cities through ajax.