I am trying to add new select field that will have certain values when city is changed. To do that I need my custom js component because it does the adding/removing options from select.
Below is my layout process plugin in which I have added my custom field:
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
) {
$this->_logger->info('***************** LayoutProcessor Plugin is called *****************');
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['before-form']['children']['dealer'] = [
'component' => 'SmSoftware_PostShip/js/form/element/dealer-id',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/select',
'options' => [],
'id' => 'dealer'
],
'dataScope' => 'shippingAddress.dealer',
'label' => __('Dealer'),
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [
'required-entry' => true
],
'sortOrder' => 200,
'id' => 'dealer'
];
return $jsLayout;
}
Now, the field is not displayed on checkout_index_index.xml at all, but when I change the component value to Magento_Ui/js/form/element/select it shows.
require([
'ko',
'Magento_Ui/js/form/element/select',
'jquery'
], function (ko, Select, $) {
'use strict';
console.log("City field is being observed....");
return Select.extend({});
and its placed in view/frontend/web/js/form/element.
My custom component has the following value:
If anyone have any idea what the problem is please explain to me.
Magento version is 2.4.2