php - 使用 ajax 为 WooCommerce 产品创建过滤器选择器

Question

我想为 WooCommerce 产品创建一个 ajax 过滤器选择器，无需任何插件。

但我不知道如何解决这个问题。

我有这个产品列表，其中包含用于选择过滤器类型的下拉列表:

我使用此代码来显示列表:

<?php wc_get_template_part( 'list', 'product' ); ?>

我知道 <div> 我必须替换的类是 '.products' ，但我必须更改 $post 按低价、高价或字母顺序更改属性，但我没有找到任何解决方案。

这是我在更改下拉列表时选择元素时更改 div 的函数

$('#filter_paradise').change ->
  valor = $('#filter_paradise option:selected').val()
  changepost(valor)
  return

当我更改下拉列表时，我使用选择值调用changepost函数，该函数将div替换为新值，但在此之前，调用filter_product函数

changepost = (valor) ->
  value = valor
  request = $.ajax(
    url: ajax_object.ajax_url
    method: 'POST'
    data:
      opc: value
      action: 'filter_product'
      dataType: "json"
    success: (html, data) ->
      #$('.products').replaceWith(html); 
      console.log 'change'
      return
    error: (errorThrown) ->
      console.log errorThrown
      return
  )
  return 

这个函数位于 function.php 中，在这个函数中我有值、国家、类别和过滤器选择的值我需要这些值来创建查询并按低价、高价或字母顺序排序

function filter_product(){
  $last_uri = explode('/', $_SERVER['HTTP_REFERER']);
  $country = $last_uri[6];
  $getcategoria = explode('=',$last_uri[7]);
  $categoria = $getcategoria[1];
    $args = null;
  echo json_encode($categoria);
  exit();

}

之前$('.products').replaceWith(html);在changepost函数中

我必须更改 $args:

$wp_query = new WP_Query( $args );

我要替换的div位于<?php wc_get_template_part( 'list', 'product' ); ?>中这部分位于 archive-product.php这个 View 是这样的。

<?php woocommerce_product_loop_start(); ?>
<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

  <div class="col-xs-12">
    <div class="elementos_lista">
      <ul>
        <li>
          <?php wc_get_template_part( 'list', 'product' ); ?>
        </li>
      </ul>
    </div>
  </div>
  <?php //wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>

<div class="map_paradise"></div>

在执行循环之前，我必须使用新参数为查询获取新的 $args，按价格或字母顺序排列。

我做错了什么？
还有其他方法吗？

欢迎任何为我指明正确方向的想法。

谢谢。

Answer 1

最后我创建了一个过滤器，这是我的解决方案

我创建我的下拉菜单

<div class="filter_paradise">
    <div class="col-xs-12">
      <select id="filter_paradise" class="form-control">
        <option value="0">Alphabetical</option>
        <option value="1">High Price</option>
        <option value="2">Low Price</option>
      </select>
    </div>
</div> 

当我的下拉列表更改时，我调用此函数

$('#filter_paradise').change ->
  valor = $('#filter_paradise option:selected').val()
  changepost(valor)
  return

changepost = (valor) ->
  value = valor
  request = $.ajax(
    url: ajax_object.ajax_url
    method: 'POST'
    data:
      opc: value
      action: 'filter_product'
      dataType: "json"
    success: (html, data) ->
      $('.products').replaceWith(html); 
      console.log 'change'
      return
    error: (errorThrown) ->
      console.log errorThrown
      return
  )
  return 

最后我在 function.php 中调用函数 filter_product 来更改我的 div

function filter_product(){
  $select_opc = $_POST['opc'];
  $last_uri = explode('/', $_SERVER['HTTP_REFERER']);
  $country = $last_uri[4];
  $getcategoria = explode('=',$last_uri[5]);
  $categoria = $getcategoria[1];
  // var_dump($last_uri);
  // var_dump($categoria);
  // var_dump($country);
  wp_reset_query();

  if (!empty($categoria)):
    switch ($select_opc) {
      case 0:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'orderby'             => 'title',
        'order'               => 'ASC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      case 1:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'meta_key'            => '_price',
        'orderby'             => 'meta_value_num',
        'order'               => 'DESC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      case 2:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'meta_key'            => '_price',
        'orderby'             => 'meta_value_num',
        'order'               => 'ASC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      default:
        # code...
        break;
    }
    else:
      switch ($select_opc) {
        case 0:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'orderby'             => 'title',
          'order'               => 'ASC',
          'product_cat'         => $country
          );
          break;
        case 1:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'meta_key'            => '_price',
          'orderby'             => 'meta_value_num',
          'order'               => 'DESC',
          'product_cat'         => $country
          );
          break;
        case 2:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'meta_key'            => '_price',
          'orderby'             => 'meta_value_num',
          'order'               => 'ASC',
          'product_cat'         => $country
          );
          break;
        default:
          # code...
          break;
      }
    endif;
  $the_query = new WP_Query( $args );

  $salida = '<ul class="products">';
    $salida .= '<div class="col-xs-12">';
      $salida .= '<div class="elementos_lista">';
        $salida .= '<ul>';
        if ( $the_query->have_posts() ) :
          while ( $the_query->have_posts() ) : $the_query->the_post();
            $salida .= '<li>'; 
            $product_thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
            $url = get_permalink();
            $salida .='<a href="'. get_permalink() .'">';
            $salida .= '<div class="row list_product_paradise">';
            if ($product_thumbnail_url):
              $salida .= '<div class="col-xs-2 image_product_thumbnail">';
              $salida .= '<img src="'. $product_thumbnail_url[0] .'" class="img-responsive" alt="'.get_the_title() .'">';
              $salida .= '</div>';
              $salida .= '<div class="product_cat col-xs-7">';
              $salida .= get_the_title();
              $salida .=  '</div>';
            else:
              $salida .= '<div class="product_cat col-xs-9">';
              $salida .= get_the_title();
              $salida .=  '</div>';
            endif;
            $salida .='<div class="total_items col-xs-3">';
            $salida .=  get_post_meta( get_the_ID(), '_regular_price', true);
            $salida .=  '</div>';
            $salida .=  '</div>';
            $salida .=  '</a>';
            $salida .= '</li>'; 
          endwhile;
        endif;
        $salida .=  '</ul>';
      $salida .=  '</div>';
    $salida .=  '</div>';
  $salida .=  '</ul>';
  $salida .= '<div class="map_paradise"></div>';
  echo $salida;
  exit();

}

  add_action( 'wp_ajax_filter_product', 'filter_product' );    // If called from admin panel
  add_action( 'wp_ajax_nopriv_filter_product', 'filter_product' );    // If called from front end