0
내 WooCommerce 제품 용 AJAX 필터를 만들었습니다. 이것은 Toolset Types를 사용할 때 작동했지만 CPT UI (Custom Post Type UI)를 사용하여 사용자 정의 분류를 만들 때 사용하지 않습니다. 필터링하면 작동하지만 모든 옵션이 함께 작동하지 않습니다. 나는 그것을 테스트하기 위해 새로 설치하기도했다.CPT UI 및 다중 분류로 Wordpress AJAX 필터
그래서 칼로리 분류 항목을 선택한 다음 (해당 옵션에 항목이 표시됨) 식사 유형 분류를 선택하면 식사 유형 옵션에만 항목이 표시되고 알레르기를 선택하면 택 소노 미 (taxonomy)는 해당 식사 유형에서만 상품을 가져옵니다.
각 항목을 클릭하면 해당 항목을 좁히고 에 해당하는 항목이 표시됩니다. 모두 옵션이 선택되었습니다.
functions.php
// WooCommerce AJAX Filter
function my_filters(){
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'asc',
);
if(isset($_POST['caloriefilter']))
$args['tax_query'] = array(
array(
'taxonomy' => 'z_calories',
'field' => 'id',
'terms' => $_POST['caloriefilter']
),
);
if(isset($_POST['mealtypefilter']))
$args['tax_query'] = array(
array(
'taxonomy' => 'z_meal_type',
'field' => 'id',
'terms' => $_POST['mealtypefilter']
),
);
if(isset($_POST['ingredientfilter']))
$args['tax_query'] = array(
array(
'taxonomy' => 'z_ingredients',
'field' => 'id',
'operator' => 'NOT IN',
'terms' => $_POST['ingredientfilter']
),
);
$query = new WP_Query($args);
if($query->have_posts()) :
while($query->have_posts()): $query->the_post();
wc_get_template_part('content', 'product');
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
add_action('wp_ajax_customfilter', 'my_filters');
add_action('wp_ajax_nopriv_customfilter', 'my_filters');
페이지 title.php
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<h2>Calories</h2>
<div class="divider div-transparent"></div>
<?php
if($terms = get_terms(array(
'taxonomy' => 'z_calories',
'hide_empty' => false,
'orderby' => 'none',
))) :
echo '<div class="row category-buttons">';
foreach ($terms as $term) :
echo '<div class="col-12 col-sm col-md"><input type="checkbox" id="meal-calorie-' . $term->term_id . '" value="' . $term->term_id . '" name="caloriefilter[]" /><label for="meal-calorie-' . $term->term_id . '">' . $term->name . '</label></div>';
endforeach;
echo '</div>';
endif;
?>
<h2>Meal Type</h2>
<div class="divider div-transparent"></div>
<?php
if($terms = get_terms(array(
'taxonomy' => 'z_meal_type',
'hide_empty' => false,
'orderby' => 'none',
))) :
echo '<div class="row category-buttons">';
foreach ($terms as $term) :
echo '<div class="col-12 col-sm col-md"><input type="checkbox" id="meal-type-' . $term->term_id . '" value="' . $term->term_id . '" name="mealtypefilter[]" /><label for="meal-type-' . $term->term_id . '">' . $term->name . '</label></div>';
endforeach;
echo '</div>';
endif;
?>
<a id="ingredientsToggle" class="clearfix" data-toggle="collapse" href="#ingredientsArea" aria-expanded="false" aria-controls="ingredientsArea"><button>Click for Allergies</button><h2>Allergies</h2></a>
<div class="collapse" id="ingredientsArea">
<div class="divider div-transparent"></div>
<p>Select items which you would like to avoid.</p>
<?php
if($terms = get_terms(array(
'taxonomy' => 'z_ingredients',
'hide_empty' => false,
'orderby' => 'name'
))) :
echo '<ul class="ingredients-form">';
foreach ($terms as $term) :
echo '<li><input type="checkbox" name="ingredientfilter[]" id="ingredients-' . $term->term_id . '" value="' . $term->term_id . '" /><label for="ingredients-' . $term->term_id . '"><div><i class="fa fa-square-o fa-fw fa-2x"></i><i class="fa fa-check-square-o fa-fw fa-2x"></i></div>' . $term->name . '</label></li>';
endforeach;
echo '</ul>';
endif;
?>
</div>
<input type="hidden" name="action" value="customfilter">
</form><!-- END Filter Form -->
javascript.js
/* Custom Shop Filter */
jQuery(function($){
$('#filter input').on('change', function() {
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
$('#loadingNotice').css('display' , 'block'); },
success:function(data){
$('#loadingNotice').css('display' , 'none');
$('#response').html(data);
}
});
return false;
});
});