基于 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() {

    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();

}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。测试和工作。

Answer 2

在这里看一个有效的 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

}