根据 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() {&nbsp; &nbsp; $text_domain = 'woocommerce';&nbsp; &nbsp; return array(&nbsp; &nbsp; &nbsp; &nbsp; __('Lahore', $text_domain) => array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __('Naval Town', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __('Bahria Town', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __('Faisal Town', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; __('Karachi', $text_domain) => array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __('Walton Road', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __('Zest Road', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; );}add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );function custom_checkout_fields( $fields ) {&nbsp; &nbsp; // Initializing&nbsp; &nbsp; $text_domain&nbsp; &nbsp;= 'woocommerce';&nbsp; &nbsp; $option_cities = array();&nbsp; &nbsp; $lahore_areas&nbsp; = array( '' => __('Choose your area', $text_domain) );&nbsp; &nbsp; // Load settings and prepare options arrays&nbsp; &nbsp; foreach( cities_areas_settings() as $city => $areas ) {&nbsp; &nbsp; &nbsp; &nbsp; $option_cities[$city] = $city;&nbsp; &nbsp; &nbsp; &nbsp; if( $city === 'Lahore' ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach( $areas as $area ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $lahore_areas[$area] = $area;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; // 1. Billing City field&nbsp; &nbsp; $fields['billing']['billing_city']['type']&nbsp; &nbsp; &nbsp; &nbsp; = 'select';&nbsp; &nbsp; $fields['billing']['billing_city']['class']&nbsp; &nbsp; &nbsp; &nbsp;= array('form-row-first');&nbsp; &nbsp; $fields['billing']['billing_city']['input_class'] = array('state_select');&nbsp; &nbsp; $fields['billing']['billing_city']['options']&nbsp; &nbsp; &nbsp;= $option_cities;&nbsp; &nbsp; // 2. Billing Area Field&nbsp; &nbsp; $fields['billing']['billing_area'] = array(&nbsp; &nbsp; &nbsp; &nbsp; 'type'&nbsp; &nbsp; &nbsp; &nbsp; => 'select',&nbsp; &nbsp; &nbsp; &nbsp; 'label'&nbsp; &nbsp; &nbsp; &nbsp;=> __('Area', $text_domain),&nbsp; &nbsp; &nbsp; &nbsp; 'class'&nbsp; &nbsp; &nbsp; &nbsp;=> array('form-row-last'),&nbsp; &nbsp; &nbsp; &nbsp; 'input_class' => array('state_select'),&nbsp; &nbsp; &nbsp; &nbsp; 'options'&nbsp; &nbsp; &nbsp;=> $lahore_areas,&nbsp; &nbsp; &nbsp; &nbsp; 'required'&nbsp; &nbsp; => true,&nbsp; &nbsp; &nbsp; &nbsp; 'default'&nbsp; &nbsp; &nbsp;=> '',&nbsp; &nbsp; &nbsp; &nbsp; 'priority'&nbsp; &nbsp; => 50,&nbsp; &nbsp; );&nbsp; &nbsp; return $fields;}add_action('wp_footer', 'custom_checkout_js_script');function custom_checkout_js_script() {&nbsp; &nbsp; if( is_checkout() && ! is_wc_endpoint_url() ) :&nbsp; &nbsp; // Initializing&nbsp; &nbsp; $text_domain&nbsp; &nbsp;= 'woocommerce';&nbsp; &nbsp; $karachi_areas = array( '' => __('Choose your area', $text_domain) );&nbsp; &nbsp; $settings = cities_areas_settings(); // Load settings&nbsp; &nbsp; // Prepare 'Karachi' options dropdown&nbsp; &nbsp; foreach( cities_areas_settings()['Karachi'] as $area ) {&nbsp; &nbsp; &nbsp; &nbsp; $karachi_areas[$area] = $area;&nbsp; &nbsp; }&nbsp; &nbsp; ?>&nbsp; &nbsp; <script language="javascript">&nbsp; &nbsp; jQuery( function($){&nbsp; &nbsp; &nbsp; &nbsp; var a = 'select[name="billing_city"]',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b = 'select[name="billing_area"]',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; o = <?php echo json_encode($karachi_areas); ?>,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; s = $(b).html();&nbsp; &nbsp; &nbsp; &nbsp; // Utility function to fill dynamically the select field options&nbsp; &nbsp; &nbsp; &nbsp; function dynamicSelectOptions( opt ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var options = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each( opt, function( key, value ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options += '<option value="'+key+'">'+value+'</option>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(b).html(options);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // On Start (once DOM is loaded)&nbsp; &nbsp; &nbsp; &nbsp; if ( $(a).val() === 'Karachi' ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dynamicSelectOptions( o );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log($(a).val());&nbsp; &nbsp; &nbsp; &nbsp; // On billing city change live event&nbsp; &nbsp; &nbsp; &nbsp; $('form.woocommerce-checkout').on('change', a, function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( $(this).val() === 'Karachi' ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dynamicSelectOptions( o );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(b).html(s);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php&nbsp; &nbsp; endif;}代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。