Woocommerce 选择字段按所选国家/地区过滤器

Question

我想在帐单地址表单中添加 billing_tax_office 字段。但我想通过国家/地区过滤选择字段值。

$fields['billing_tax_office'] = array(
    'type'       => 'select',
    'label'      => __('Tax Office', 'woocommerce'),
    'required'   => false,
    'priority'   => 3, // Diğer alanlar arasında sıralama
    'class'      => array('form-row-wide'),
    'clear'      => true,
    'options'    => array(
        'TR' => array(
            '' => __('Select Tax Office', 'woocommerce'),
            'Adana' => __('Adana', 'woocommerce'),
            'Adıyaman' => __('Adıyaman', 'woocommerce'),
            'Afyonkarahisar' => __('Afyonkarahisar', 'woocommerce'),
            'Ağrı' => __('Ağrı', 'woocommerce'),
            // vb.
        ),
        'US' => array(
            '' => __('Select Tax Office', 'woocommerce'),
            'u2' => __('u2', 'woocommerce'),
            'u3' => __('u3', 'woocommerce'),
            'u4' => __('u4', 'woocommerce'),
            'u5' => __('u5', 'woocommerce'),
            // vb.
        )
    ),
);

如果我在 billing_country 字段中选择土耳其，我只想显示 TR 税务局。

我无法仅显示所选国家/地区的税务局。

Answer 1

这需要一些不同的东西，使用 PHP 和 JavaScript。

PHP 代码 （位于子主题或插件的functions.php 文件中）:

function wc_tax_office_options_by_country() {
    $text_domain = 'woocommerce';
    return array(
        'TR' => array(
            ''                  => __('Select Tax Office', $text_domain),
            'Adana'             => __('Adana', $text_domain),
            'Adıyaman'          => __('Adıyaman', $text_domain),
            'Afyonkarahisar'    => __('Afyonkarahisar', $text_domain),
            'Ağrı'              => __('Ağrı', $text_domain),
        ),
        'US' => array(
            ''      => __('Select Tax Office', $text_domain),
            'u2'    => __('u2', $text_domain),
            'u3'    => __('u3', $text_domain),
            'u4'    => __('u4', $text_domain),
            'u5'    => __('u5', $text_domain),
        )
    );
}

// Add a a custom select field to My Account > Edit Billing Address
add_filter( 'woocommerce_billing_fields', 'add_tax_office_billing_field' );
function add_tax_office_billing_field( $fields ) {
    if( ! is_account_page() ) return $fields;

    $fields['billing_tax_office'] = array(
        'type'              => 'select',
        'label'             => __('Tax Office', 'woocommerce'),
        'options'           => array('' => ''),
        'class'             => array('form-row-wide'),
        'required'          => false,
        'priority'          => 3, 
        'clear'             => true,
    );
    return $fields;
}

// Enqueue Javascript file and localize script
add_action( 'wp_enqueue_scripts', 'load_custom_js' );
function load_custom_js() {
    if( ! is_account_page() ) return;
    
    // For the main theme use: get_template_directory_uri()
    // For the child theme use: get_stylesheet_directory_uri()
    wp_enqueue_script( 'country-tax-office', get_stylesheet_directory_uri() . '/assets/js/country-tax-office.js', array( 'jquery' ), '', true );
    wp_localize_script( 'country-tax-office', 'wc_params_cto', wc_tax_office_options_by_country() );
}

JavaScript 代码 （位于子主题中“js”子文件夹内名为 Country-tax-office.js 的文件中）:

jQuery('#billing_tax_office_field').hide();
jQuery( function($){
    if (typeof wc_params_cto === 'undefined')
        return false;

    function setTaxOfficeOptionsForCountry( country ) {
        var citiesField = $('select#billing_tax_office');
        const taxOfficeOptions = wc_params_cto[country];

        if ( taxOfficeOptions ) {
            citiesField.empty();

            $.each(wc_params_cto[country], function(key, text) {
                citiesField.append($('<option></option>').attr('value', key).text(text));
            });
            $('#billing_tax_office_field').show();
        } else {
            $('#billing_tax_office_field').hide();
        }
    }

    var country = $('select#billing_country').val();

    if ( country ) {
        setTaxOfficeOptionsForCountry( country );
    }
    
    $('select#billing_country').on('change', function() {
        setTaxOfficeOptionsForCountry( $(this).val() );
    });
 });

已测试且有效