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

时间:2020-05-21 16:29:45

标签: php jquery ajax wordpress woocommerce

在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作为动态变量,因此,当用户选择汽车品牌“ LEXUS”或“ TOYOTA”时,第二个选择字段会动态加载相关术语(选项)

我发现了很多相关的线程,但是我无法理解如何使它适用于我的案件。

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


编辑

我所有的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 );

2 个答案:

答案 0 :(得分:2)

以下使用Ajax从选定的“汽车品牌”中获取相应的术语(产品属性分类法)以动态生成“汽车模型”选择字段选项(选定的术语产品属性分类法)

COPY

代码进入活动子主题(或活动主题)的functions.php文件中。经过测试,可以正常工作。

答案 1 :(得分:0)

这里是一个工作的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

}