是否可以在自定义WP_Query中添加下拉产品排序？

Question

所以我编写了一个自定义查询，它的作用是根据用户点击的制造商返回所有产品。 （例如，当用户点击ABC＆＃39;制造商时，浏览器将重定向到制造商分类页面，它将显示所有制造商的产品。）

这是我的代码

<?php $args = array('post_type' => 'product',
                    'posts_per_page' => 9,
                    'tax_query' => array(
                            array('taxonomy' => 'pa_manufacturer',
                                    'terms' => get_queried_object()->slug,
                                    'field' => 'slug',
                                    'operator' => 'IN')));
       $queried_products = new WP_Query($args);
       if($queried_products->have_posts()): while($queried_products->have_posts()): $queried_products->the_post();?>
             <div class="col-md-4">
                 <a href="<?php the_permalink($queried_products->post->ID);?>">
                       <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($queried_products->post->ID), 'full');?>
                       <div class="product-image-wrap">
                          <img src="<?php echo $image[0];?>" class="img-fluid">
                       </div>
                       <p class="product-name"><?php echo $queried_products->post->post_title;?></p>    
                 </a>
             </div>
<?php endwhile; endif;?>

是否可以在其上方添加下拉列表？

Answer 1

这是我的最新解决方案。我为下拉排序编写了一个AJAX函数。

这是触发事件的JQuery代码。

jQuery('#filter').change(function(){
    var filter_val = jQuery(this).val();
    var slug = jQuery('#slug').val();
    jQuery.ajax({
        method: 'POST',
        url: filter_ajax.ajax_url,
        data: {
            'action': 'product_filter',
            'filter': filter_val,
            'slug': slug
        },
        beforeSend: function(){
            jQuery('div#loading').fadeIn();
        },
        success: function(data){
            jQuery('#results-wrap').html(data);
            jQuery('div#loading').fadeOut();
        }
    })  
});

这是AJAX代码

add_action('wp_ajax_product_filter', 'product_filter');
add_action('wp_ajax_nopriv_product_filter', 'product_filter');

function product_filter(){
    $html = '';
    if(!empty($_POST['filter'])){
        $filter_val = explode('-', $_POST['filter']);
        $sequence = ($filter_val[1] == 'highest') ? 'DESC' : 'ASC';
        $meta_val = '';

    if($filter_val[0] == 'date'){
        $meta_val = 'date';
        if($filter_val[1] == 'newest'){
            $sequence = 'ASC';
        }else{
            $sequence = 'DESC';
        }
        $filter_val[0] = '';
    }else{
        $meta_val = 'meta_value_num';
    }

    $args = array('post_type' => 'product',
            'posts_per_page' => 9,
            'tax_query' => array(
                array('taxonomy' => 'pa_manufacturer',
                    'terms' => $_POST['slug'],
                    'field' => 'slug',
                    'operator' => 'IN')
            ),
            'orderby' => $meta_val,
            'meta_key' => $filter_val[0],
            'order' => $sequence);
    $queried_products = new WP_Query($args);

    $html .= '<div class="row">';

    if($queried_products->have_posts()):
        while($queried_products->have_posts()):
            $queried_products->the_post();
            $html .= '<div class="col-md-4">';
            $html .= '<a href="' . get_the_permalink($queried_products->post->ID) . '">';
            $image = wp_get_attachment_image_src(get_post_thumbnail_id($queried_products->post->ID), 'full');
            $html .= '<div class="product-image-wrap">';
            $html .= '<img src="' .  $image[0] . '" class="img-fluid">';
            $html .= '</div>';
            $html .= '<p class="product-name">' . $queried_products->post->post_title . '</p>';   
            $html .= '</a>';
            $html .= '</div>';
        endwhile;
    else:
        $html .= '<div class="no-results">';
        $html .= '<h1><i class="fa fa-frown-o" aria-hidden="true"></i><span class="inline-middle">No Results Found.</span></h1>';
        $html .= '</div>';
    endif;
    $html .= '</div>';
}
die($html);
}

以下是更新后的HTML代码。

<form method="post" action="<?php echo home_url($wp->request);?>" id="product-filter">
                        <select name="filter" id="filter" class="postform">
                            <option selected="selected">Sort By</option>
                            <option value="_price">Lowest Price</option>
                            <option value="_price-highest">Highest Price</option>
                            <option value="date-newest">Newest to Oldest</option>
                            <option value="date">Oldest to Newest</option>
                        </select>
                        <input name="slug" id="slug" type="hidden" value="<?php echo get_queried_object()->slug;?>">
                    </form>

                    <div id="results-wrap">

                        <?php $args = array('post_type' => 'product',
                            'posts_per_page' => 9,
                            'tax_query' => array(
                            array('taxonomy' => 'pa_manufacturer',
                                'terms' => get_queried_object()->slug,
                                'field' => 'slug',
                                'operator' => 'IN')));
                            $queried_products = new WP_Query($args);?>

                        <div class="row">
                            <?php if($queried_products->have_posts()): while($queried_products->have_posts()): $queried_products->the_post();?>
                            <div class="col-md-4">
                                <a href="<?php the_permalink($queried_products->post->ID);?>">
                                    <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($queried_products->post->ID), 'full');?>
                                    <div class="product-image-wrap">
                                        <img src="<?php echo $image[0];?>" class="img-fluid">
                                    </div>
                                    <p class="product-name"><?php echo $queried_products->post->post_title;?></p>   
                                </a>
                            </div>
                            <?php endwhile; endif;?>
                        </div>
                    </div>