I am struggling in figuring out how to filter a drop down address field at checkout based on the selection of another one.
We have created an address table containing region, city and post code.
We want the customer to choose only the ones available in our table.
We got to display them by inizializing them in the LayoutProcessor in the following way
private function getCityConfig()
{
$field = [
'component' => 'Magento_Ui/js/form/element/select',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/select',
'id' => 'city'
],
'label' => 'City',
'value' => '',
'dataScope' => 'shippingAddress.city',
'provider' => 'checkoutProvider',
'sortOrder' => 27,
'customEntry' => null,
'visible' => true,
'options' => $this->getCityOptions(),
'validation' => [
'required-entry' => true
],
'id' => 'city',
'additionalClasses' => 'custom_city',
//'disabled' => true
];
return $field;
}
The option values are provided this way
public function getCityOptions()
{
$options = $this->getDeliveryCollection('localita');
if (count($options) > 0) {
array_unshift(
$options,
['title' => '', 'value' => '', 'label' => __('City*')]
);
}
return $options;
}
Now we should make the select ui related one another, like to simulate a filter applied to the table. If I select one province I will see only the cities and post codes belonged to it. The same way should be done for the three fields.
We want to achieve it by using Ko. With jquery we know how to do it, but it is not recommended doing so in the checkout.
Anyone who already addressed it or know a solution?enter code here