最近有蠻多客戶提出需要有縣市跟鄉鎮市自動下拉的功能，實作之後發現其實並沒有想像中的難，因此將作法分享給大家，基本上我們需要的功能是：
- 國家為台灣時，縣市需要產生自動下拉選項。
- 選擇縣市後，鄉鎮市需要自動根據選擇的縣市帶出鄉鎮市的下拉選單。
- 選擇鄉鎮市後，需要自動帶入郵遞區號。
直接購買外掛
除了照著我們的做法加入程式之外，您也可以直接購買現成的外掛，縣市/鄉鎮市下拉選單外掛，省時又方便！
加入縣市下拉選項
這部分蠻簡單的，在主題的 functions.php 加上下面的程式碼，基本上這段程式就是將台灣的縣市清單加進去，這樣 WooCommerce 就會自動幫我們產生下拉了。
add_filter('woocommerce_states', 'add_taiwan_states', 10);
/**
* Add Taiwan States
* @param array $states
* @return array
*/
function add_taiwan_states($states)
{
$states['TW'] = array(
'基隆市' => '基隆市',
'台北市' => '台北市',
'新北市' => '新北市',
'宜蘭縣' => '宜蘭縣',
'桃園市' => '桃園市',
'新竹市' => '新竹市',
'新竹縣' => '新竹縣',
'苗栗縣' => '苗栗縣',
'台中市' => '台中市',
'彰化縣' => '彰化縣',
'南投縣' => '南投縣',
'雲林縣' => '雲林縣',
'嘉義市' => '嘉義市',
'嘉義縣' => '嘉義縣',
'台南市' => '台南市',
'高雄市' => '高雄市',
'屏東縣' => '屏東縣',
'花蓮縣' => '花蓮縣',
'台東縣' => '台東縣',
'澎湖縣' => '澎湖縣',
'連江縣' => '連江縣',
'金門縣' => '金門縣',
);
return $states;
}加入 Javascript
因為 WooCommerce 並沒有直接的 API 讓我們加入鄉鎮市的下拉，所以我們需要自己加入 Javascript 來製作，還好並不是非常困難，請在您的主題下新增一個 checkout-dropdown.js，然後將下段程式碼加進去。
jQuery(function ($) {
if (!$('form.woocommerce-checkout')) {
return;
}
var cities = Inno_Object.cities;
var target_checkout_fields = [
{
state: '#billing_state',
city: '#billing_city',
postcode: '#billing_postcode'}
, {
state: '#shipping_state',
city: '#shipping_city',
postcode: '#shipping_postcode'
}
];
/**
* init all state fields, on state change, load city list
*/
target_checkout_fields.forEach(function (field) {
var state_field = field.state;
var city_field = field.city;
$(state_field).change(function () {
//get current city
var current_city = $(city_field).val();
var state = $(this).val();
var has_current_city = false;
//destroy select2 first
if ($(city_field).hasClass("select2-hidden-accessible")) {
$(city_field).select2('destroy');
}
if (state && cities[state]) {
var state_cities = cities[state];
var data = [];
state_cities.forEach(function (city) {
data.push({
id: city.suburb,
text: city.suburb
});
if (city.suburb == current_city) {
has_current_city = true;
}
});
$(city_field).select2({
data: data,
placeholder: "選擇鄉鎮市",
width:'100%'
});
}
if (!has_current_city) {
$(city_field).val('');
}
$(city_field).trigger('change');
});
$(state_field).trigger('change');
});
/**
* On city change, load post code automatically
*/
target_checkout_fields.forEach(function (field) {
var state_field = field.state;
var city_field = field.city;
var postcode_field = field.postcode;
$(city_field).change(function () {
//reset
var state = $(state_field).val();
var selected_city = $(this).val();
var reset_postcode = true;
if (state && cities[state]) {
var state_cities = cities[state];
state_cities.forEach(function (city) {
if (city.suburb == selected_city) {
$(postcode_field).val(city.postcode);
reset_postcode = false;
}
});
}
if (reset_postcode) {
$(postcode_field).val('');
}
});
$(city_field).trigger('change');
});
});加入 taiwan.xml
下載 taiwan.xml 並且放在您的主題裡，這個檔案包含了台灣的所有縣市，鄉鎮市以及郵遞區號的資料，我們需要這個檔案來找出對應的縣市鄉鎮市和郵遞區號。
請將下列程式碼加入 functions.php 中，這段程式是用來將 xml 的內容轉成 Javascript 可讀的格式。
注意：請將程式碼中的 plugin_dir_path(FILE) . 'taiwan.xml') 改為正確的路徑。
/**
* Get city list from xml *
* @return array
*/
function get_city_list()
{
$city_list = array();
if (file_exists(plugin_dir_path(__FILE__) . 'taiwan.xml')) {
$xml = simplexml_load_file(plugin_dir_path(__FILE__) . 'taiwan.xml');
foreach ($xml->county as $county) {
$county_name = (string) $county->attributes()->name;
$city_list[$county_name] = array();
foreach ($county->area as $area) {
$str_area = (string) $area;
$str_postcode = (string) $area->attributes()->zip;
$city_list[$county_name][] = array(
'suburb' => $str_area,
'postcode' => $str_postcode,
);
}
}
}
return $city_list;
}Enqueue JS 以及鄉鎮市資料
我們需要在結帳頁面加入上面建立的 checkout-dropdown.js 以及提供鄉鎮市資料到前端，只要加上下面程式即可。
注意：請更改 checkout-dropdown.js 的路徑。
add_action('wp_enqueue_scripts', 'enqueue_tw_dropdown_scripts');
/**
* Enqueue Scripts
*/
function enqueue_tw_dropdown_scripts()
{
if (is_checkout()) {
$script_data['cities'] = get_city_list();
wp_enqueue_script(
'checkout-city-dropdown',
plugin_dir_url(__FILE__) . 'assets/js/checkout-dropdown.js',
array('select2'),
filemtime(plugin_dir_path(__FILE__) . 'assets/js/checkout-dropdown.js'),
true
);
wp_localize_script('checkout-city-dropdown', 'Inno_Object', $script_data);
}
}大功告成！現在您的結帳頁面應該會有縣市以及鄉鎮市的下拉了！