使用 ajax 为 WooCommerce 产品创建过滤器选择器答案

【问题标题】：Using ajax to create a filter selector for WooCommerce products使用 ajax 为 WooCommerce 产品创建过滤器选择器
【发布时间】：2016-11-13 20:15:03
【问题描述】：

我想为 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();

}

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

我必须更改 $args ：

$wp_query = new WP_Query( $args );

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

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

我做错了什么？
有没有其他方法可以做到这一点？

欢迎任何能指出我正确方向的想法。

谢谢。

【问题讨论】：

你的问题很不清楚。使用 WordPress Ajax 涉及不同/分离的事情：1）jQuery 脚本。 2) 包含 wp_enqueue_script() 和 wp_localize_script() 的函数。 3) 与add_action('wp_ajax_ …) & add_action('wp_ajax_nopriv_ …) 相关的php ajax 函数在循环中接收数据和过滤产品。 4）选择器 html/php 代码（与 jQuery 相关）...在您的代码中，我注意到您还通过 ajax 传递“类别”数据，这不清楚，因为您没有在您的题。你的循环代码在哪里？ …
请注意，您需要编辑您的问题，并将代码分成 4 个部分并附上解释，同时提及 您的类别数据试图通过ajax。这些类别是干什么用的？你想对他们做什么？
谢谢@LoicTheAztec 我编辑了我的问题。
好的，尝试以this thread (answer) 为例。这是 Ajax 的正确过程......那么你的 php 挂钩函数在哪里与 add_action('wp_ajax_ …) 和 add_action('wp_ajax_nopriv_ …)？你能添加你的选择器html代码吗？ … 在那之后我应该能够帮助你…

标签： php jquery ajax wordpress woocommerce

【解决方案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

【讨论】：