How to add new State/Province and City dropdown in Magento 1.6.2?

Question

How to add new State/Province and City dropdown in Magento 1.6.2? When we choose United States as country then we find a dropdown list for State/Province. But this is not available for all countries.

What i want is - if i choose a country (Ireland as example) it will show all the state/province in a dropdown for that country and if i choose a state/province it will show all the cities in a dropdown under that state/province. How can we do these.

I found a link for adding state/province part online. But there is no clue for cities. Here the link http://www.manojyadav.co.in/magento/adding-stateprovince-india-sql-magento/

If i could get a file from you where i can just replace the state-cities with my own that would be a great help.

Answer 1

If you want to configure city as dropdown option then please follow the following steps:
Steps
Assume MagePsycho_Citydropdown skeleton module has already been created.
1. Adding functions for populating cities.
File: app/code/local/MagePsycho/Citydropdown/Helper/Data.php
Code:

<?php
/**
 * @category   MagePsycho
 * @package    MagePsycho_Citydropdown
 * @author     [email protected]
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
class MagePsycho_Citydropdown_Helper_Data extends Mage_Core_Helper_Abstract
{
    public function getUaeCities()
    {
        $helper = Mage::helper('directory');
        $cities = array(
            $helper->__('Abu Dhabi'),
            $helper->__('Ajman'),
            $helper->__('Al Ain'),
            $helper->__('Dubai'),
            $helper->__('Fujairah'),
            $helper->__('Ras al Khaimah'),
            $helper->__('Sharjah'),
            $helper->__('Umm al Quwain'),
        );
        return $cities;
    }

    public function getUaeCitiesAsDropdown($selectedCity = '')
    {
        $cities = $this->getUaeCities();
        $options = '';
        foreach($cities as $city){
            $isSelected = $selectedCity == $city ? ' selected="selected"' : null;
            $options .= '<option value="' . $city . '"' . $isSelected . '>' . $city . '</option>';
        }
        return $options;
    }
}

Notes: You can also populate the cities in db tables to make it more dynamic. For example, you can create following tables similar to regions:
+ directory_country_city (city_id, country_id, code, default_name)
+ directory_country_city_name (locale, city_id, name)

2. Replacing input text city field to dropdown using javascript
2.1
File: app/design/frontend/[package]/[theme]/template/checkout/onepage/billing.phtml
Code: Add the following code to the last of above template

<script type="text/javascript">
    <?php
    $helper          = Mage::helper('citydropdown');
    $address         = Mage::getSingleton('checkout/session')->getQuote()->getBillingAddress();
    $defaultCity     = $address->getCity();
    $citiesOptions   = addslashes($helper->getUaeCitiesAsDropdown($defaultCity));
    ?>

    var billingCity = '<?php echo $defaultCity ; ?>';
    function billingSwitchCityField(){
        var selectVal = jQuery('#billing\\:country_id option:selected').val();
        if(selectVal == "AE"){
            jQuery("#billing\\:city")
            .replaceWith('<select id="billing:city" name="billing[city]" class="required-entry">' +
                  '<option value=""></option>' +
                  '<?php echo $citiesOptions; ?>' +
                '</select>');
        }else{
            jQuery("#billing\\:city")
            .replaceWith('<input type="text" class=" input-text required-entry absolute-advice " title="City" value="' + billingCity + '" id="billing:city" name="billing[city]" autocomplete="off">');
        }

    }
   jQuery(document).ready(function(){
        billingSwitchCityField();
        jQuery('#billing\\:country_id').change(function() {
            billingSwitchCityField();
        });
   })
</script>

2.2
File: app/design/frontend/[package]/[theme]/template/checkout/onepage/shipping.phtml
Code: Add the following code to the last of above template

<script type="text/javascript">
    <?php
    $helper          = Mage::helper('citydropdown');
    $address         = Mage::getSingleton('checkout/session')->getQuote()->getShippingAddress();
    $defaultCity     = $address->getCity();
    $citiesOptions   = addslashes($helper->getUaeCitiesAsDropdown($defaultCity));
    ?>




    var shippingCity = '<?php echo $defaultCity ; ?>';
    function shippingSwitchCityField(){
        var selectVal = jQuery('#shipping\\:country_id option:selected').val();
        if(selectVal == "AE"){
            jQuery("#shipping\\:city")
            .replaceWith('<select id="shipping:city" name="shipping[city]" class="required-entry">' +
                  '<option value=""></option>' +
                  '<?php echo $citiesOptions; ?>' +
                '</select>');
        }else{
            jQuery("#shipping\\:city")
            .replaceWith('<input type="text" class=" input-text required-entry absolute-advice " title="City" value="' + shippingCity + '" id="shipping:city" name="shipping[city]" autocomplete="off">');
        }




    }
   jQuery(document).ready(function(){
        shippingSwitchCityField();
        jQuery('#shipping\\:country_id').change(function() {
            shippingSwitchCityField();
        });
   })
</script>

1. Reload the checkout page, you can see the city options for United Arab Emirates
   

In the similar manner you can configure the city options for other countries as well.In the similar manner you can configure the city options for other countries as well Cheers.