使用 ajax 为 WooCommerce 产品创建过滤器选择器
Sto*_*one 2 php ajax wordpress jquery woocommerce
我想为 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);发布功能之前
我必须将 $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 查询，按价格或字母顺序排序。
我做错了什么？
有没有其他方法可以做到这一点？
欢迎任何为我指明正确方向的想法。
谢谢。
最后我创建了一个过滤器，这是我的解决方案
我创建我的下拉菜单
<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.phpfilter_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