在 WooCommerce 结帐时选择区域，然后选择城市

Question

我正在尝试在 WooCommerce 中显示自定义结账字段。我们的国家分为多个地区。我想要的是先选择地区，然后选择城市。

我使用的代码显示区域下拉字段，但不显示城市选择字段：

function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_region'] = array(
        'type' => 'select',
        'options' => array(
            'guria' => 'Guria',
            'adjara' => 'Adjara',
            // Add other regions here
        ),
        'required' => true,
        'label' => __('Region', 'woocommerce')
    );
    
    $fields['billing']['billing_city'] = array(
        'type' => 'select',
        'options' => array(),
        'required' => true,
        'label' => __('City', 'woocommerce')
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function load_custom_js() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/custom.js', array( 'jquery' ), '', true );
    wp_localize_script( 'custom-js', 'regions_cities', array(
        'guria' => array('City1', 'City2'),
        'adjara' => array('City3', 'City4'),
        // Add other regions and their cities here
    ));
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

我还使用了位于正确目录中的js代码。控制台日志很干净，没有显示任何错误。

jQuery(document).ready(function($) {
    $('select#billing_region').change(function() {
        var selectedRegion = $(this).val();
        var cities = regions_cities[selectedRegion];
        var citySelect = $('select#billing_city');
        citySelect.empty();
        $.each(cities, function(index, city) {
            citySelect.append($('<option></option>').attr('value', city).text(city));
        });
    });
});

Answer 1

您的代码中存在一些错误和缺失的内容...尝试以下修改后的代码：

function get_regions(){
    return array(
        'guria' => 'Guria',
        'adjara' => 'Adjara',
        // Add other regions here
    );
}

function get_regions_cities(){
    return array(
        'guria' => array(
            'city1' => 'City 1', 
            'city2' => 'City 2'
        ),
        'adjara' => array(
            'city3' => 'City 3', 
            'city4' => 'City 4'
        ),
    );
}

add_filter( 'woocommerce_checkout_fields' , 'regions_cities_custom_checkout_fields' );
function regions_cities_custom_checkout_fields( $fields ) {
    $fields['billing']['billing_region'] = array(
        'type' => 'select',
        'options' => get_regions(),
        'required' => true,
        'label' => __('Region', 'woocommerce')
    );
    
    $fields['billing']['billing_city']['type'] = 'select';
    $fields['billing']['billing_city']['options'] = array('' => '');
    $fields['billing']['billing_city']['required'] = true;

    return $fields;
}

add_action( 'wp_enqueue_scripts', 'enqueue_regions_cities_scripts' );
function enqueue_regions_cities_scripts() {
    // Note: for child themes use: get_stylesheet_directory_uri()
    wp_enqueue_script( 'regions-cities-js', get_template_directory_uri() . '/regions-cities.js', array( 'jquery' ), '', true );

    wp_localize_script( 'regions-cities-js', 'wc_params_regions_cities', get_regions_cities() );
}

代码位于您（子）主题的 function.php 文件或插件中。

JavaScript 文件

regions-cities.js

:

jQuery( function($){
    if (typeof wc_params_regions_cities === 'undefined')
        return false;

    function setCitiesOptionsForRegion( region ) {
        var cityOptions = wc_params_regions_cities[region],
            citiesField = $('select#billing_city');
    
            citiesField.empty();
        
        $.each(cityOptions, function(slug, name) {
            citiesField.append($('<option></option>').attr('value', slug).text(name));
        });
    }

    setCitiesOptionsForRegion( $('select#billing_region').val() );

    $('select#billing_region').change(function() {
        setCitiesOptionsForRegion( $(this).val() );
    });
 });

已测试且有效。

现在，当结账加载时，会出现“账单城市”下拉字段，并填充相应的城市：