根据 WooCommerce 结帐中选择的城市显示子区域下拉列表

Question

我正在创建一个 WooCommerce 插件，我想根据结帐页面中选择的客户城市动态显示子区域。

这是我的代码尝试：

add_filter( 'woocommerce_checkout_fields', 'dvs_city_list' );
function dvs_city_list( $fields ) { 
    $fields["billing"]["billing_city"]["type"] = 'select';
    $fields["billing"]["billing_city"]["input_class"] = array(
    'state_select' => 'state_select'
    );  
    $fields["billing"]["billing_city"]["options"] = array(
        'Lahore' => 'Lahore',
        'Karachi' => 'Karachi'
    ),
    return $fields;
}


add_filter( 'woocommerce_checkout_fields', 'dvs_area_list' );
function dvs_area_list( $fields ) { 
    $fields['billing']['billing_area']['label'] = 'Area';
    $fields['billing']['billing_area']['required'] = 'True';
    $fields["billing"]["billing_area"]["type"] = 'select';
    $fields["billing"]["billing_area"]["class"][0] = 'form-row-last';
    $fields['billing']['billing_area']['priority'] = 50;
    $fields["billing"]["billing_area"]["input_class"] = array(
    'state_select' => 'state_select'
    );
    
    $city = $_REQUEST['billing_city'];
    
    if ($city == 'Lahore') {    
    $fields["billing"]["billing_area"]["options"] = array(
        'Naval Town' => 'Naval Town',
        'Bahria Town' => 'Bahria Town',
        'Faisal Town' => 'Faisal Town'
        );
    }
    else ($city == 'Karachi') {
    $fields["billing"]["billing_area"]["options"] = array(
        'Walton Road' => 'Walton Road',
        'Zest Road' => 'Zest Road'
        );
     }
     return $fields;
}

这是截图

但我收到此错误

注意事项：
未定义索引：…wp-content/plugins/custom-plugin/index.php 第 35 行中的 billing_city

如何修复这个错误？我做错了什么？

Answer 1

要从另一个选择字段同步自定义结账选择字段，需要使用 jQuery。

您还可以合并两个函数，因为它们使用相同的钩子。

在第一个功能下面，我们保留您可以在任何地方调用的城市/地区设置。最后一个功能可以根据所选城市在“计费区域”下拉列表中启用动态选项更改：

function cities_areas_settings() {
    $text_domain = 'woocommerce';

    return array(
        __('Lahore', $text_domain) => array(
            __('Naval Town', $text_domain),
            __('Bahria Town', $text_domain),
            __('Faisal Town', $text_domain),
        ),
        __('Karachi', $text_domain) => array(
            __('Walton Road', $text_domain),
            __('Zest Road', $text_domain),
        )
    );
}

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );
function custom_checkout_fields( $fields ) {
    // Initializing
    $text_domain   = 'woocommerce';
    $option_cities = array();
    $lahore_areas  = array( '' => __('Choose your area', $text_domain) );

    // Load settings and prepare options arrays
    foreach( cities_areas_settings() as $city => $areas ) {
        $option_cities[$city] = $city;
        if( $city === 'Lahore' ) {
            foreach( $areas as $area ) {
                $lahore_areas[$area] = $area;
            }
        }
    }

    // 1. Billing City field
    $fields['billing']['billing_city']['type']        = 'select';
    $fields['billing']['billing_city']['class']       = array('form-row-first');
    $fields['billing']['billing_city']['input_class'] = array('state_select');
    $fields['billing']['billing_city']['options']     = $option_cities;

    // 2. Billing Area Field
    $fields['billing']['billing_area'] = array(
        'type'        => 'select',
        'label'       => __('Area', $text_domain),
        'class'       => array('form-row-last'),
        'input_class' => array('state_select'),
        'options'     => $lahore_areas,
        'required'    => true,
        'default'     => '',
        'priority'    => 50,
    );

    return $fields;
}

add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    // Initializing
    $text_domain   = 'woocommerce';
    $karachi_areas = array( '' => __('Choose your area', $text_domain) );

    $settings = cities_areas_settings(); // Load settings

    // Prepare 'Karachi' options dropdown
    foreach( cities_areas_settings()['Karachi'] as $area ) {
        $karachi_areas[$area] = $area;
    }

    ?>
    <script language="javascript">
    jQuery( function($){
        var a = 'select[name="billing_city"]',
            b = 'select[name="billing_area"]',
            o = <?php echo json_encode($karachi_areas); ?>,
            s = $(b).html();

        // Utility function to fill dynamically the select field options
        function dynamicSelectOptions( opt ){
            var options = '';
            $.each( opt, function( key, value ){
                options += '<option value="'+key+'">'+value+'</option>';
            });
            $(b).html(options);
        }

        // On Start (once DOM is loaded)
        if ( $(a).val() === 'Karachi' ) {
            dynamicSelectOptions( o );
        }

        console.log($(a).val());

        // On billing city change live event
        $('form.woocommerce-checkout').on('change', a, function() {
            console.log($(this).val());
            if ( $(this).val() === 'Karachi' ) {
                dynamicSelectOptions( o );
            } else {
                $(b).html(s);
            }
        });
    });
    </script>
    <?php
    endif;
}

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

相关：WooCommerce 中的动态同步自定义结帐选择字段

Answer 2

如果我想反转字段。根据面积显示城市？

这样做但不起作用。

   function cities_areas_settings() {
    $text_domain = 'woocommerce';

    return array(
        __('Lahore', $text_domain) => array(
            __('Naval Town', $text_domain),
            __('Bahria Town', $text_domain),
            __('Faisal Town', $text_domain),
        ),
        __('Karachi', $text_domain) => array(
            __('Walton Road', $text_domain),
            __('Zest Road', $text_domain),
        )
    );
}

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );
function custom_checkout_fields( $fields ) {
    // Initializing
    $text_domain   = 'woocommerce';
    $lahore_areas = array();
    $option_cities  = array( '' => __('Choose your area', $text_domain) );

    // Load settings and prepare options arrays
    foreach( cities_areas_settings() as $areas => $city ) {
        $option_cities[$city] = $city;
        if( $city === 'Lahore' ) {
            foreach( $areas as $area ) {
                $lahore_areas[$city] = $city;
            }
        }
    }

    // 1. Billing City field
    $fields['billing']['billing_area']['type']        = 'select';
    $fields['billing']['billing_area']['class']       = array('form-row-first');
    $fields['billing']['billing_area']['input_class'] = array('state_select');
    $fields['billing']['billing_area']['options']     = $lahore_areas;

    // 2. Billing Area Field
    $fields['billing']['billing_city'] = array(
        'type'        => 'select',
        'label'       => __('Area', $text_domain),
        'class'       => array('form-row-last'),
        'input_class' => array('state_select'),
        'options'     => $option_cities,
        'required'    => true,
        'default'     => '',
        'priority'    => 50,
    );

    return $fields;
}

add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    // Initializing
    $text_domain   = 'woocommerce';
    $karachi_areas = array( '' => __('Choose your area', $text_domain) );

    $settings = cities_areas_settings(); // Load settings

    // Prepare 'Karachi' options dropdown
    foreach( cities_areas_settings()['Karachi'] as $area ) {
        $karachi_areas[$area] = $area;
    }

    ?>
    <script language="javascript">
    jQuery( function($){
        var a = 'select[name="billing_city"]',
            b = 'select[name="billing_area"]',
            o = <?php echo json_encode($karachi_areas); ?>,
            s = $(b).html();

        // Utility function to fill dynamically the select field options
        function dynamicSelectOptions( opt ){
            var options = '';
            $.each( opt, function( key, value ){
                options += '<option value="'+key+'">'+value+'</option>';
            });
            $(b).html(options);
        }

        // On Start (once DOM is loaded)
        if ( $(a).val() === 'Karachi' ) {
            dynamicSelectOptions( o );
        }

        console.log($(a).val());

        // On billing city change live event
        $('form.woocommerce-checkout').on('change', a, function() {
            console.log($(this).val());
            if ( $(this).val() === 'Karachi' ) {
                dynamicSelectOptions( o );
            } else {
                $(b).html(s);
            }
        });
    });
    </script>
    <?php
    endif;
}