I am following this guide to build a zipcode lookup implementation.
I try to populate region, city and street data based on zipcode.
this.region().value(regionValue); this.city().value(cityValue); this.street().elems()[0].set('value', streetValue);
With code above, city and street fields successfully changed when I type zipcode but no for region field.
Is there any different implementation for region field?
Here is my fullcode:
LayoutProcessor.php
<?php namespace Vendor\Module\Block\Checkout; class LayoutProcessor { /** * Checkout LayoutProcessor after process plugin. * * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor * @param array $jsLayout * @return array */ public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout) { $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step'] ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']; $billingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['billing-step'] ['children']['payment']['children']['payments-list']['children']; //Checks if shipping step available. if (isset($shippingConfiguration)) { $shippingConfiguration = $this->processAddress( $shippingConfiguration, 'shippingAddress', [ 'checkoutProvider', 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.city', 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.street', 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.region_id' ] ); } //Checks if billing step available. if (isset($billingConfiguration)) { //Iterate over billing forms. foreach($billingConfiguration as $key => &$billingForm) { //Exclude not billing forms if (!strpos($key, '-form')) { continue; } $billingForm['children']['form-fields']['children'] = $this->processAddress( $billingForm['children']['form-fields']['children'], $billingForm['dataScopePrefix'], [ 'checkoutProvider', 'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.city', 'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.street', 'checkout.steps.billing-step.payment.payments-list.' . $key . '.form-fields.region_id' ] ); } } return $jsLayout; } /** * Process provided address to contains checkbox and have trackable address fields. * * @param $addressFieldset - Address fieldset config. * @param $dataScope - data scope * @param $deps - list of dependencies * @return array */ private function processAddress($addressFieldset, $dataScope, $deps) { //Creates input field. $addressFieldset['postcode'] = [ 'component' => 'Vendor_Module/js/input', 'config' => [ 'customScope' => $dataScope, 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input', ], 'dataScope' => $dataScope . '.postcode', 'deps' => $deps, 'label' => __('My label'), 'provider' => 'checkoutProvider', 'visible' => true, 'sortOrder' => 71, 'validation' => [ 'required-entry' => true ], ]; //Makes each address field label trackable. if (isset($addressFieldset['street']['children'])) { foreach($addressFieldset['street']['children'] as $key => $street) { $street['tracks']['label'] = true; //Remove .additional class. Can be removed, but style fix provided instead. $street['additionalClasses'] = ''; $addressFieldset['street']['children'][$key] = $street; } } return $addressFieldset; } }
input.js
define([ 'Magento_Ui/js/form/element/abstract', 'mage/translate' ], function (AbstractField, $t) { 'use strict'; return AbstractField.extend({ defaults: { modules: { region: '${ $.parentName }.region_id', city: '${ $.parentName }.city', street: '${ $.parentName }.street', } }, populateData: function () { if (this.value()?.length >= 7) { const nameFile = this.value().substr(0, 3); fetch(`https://domain.tld/data/${nameFile}.js`) .then(response => { if (response.ok) { return response.json(); } return Promise.reject(response); }) .then(data => { const prefectures = [ null, '北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県', '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県', ]; const regionValue = data[0].hasOwnProperty(this.value()) ? prefectures[data[0][this.value()][0]] : ''; const cityValue = data[0].hasOwnProperty(this.value()) ? data[0][this.value()][1] : ''; const streetValue = data[0].hasOwnProperty(this.value()) ? data[0][this.value()][2] : ''; this.region().value(() => regionValue); this.city().value(cityValue); this.street().elems()[0].set('value', streetValue); }) .catch(error => console.warn(error)) } else { this.region().value(''); this.city().value(''); this.street().elems()[0].set('value', ''); } }, setDifferedFromDefault: function () { this._super(); this.populateData(); } }); });
Any idea what's wrong with my implementation to set auto-filled region value?
Regards.