基于 WooCommerce 中所选品牌的动态选择字段选项

Question

在 woocommerce 中，我有 2 个选择字段：

• 第一个是“汽车品牌”，

• 第二个是这些的“汽车模型” Car Brands。

我想做的是为所选的“汽车品牌”动态获取“汽车型号”

“汽车品牌”来自 WooCommerce 产品属性分类法。对于每个“汽车品牌”，相关的“汽车型号”是该产品属性分类法的术语。

这是“汽车品牌”（第一个选择字段）的代码：

$attributes =  wc_get_attribute_taxonomies();

if($attributes) {

    echo '<select id="car-brands"><option value="noselection">Car Brand</option>';

    foreach ( $attributes as $attribute ) {

        echo '<option value="' . $attribute->attribute_name . '">' . $attribute->attribute_label . '</option>';

    }

    echo '</select>';

}

以及生成的 html 示例代码：

<select id="car-brands">

    <option value="noselection">Car Brand</option>

    <option value="toyota">TOYOTA</option>

    <option value="lexus">LEXUS</option>

</select>

然后是“汽车模型”的代码（第二个选择字段）：

$selected_attribute_name = 'toyota';

$taxonomy = 'pa_' . $selected_attribute_name;

$term_names = get_terms( array( 'taxonomy' => $taxonomy, 'fields' => 'names' ) );

echo '<select id="car-models"><option value="noselection">Car Model</option>';

echo '<option>' . implode( '</option><option>', $term_names ) . '</option>';

echo '</select>';

以及生成的 html 示例代码：

<select id="car-models">

    <option value="noselection">Car Model</option>

    <option value="toyota">AVENSIS</option>

    <option value="lexus">CAMRY</option>

</select>

如您所见，我正在获取“toyota”品牌的特定车型，因为我已将“toyota”硬编码为“Car brand”：

$selected_attribute_name = 'toyota';

所以我想要的是作为$selected_attribute_name一个动态变量，所以当用户选择汽车品牌“LEXUS”或“TOYOTA”时，第二个选择字段会动态加载相关术语（选项）。

我发现了很多相关的线程，但我无法理解如何让它适用于我的案例。

如何让动态“汽车模型”根据所选汽车品牌选择字段选项？

Answer 1

下面使用Ajax从选中的“汽车品牌” （产品属性分类法）中获取对应的terms ，动态生成“car model”选择字段选项（选中的产品属性分类法的terms）：// Display 2 select fields (car brands and car models)add_action( 'woocommerce_before_shop_loop', 'before_shop_loop_action_callback', 3 );function before_shop_loop_action_callback() {&nbsp; &nbsp; if( $attributes =&nbsp; wc_get_attribute_taxonomies() ) {&nbsp; &nbsp; &nbsp; &nbsp; ## 1st dropdown&nbsp; &nbsp; &nbsp; &nbsp; echo '<select id="car-brands" style="min-width:100px;"><option value="">' . __("Car Brand"). '</option>';&nbsp; &nbsp; &nbsp; &nbsp; // Loop through attribute taxonomies&nbsp; &nbsp; &nbsp; &nbsp; foreach ( $attributes as $attribute ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<option value="' . $attribute->attribute_name . '">' . $attribute->attribute_label . '</option>';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; echo '</select>';&nbsp; &nbsp; &nbsp; &nbsp; ## 2nd dropdown&nbsp; &nbsp; &nbsp; &nbsp; echo '<select id="car-models" style="min-width:100px;"><option value=""> … </option></select>';&nbsp; &nbsp; }}// jQuery / Ajax (client side)add_action( 'wp_footer', 'car_brand_selectors_script' );function car_brand_selectors_script() {&nbsp; &nbsp; ?>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; jQuery(function( $ ) {&nbsp; &nbsp; &nbsp; &nbsp; if (typeof woocommerce_params === 'undefined')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; var b = 'select#car-brands', // 1st field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; m = 'select#car-models', // 2nd field&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; r = $(m).html(); // Original 2nd field select options&nbsp; &nbsp; &nbsp; &nbsp; function ajaxSendCarBrand( carBrand ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: woocommerce_params.ajax_url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type : 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data : {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'action' : 'get_brand_terms',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'car_brand' : carBrand&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function( response ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var options = $.parseJSON(response),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opt&nbsp; &nbsp; &nbsp;= '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( $.isEmptyObject(options) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(m).html(r);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each( options, function( key, value ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opt += '<option value="'+key+'">'+value+'</option>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(m).html(opt);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // On change live event&nbsp; &nbsp; &nbsp; &nbsp; $( document.body ).on( 'change', b, function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ajaxSendCarBrand($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php}// WP AJAX HANDLER (Server side)add_action('wp_ajax_get_brand_terms', 'get_car_brand_models');add_action('wp_ajax_nopriv_get_brand_terms','get_car_brand_models');function get_car_brand_models() {&nbsp; &nbsp; if( isset($_POST['car_brand']) ) {&nbsp; &nbsp; &nbsp; &nbsp; $brand&nbsp; &nbsp; = wc_clean( $_POST['car_brand'] );&nbsp; &nbsp; &nbsp; &nbsp; $taxonomy = wc_attribute_taxonomy_name($brand);&nbsp; &nbsp; &nbsp; &nbsp; $options&nbsp; = [];&nbsp; &nbsp; &nbsp; &nbsp; if( taxonomy_exists( $taxonomy ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $terms&nbsp; &nbsp;= get_terms( array( 'taxonomy' => $taxonomy ) );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach( $terms as $term ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $options[$term->slug] = $term->name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; echo json_encode( $options );&nbsp; &nbsp; }&nbsp; &nbsp; wp_die();}代码进入您的活动子主题（或活动主题）的 functions.php 文件。测试和工作。

Answer 2

在这里看一个有效的 ajax 示例。Javascript 部分：jQuery('#car-brands').change(function() {&nbsp; &nbsp; let carBrandName = jQuery(this).val();&nbsp; &nbsp; YourFunctionNameHere(carBrandName);});//function to executefunction YourFunctionNameHere(carBrandName) {&nbsp; &nbsp; //formdata variable consists of&nbsp; &nbsp; //action: this is ajax action name for WordPress which we define in PHP with a callback function with same name. See in PHP code part.&nbsp; &nbsp; //brandName: this is your custom post attributes name&nbsp; &nbsp; let formdata = "action=get_car_models&brandName="+carBrandName;&nbsp; &nbsp; jQuery.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: ajaxurl, // since WordPress version 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php&nbsp; &nbsp; &nbsp; &nbsp; data: formdata,&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; success: function(response, textStatus, jqXHR) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery("#car-models").html(response);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function(jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do stuff here in case of error&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}PHP部分：&nbsp;//here wp_ajax is the required prefix for your custom actions&nbsp;//first parameter is action name with wp_ajax prefix&nbsp;//second parameter is callback function to execute with same name as your action&nbsp;//for example if your action name is wp_ajax_get_car_models then your callback will be get_car_modelsadd_action( 'wp_ajax_get_car_models', 'get_car_models' );function get_car_models() {&nbsp; &nbsp; global $wpdb; // this is how you get access to the database//require_once any files here in which the below code is available or just write your code here.&nbsp; &nbsp; $selected_attribute_name = $_POST['brandName'];&nbsp; &nbsp; $taxonomy = 'pa_' . $selected_attribute_name;&nbsp; &nbsp; $term_names = get_terms( array( 'taxonomy' => $taxonomy, 'fields' => 'names' ) );&nbsp; &nbsp; $html = '';&nbsp; &nbsp; $html .= '<select id="car-models"><option value="noselection">Car Model</option>';&nbsp; &nbsp; $html .= '<option>' . implode( '</option><option>', $term_names ) . '</option>';&nbsp; &nbsp; $html .= '</select>';&nbsp; &nbsp; echo $html;&nbsp; &nbsp; wp_die(); // this is required to terminate immediately and return a proper response}