Ist es möglich, eine Dropdown-Produktsortierung in benutzerdefiniertes WP_Query einzufügen?

Question

Also schrieb ich eine benutzerdefinierte Abfrage, was es ist, dass es alle Produkte zurückgibt, auf welcher Hersteller der Benutzer klickt. (Wenn der Benutzer beispielsweise auf den Hersteller "ABC" klickt, wird der Browser auf die Seite mit der Herstellertaxonomie umgeleitet, und es werden alle Produkte des Herstellers angezeigt).

Dies ist mein Code

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

Ist es möglich, eine Drop-Down-Art darüber hinzufügen?

Answer 1

Hier ist meine aktualisierte Lösung zu diesem Thema. Ich habe eine AJAX-Funktion für die Dropdown-Sortierung geschrieben.

Hier ist der JQuery-Code zum Auslösen des Ereignisses.

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

Hier ist der AJAX-Code

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

Hier ist die aktualisierte HTML-Code.

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