在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>
如您所见,我正在获取"丰田"品牌的特定车型,因为我已将"丰田"硬编码为"汽车品牌":
$selected_attribute_name = 'toyota';
因此,我想要的是将$selected_attribute_name
作为动态变量,因此当用户选择汽车品牌"雷克萨斯"或"丰田"时,第二个选择字段会动态加载相关术语(选项(。
我找到了很多相关的线程,但我无法理解如何让它适用于我的案件。
如何让动态"车型"根据所选汽车品牌选择字段选项?
编辑
我所有的 php 都在一个动作钩子函数中,如下所示:
function _themename_woocommerce_custom_filter() {
$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>';
}
$selected_attribute_name = '';
$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>';
}
add_action( 'woocommerce_before_shop_loop', '_themename_woocommerce_custom_filter', 3 );
下面使用 Ajax 从所选的"汽车品牌"(产品属性分类(中获取相应的术语,以动态生成"汽车型号"选择字段选项(所选产品属性分类的术语(:
// 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() {
if( $attributes = wc_get_attribute_taxonomies() ) {
## 1st dropdown
echo '<select id="car-brands" style="min-width:100px;"><option value="">' . __("Car Brand"). '</option>';
// Loop through attribute taxonomies
foreach ( $attributes as $attribute ) {
echo '<option value="' . $attribute->attribute_name . '">' . $attribute->attribute_label . '</option>';
}
echo '</select>';
## 2nd dropdown
echo '<select id="car-models" style="min-width:100px;"><option value=""> … </option></select>';
}
}
// jQuery / Ajax (client side)
add_action( 'wp_footer', 'car_brand_selectors_script' );
function car_brand_selectors_script() {
?>
<script type="text/javascript">
jQuery(function( $ ) {
if (typeof woocommerce_params === 'undefined')
return false;
var b = 'select#car-brands', // 1st field
m = 'select#car-models', // 2nd field
r = $(m).html(); // Original 2nd field select options
function ajaxSendCarBrand( carBrand ) {
$.ajax({
url: woocommerce_params.ajax_url,
type : 'POST',
data : {
'action' : 'get_brand_terms',
'car_brand' : carBrand
},
success: function( response ) {
var options = $.parseJSON(response),
opt = '';
if ( $.isEmptyObject(options) ) {
$(m).html(r);
} else {
$.each( options, function( key, value ){
opt += '<option value="'+key+'">'+value+'</option>';
});
$(m).html(opt);
}
}
});
}
// On change live event
$( document.body ).on( 'change', b, function() {
ajaxSendCarBrand($(this).val());
});
});
</script>
<?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() {
if( isset($_POST['car_brand']) ) {
$brand = wc_clean( $_POST['car_brand'] );
$taxonomy = wc_attribute_taxonomy_name($brand);
$options = [];
if( taxonomy_exists( $taxonomy ) ) {
$terms = get_terms( array( 'taxonomy' => $taxonomy ) );
foreach( $terms as $term ){
$options[$term->slug] = $term->name;
}
}
echo json_encode( $options );
}
wp_die();
}
代码进入活动子主题(或活动主题(的函数.php文件。经过测试并工作。
这里看一个工作的 ajax 示例。
Javascript部分:
jQuery('#car-brands').change(function() {
let carBrandName = jQuery(this).val();
YourFunctionNameHere(carBrandName);
});
//function to execute
function YourFunctionNameHere(carBrandName) {
//formdata variable consists of
//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.
//brandName: this is your custom post attributes name
let formdata = "action=get_car_models&brandName="+carBrandName;
jQuery.ajax({
type: "POST",
url: ajaxurl, // since WordPress version 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
data: formdata,
cache: false,
success: function(response, textStatus, jqXHR) {
jQuery("#car-models").html(response);
},
error: function(jqXHR, textStatus, errorThrown) {
//do stuff here in case of error
}
});
}
PHP部分:
//here wp_ajax is the required prefix for your custom actions
//first parameter is action name with wp_ajax prefix
//second parameter is callback function to execute with same name as your action
//for example if your action name is wp_ajax_get_car_models then your callback will be get_car_models
add_action( 'wp_ajax_get_car_models', 'get_car_models' );
function get_car_models() {
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.
$selected_attribute_name = $_POST['brandName'];
$taxonomy = 'pa_' . $selected_attribute_name;
$term_names = get_terms( array( 'taxonomy' => $taxonomy, 'fields' => 'names' ) );
$html = '';
$html .= '<select id="car-models"><option value="noselection">Car Model</option>';
$html .= '<option>' . implode( '</option><option>', $term_names ) . '</option>';
$html .= '</select>';
echo $html;
wp_die(); // this is required to terminate immediately and return a proper response
}