将 WooCommerce 结帐城市字段更改为唯一国家/地区的下拉列表

Question

在 Woocommerce 中，我编写了一些用于计费和运输城市的代码以使用运费。现在我想在更改国家/地区时更改城市列表。

这是我的自定义代码：

// Change "city" checkout billing and shipping fields to a dropdown
add_filter( 'woocommerce_checkout_fields' , 'override_checkout_city_fields' );
function override_checkout_city_fields( $fields ) {
    global $woocommerce;

    // Define here in the array your desired cities (Here an example of cities)
    $option_cities = array(
    "city1"=>"city1",
    "city2"=>"city2",
    "city3"=>"city3"
    );

    $country = $woocommerce->customer->get_shipping_country();
    if ($country == 'SA'){
        $fields['billing']['billing_city']['type'] = 'select';
        $fields['billing']['billing_city']['options'] = $option_cities;
        $fields['shipping']['shipping_city']['type'] = 'select';
        $fields['shipping']['shipping_city']['options'] = $option_cities;

    } else{
        $fields['billing']['billing_city']['type'] = 'text';
        $fields['shipping']['shipping_city']['type'] = 'text';
    }  

    return $fields;
}

但是当用户将国家从沙特阿拉伯更改为卡塔尔时，

billing_city

不会更改为文本类型，因此我们必须刷新页面以将

billing_city

显示为文本类型。

我需要唯一的

billing_city

作为仅“沙特阿拉伯”国家的选择类型。其他国家/地区我们需要显示文本类型。

我该怎么做？

Answer 1

这需要与 javascript 不同的东西，因为它基于客户端（浏览器端）事件。

因此，您需要保持 WooCommerce 计费城市和发货城市字段不变，在这里我们将添加其他自定义选择字段（默认情况下隐藏）。

然后，当所选国家/地区为“沙特阿拉伯”（您的目标国家/地区）时，默认的 WooCommerce 城市字段将被隐藏，并显示相关的自定义选择字段。

当在城市下拉字段中选择一个值时，我们会将该值复制到 WooCommerce 默认城市输入字段（即使它是隐藏的）。

因此，当客户下订单时，WooCommerce 无论如何都会有正确的城市值。

请注意，帐单地址与送货地址不同，客户的帐单所在国家/地区也可能与送货国家/地区不同……因此您需要更加注意帐单和送货地址的行为。

完整代码如下：

// Add custom checkout select fields
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_select_fields' );
function add_custom_checkout_select_fields( $fields ) {
    // Define HERE in the array, your desired cities
    $cities = array(
        __( 'City1', 'woocommerce' ),
        __( 'City2', 'woocommerce' ),
        __( 'City3', 'woocommerce' ),
    );

    // Format in the right way the options array of cities
    $options = array( '' => __( 'Select a city', 'woocommerce' ) . '…' );
    foreach ( $cities as $city ) {
        $options[$city] = $city;
    }

    // Adding 2 custom select fields
    $fields['billing']['billing_city2'] = $fields['shipping']['shipping_city2'] = array(
        'type'         => 'select',
        'required'     => true,
        'options'      => $options,
        'autocomplete' => 'address-level2',
    );
    
    // Copying data from WooCommerce city fields
    $fields['billing']['billing_city2']['class'] = array_merge($fields['billing']['billing_city']['class'], array('hidden') );
    $fields['shipping']['shipping_city2']['class'] = array_merge($fields['shipping']['shipping_city']['class'], array('hidden') );
    $fields['billing']['billing_city2']['label'] = $fields['billing']['billing_city']['label'];
    $fields['shipping']['shipping_city2']['label'] = $fields['shipping']['shipping_city']['label'];
    $fields['billing']['billing_city2']['priority'] = $fields['billing']['billing_city']['priority'] + 5;
    $fields['shipping']['shipping_city2']['priority'] = $fields['shipping']['shipping_city']['priority'] + 5;

    return $fields;
}

// Custom inline styles to hide some checkout fields
add_action( 'wp_head', 'custom_checkout_css' );
function custom_checkout_css() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) {
        ?><style>
        #billing_city_field.hidden, #billing_city2_field.hidden,
        #shipping_city_field.hidden, #shipping_city2_field.hidden
        {display:none !important;}
        </style><?php
    }
}

// Custom jQuery code
add_action( 'wp_footer', 'custom_checkout_js_script' );
function custom_checkout_js_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
    (function($){
        var targetedCountry = 'FR',
            initialBCountry = '<?php echo WC()->customer->get_billing_country(); ?>',
            initialSCountry = '<?php echo WC()->customer->get_shipping_country(); ?>';

        function showHideFields( country, fieldset ) {
            var select2Classes = 'country_select select2-hidden-accessible';

            if( country === targetedCountry ) {
                $('#'+fieldset+'_city2_field').removeClass('hidden');
                $('#'+fieldset+'_city_field').addClass('hidden');
                $('select#'+fieldset+'_city2').addClass(select2Classes);
            } else if( country !== targetedCountry && $('#'+fieldset+'_city_field').hasClass('hidden') ) {
                $('#'+fieldset+'_city2_field').addClass('hidden');
                $('#'+fieldset+'_city_field').removeClass('hidden');
                $('select#'+fieldset+'_city2').removeClass(select2Classes);
            }
        }

        // 1. On Start (after Checkout is loaded)
        showHideFields(initialBCountry, 'billing');
        showHideFields(initialSCountry, 'shipping');

        // 2. Live: On Country change event
        $('body').on( 'change', 'select#billing_country', function(){
            showHideFields($(this).val(), 'billing');
        });
        $('body').on( 'change', 'select#shipping_country', function(){
            showHideFields($(this).val(), 'shipping');
        });

        // 3. Live: On City change event for "Saudi Arabia" country
        $('body').on( 'change', 'select#billing_city2', function(){
             $('input#billing_city').val($(this).val());
        });
        $('body').on( 'change', 'select#shipping_city2', function(){
             $('input#shipping_city').val($(this).val());
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

代码位于活动子主题（或活动主题）的functions.php 文件中。已测试并有效。

Answer 2

我试图为州领域做同样的事情，将州领域重命名为市政府

就像所选国家沙特阿拉伯应仅显示城市列表（城市 1、城市 2） 选择直辖市 1 后应显示城市 1、城市 2、城市 3 如果选择直辖市 2 应在城市下拉列表中显示城市 4、城市 5、城市 6 值

好像有什么问题