在 WooCommerce 中为 wp_dropdown_categories 下拉菜单启用 select2

Question

我正在为我的 WooCommerce 网站创建一个高级搜索表单，我正在使用 wp_dropdown_categories() 显示 2 个 WooCommerce 产品类别下拉列表（过滤器）。

这是我的代码

add_shortcode( 'new_filter_search_shortcode', 'new_filter_search' );
function new_filter_search() { ?>
<form name="myform" method="GET" action="<?php echo esc_url(home_url('/')); ?>">
<?php if (class_exists('WooCommerce')) : ?>
<?php 
    if(isset($_REQUEST['product_cat']) && !empty($_REQUEST['product_cat'])) {
        $optsetlect=$_REQUEST['product_cat'];
    }
    else {
        $optsetlect=0;  
    }

    $args = array(
        'show_option_all' => esc_html__( 'Make / Model', 'woocommerce' ),
        'orderby' => 'name',
        'child_of' => 142,
        'hierarchical' => 1,
        'class' => 'cat',
        'echo' => 1,
        'depth' => 2,
        'show_count' => 1,
        'value_field' => 'name',
        'selected' => $optsetlect
    );
    $args['taxonomy'] = 'product_cat';
    $args['name'] = 'model';              
    $args['class'] = 'cate-dropdown hidden-xs';
    wp_dropdown_categories($args);  
    
    $args = array(
        'show_option_all' => esc_html__( 'Year', 'woocommerce' ),
        'orderby' => 'name',
        'child_of' => 69,
        'hierarchical' => 1,
        'class' => 'cat',
        'echo' => 1,
        'depth' => 2,
        'show_count' => 0,
        'value_field' => 'slug',
        'selected' => $optsetlect
    );
    $args['taxonomy'] = 'product_cat';
    $args['name'] = 'year';              
    $args['class'] = 'cate-dropdown hidden-xs';
    wp_dropdown_categories($args);
    
?>
<?php endif; ?>
        

<button type="submit" title="<?php esc_attr_e('Search', 'woocommerce'); ?>" class="search-btn-bg"><span><?php esc_attr_e('Search','woocommerce');?></span></button>
</form>
<?php }

这是截图

我想在我的下拉搜索中启用 select2，请帮忙。

Answer 1

我已经重新审视了一些你的代码，例如在短代码函数中，内容应该总是返回而不是回显。

我已将短代码重命名为更好、更短的内容……并为两个下拉菜单启用了 select2。

函数代码：

add_shortcode( 'new_search', 'new_filter_search_shortcode' );
function new_filter_search_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'taxonomy'  => 'product_cat', // Product category taxonomy (by default)
    ), $atts ) );

    ob_start(); // Start buffering
    ?>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <form name="myform" method="GET" action="<?php echo esc_url(home_url('/')); ?>">
    <?php
     if (class_exists('WooCommerce') ) {
        if(isset($_REQUEST[$taxonomy]) && ! empty($_REQUEST[$taxonomy])) {
            $optsetlect = esc_attr($_REQUEST[$taxonomy]);
        } else {
            $optsetlect = 0;
        }

        $class = 'cate-dropdown hidden-xs';

        wp_dropdown_categories( array(
            'show_option_all'   => esc_html__( 'Make / Model', 'woocommerce' ),
            'orderby'           => 'name',
            'child_of'          => 142,
            'hierarchical'      => 1,
            'echo'              => 1,
            'depth'             => 2,
            'show_count'        => 1,
            'value_field'       => 'name',
            'selected'          => $optsetlect,
            'taxonomy'          => $taxonomy,
            'name'              => 'model',
            'class'             => $class,
        ) );

        wp_dropdown_categories( array(
            'show_option_all'   => esc_html__( 'Year', 'woocommerce' ),
            'orderby'           => 'name',
            'child_of'          => 69,
            'hierarchical'      => 1,
            'echo'              => 1,
            'depth'             => 2,
            'show_count'        => 0,
            'value_field'       => 'slug',
            'selected'          => $optsetlect,
            'taxonomy'          => $taxonomy,
            'name'              => 'year',
            'class'             => $class,
        ) );
    }
    $search_text = esc_html__('Search', 'woocommerce');
    ?>
    <button type="submit" title="<?php echo $search_text; ?>" class="search-btn-bg"><span><?php echo $search_text;?></span></button>
    </form>
    <?php
    // Enable select2 for both dropdowns
    if (class_exists('WooCommerce') ) {
    ?>
    <script>
    jQuery(function($){
        $('select#model').select2();
        $('select#year').select2();
    });
    </script>
    <?php
    wp_enqueue_script( 'select2' );
    }
    return ob_get_clean(); // return buffered content
}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

用法： [new_search] 或 echo do_shortcode('[new_search]'); （在 PHP 代码内）.

在 WooCommerce 中为 wp_dropdown_categories 下拉菜单启用 select2

Enable select2 for wp_dropdown_categories dropdown in WooCommerce

php

wordpress

jquery

jquery-select2

woocommerce