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 have a look into the Magento module "Directory" in the data folder: data/directory_setup/data-install-1.6.0.0.php file, you can see how Magento is filling up the tables.

For example to add Australian states, first, create a module with these files:

app/code/local/Package/Ausregions/etc/config.xml

<?xml version="1.0"?><config><modules> <Package_Ausregions> <version>0.1.0</version> </Package_Ausregions> </modules>

<global>
    <helpers>
        <ausregions>
            <class>Package_Ausregions_Helper</class>
        </ausregions>
    </helpers>      
    <resources>
        <ausregions_setup>
            <setup>
                <module>Package_Ausregions</module>
            </setup>
            <connection>
                <use>core_setup</use>
            </connection>
        </ausregions_setup>
        <ausregions_write>
            <connection>
                <use>core_write</use>
            </connection>
        </ausregions_write>
        <ausregions_read>
            <connection>
                <use>core_read</use>
            </connection>
        </ausregions_read>
    </resources>
</global>

Then you need to write your Helper class: Package/Ausregions/Helper/Data.php

class Package_Ausregions_Helper_Data extends Mage_Core_Helper_Abstract {

}

And finally, add your data-install file in: Package/Ausregions/data/ausregions_setup/data-install-0.1.0.php with the following content:

$installer = $this;

$data = array( array('AU', 'ACT', 'Australian Capital Territory'),

array('AU', 'NSW', 'New South Wales'),

array('AU', 'NT', 'Northern Territory'),

array('AU', 'QLD', 'Queensland'),

array('AU', 'SA', 'South Australia'),

array('AU', 'TAS', 'Tasmania'),

array('AU', 'VIC', 'Victoria'),

array('AU', 'WA', 'Western Australia')

);

foreach ($data as $row) {

$bind = array(
    'country_id'    => $row[0],
    'code'          => $row[1],
    'default_name'  => $row[2],
);


//First add data into "directory_country_region" table
$installer->getConnection()->insert($installer->getTable('directory/country_region'), $bind);

//Then get the last inserted ID for the regionID
$regionId = $installer->getConnection()->lastInsertId($installer->getTable('directory/country_region'));


$bind = array(
    'locale'    => 'en_US',
    'region_id' => $regionId,
    'name'      => $row[2]
);


//Insert data into "directory_country_region_name" table
$installer->getConnection()->insert($installer->getTable('directory/country_region_name'), $bind);

}

This will add the states and when you are on checkout page, if you select country Australia, it will populate the "State" dropdown with the inserted states.

Answer 2

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     magepsycho@gmail.com
 * @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.

Answer 3

Take a look at Aitoc Checkout Fields Manager. It will let you add that field in without having to write a new module, and may be cheaper than hiring someone to write a custom job.