Magento directory_country_region_name table for city : City Dropdown

Question

I want to make the country, state, city dropdown in the checkout field. I research lots of times in the internet and I didn't find any solution rather than a paid module. I noticed that for some countries magneto showing state dropdown for others it is a text field only. For example countries like the United States, India then in checkout magneto showing state dropdown, at last, I found where it is coming from.

There are two table in magento

1. directory_country_region_name
2. directory_country_region

So based on the current structure i am successfully add state drop down to another countries and now its working fine . But i can't understand how can i make city dropdown . Please help . What i am looking is Dropdown city in shipping address field.

NOTES

Those who are looking for state dropdown its easy to make . You can add values directory_country_region_name with locale, name . After that you will get region_id. Using that region_id you can fill directory_country_region . Once you finished that then your textbox for corresponding states are replaced by dropdown with given values. Please check that 2 table closely then you will understand

Answer 1

You need to customize your checkout page layout processor. Try the below codes for creating a new module to customize the checkout page fields:

Step 1:

Create a registration.php file for your module:

File path: app/code/MyVendor/MyModule/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::Register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'MyVendor_MyModule',
    __DIR__
);

Step 2:

Create a module.xml file for your module:

File path: app/code/MyVendor/MyModule/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyVendor_MyModule" setup_version="1.0.0"/>
</config>

Step 3:

Declare a plugin for the checkout layout processor.

File path: app/code/MyVendor/MyModule/etc/frontend/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="customised_layout_processor" type="MyVendor\MyModule\Plugin\LayoutProcessor"/>
    </type>
    
</config>

Step 4:

Create plugin class:

File path: app/code/MyVendor/MyModule/Plugin/LayoutProcessor

<?php

namespace MyVendor\MyModule\Plugin;

use Magento\Directory\Helper\Data as DirectoryHelper;
use Magento\Directory\Model\ResourceModel\Country\CollectionFactory;
use Magento\Store\Model\StoreManagerInterface;
use function PHPUnit\Framework\assertIsCallable;

class LayoutProcessor
{

    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        $result
    ) {

        //For shipping form
        $result['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',
                'id' => 'drop-down',
            ],
            'dataScope' => 'shippingAddress.city',
            'label' => __('City'),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'validation' => [],
            'sortOrder' => 70,
            'id' => 'drop-down',
            'options' => $this->getCitiesDropdown()
        ];

        //For Billing Form
        foreach ($result['components']['checkout']['children']['steps']['children']['billing-step']['children']
                 ['payment']['children']['payments-list']['children'] as $key => $payment) {
            if (isset($payment['children']['form-fields']['children']['city'])) {
                $result['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                ['city'] = [
                    'component' => 'Magento_Ui/js/form/element/select',
                    'config' => [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/select',
                        'id' => 'drop-down',
                    ],
                    'label' => __('City'),
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => [],
                    'sortOrder' => 70,
                    'id' => 'drop-down',
                    'options' => $this->getCitiesDropdown()
                ];
            }
        }

        return $result;

    }

    public function getCitiesDropdown()
    {
        return [['value' => "test1", "label" => "Test city 1", "is_default" => true], ['value' => "test2", "label" => "Test city 2", "is_default" => true]];
    }

}

Step 5:

Run the below commands:

bin/magento module:enable MyVendor_MyModule

bin/magento setup:upgrade

bin/magento s:d:c

bin/magento cache:flush

After following these 5 steps your module will get enable. Now you can check your checkout page for output:

You will get the results like the below screenshot:

Hope it will help you!

Answer 2

For The city dropdown, I believe the solution mentioned in this link will help you.

How to change City field to a dropdown in Checkout step Magento 2

Other than that, there are few free modules also available over the git, which you can use for reference or modify as per your need, a few are

https://github.com/php-cuong/magento2-regions-manager

https://github.com/EaDesgin/Magento2-City-Dropdown