2

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

2 Answers 2

3

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:

enter image description here

enter image description here

Hope it will help you!

6
  • 2
    @abilasher Yes, you can create a new module for it. Regarding the second command, yes you are right. The path should be like VendorName\ModuleName\Plugin\LayoutProcessor. Still, if you have any doubts, please post it. Let me try to solve your doubts. Sep 15, 2021 at 9:57
  • @abilasher I hope you are not aware of module creation. Please check the updated answer and follow the steps. You will get your output. Sep 15, 2021 at 12:44
  • Please let me know what options you want to display in the city dropdown? Sep 15, 2021 at 13:31
  • 1
    Give me sometime. Let me prepare code and will post it soon. Sep 16, 2021 at 20:18
  • 1
    Still didn't work on your code. Let me update it ASAP Sep 20, 2021 at 8:57
0

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

1
  • no these solutions want help. Please see my previous comments. Sep 22, 2021 at 7:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.