2017-11-23 12 views
0

カスタムクエリを書いたので、ユーザーがクリックしたメーカに基づいてすべての製品が返されます。 (例えば、ユーザーが「ABC」製造業者をクリックすると、ブラウザは製造業者分類ページにリダイレクトされ、すべての製造業者の製品を表示する)。カスタムWP_Query内にドロップダウンプロダクトを追加することはできますか?

これは私のコード

<?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;?> 

は、その上のドロップダウンの並べ替えを追加することが可能ですか?

enter image description here

+1

私はあなたが提出したくない場合は、/フィルタリングのためにページをリロード、これはこのドロップダウンフィールドでのAjaxを使用して可能であることを考えて...だからそれは少し複雑です。しかし、少し調べてみると、チュートリアルや便利なコードがあります。 – LoicTheAztec

+0

回答:はい、可能です。 –

答えて

0

は、ここでは、この上で私の更新ソリューションです。ドロップダウンソートの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コードは、ここで更新されたHTMLコードだ

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

です。

<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> 
関連する問題