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

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

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

我有产品的这份名单与下拉列表中选择一种过滤器：

我使用此代码显示列表：

<?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，这个功能我有没有价值，国家，类别和值由过滤器选择我需要这个值创建查询和订单通过低价格，HIGHT价格或字母

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这个说法是这样的。

<?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用新的参数，以便通过价格或字母查询之前。

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

任何想法指向正确的方向是值得欢迎的。

谢谢。

来源

2016-07-11 Stone

你的问题很不清楚。使用WordPress Ajax涉及不同/分开的事物：1）jQuery脚本。 2）包含wp_enqueue_script（）和wp_localize_script（）的函数。 3）与ajax函数相关的add_action（'wp_ajax_ ...）＆add_action（'wp_ajax_nopriv_ ...），用于接收循环中的数据和过滤器产品。 4）选择器的html/php代码（与jQuery相关）...之后，在你的代码中，我注意到你也通过ajax传递了“categories”数据，但这并不明确，因为你没有在你的题。你的循环代码又在哪里？ ... – LoicTheAztec

请注意，您需要**来编辑您的问题**，并且**需要在四个部分中分别加上解释代码**，并提及您尝试通过ajax **的类别数据。这些类别是什么？你想和他们做什么？ – LoicTheAztec

谢谢@LoicTheAztec我编辑我的问题。 – Stone

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

创建我的下拉

<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

最后我调用一个函数filter_product in function.php改变我的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

来源

2016-07-14 15:33:50 Stone

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

回答

相关问题