在WooCommerce中为wp_dropdown_categories下拉列表启用select2 [英] Enable select2 for wp_dropdown_categories dropdown in WooCommerce
问题描述
我正在为我的WooCommerce网站创建一个高级搜索表单,并且正在使用wp_dropdown_categories()
显示2个WooCommerce产品类别下拉列表(过滤器).
I am creating an advance search form for my WooCommerce website and I am using wp_dropdown_categories()
to display 2 WooCommerce product category dropdowns (filters).
这是我的代码
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,请提供帮助.
I would like to enable select2 to my dropdown search, Please help.
推荐答案
我稍微回顾了一下您的代码,例如在shortcode函数中,内容应始终返回而不回显.
I have revisited a bit your code as for example in shortcode functions the content should always be returned and not echoed.
我已将短代码重命名为更好,更短的名称,并为两个下拉列表启用了select2.
I have renamed the shortcode to something better, shorter… and enabled select2 for both dropdowns.
功能代码:
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文件中.经过测试,可以正常工作.
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
用法: [new_search]
或echo do_shortcode('[new_search]');
(在PHP代码内部).
这篇关于在WooCommerce中为wp_dropdown_categories下拉列表启用select2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!