Magento 2 change city input to select

In this topic we will create a magento 2 module which can change city input type to select
First of all, we will create a module files :
1- Create these folders :
app/code/Seonov
app/code/Seonov/Customcheckout

the Seonov folder is the module namespace and customcheckout is the module name.

2- Now we need to create a module.xml file in app/code/Seonov/Customcheckout/etc/ with the current content :

app/code/Seonov/Customcheckout/etc/module.xml



    

3- To register the module we need to create a registration.php file in app/code/Seonov/Customcheckout/ with the following code :



 


                  $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
                  ['shippingAddress']['children']['shipping-address-fieldset']['children']['city'] = [
                      'component' => 'Magento_Ui/js/form/element/select',
                      'config' => [
                          'customScope' => 'shippingAddress',
                          'template' => 'ui/form/field',
                          'elementTmpl' => 'ui/form/element/select',
                      ],
                      'dataScope' => 'shippingAddress.city',
                      'label' => 'Ville',
                      'provider' => 'checkoutProvider',
                      'visible' => true,
                      'validation' => [],
                      'sortOrder' => 80,
                      'id' => 'city',
                      'options' => [
                          [
                              'value' => '',
                              'label' => 'Choose a city',
                          ],
                          [
                              'value' => 'citycode',
                              'label' => 'cityname',
                          ]
                      ]
                  ];
              
        return $jsLayout;

5-Finally we need to register out block by creating a file di.xml inside app/code/Seonov/Customcheckout/etc/ with the following code :



    
        
    

after upgrading setup “php bin/magento setup:upgrade” and “php bin/magento di:compile” the checkout city input will be select!
Enjoy!

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *