使用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產品創建過濾器選擇器

回答

相關問題