Пытаюсь сделать фильтр пользовательских таксономий по полям ACF. Без Ajax фильтр работает как нужно, но как сделать, чтобы страница не перезагружалась и всё это было динамически? Инфу беру из wp-kama, там статья по настройке ajax в wordpress в целом.
Итак у меня есть следующий код в functions.php:
add_action('wp_enqueue_scripts', 'include_jquery');
function include_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_footer', 'app_footer_scripts');
function app_footer_scripts() {
wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array() );
/**
* AJAX
*/
wp_localize_script( 'main', 'ajax',
array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce')
)
);
}
if( wp_doing_ajax() ) {
add_action( 'wp_ajax_request', 'get_filter' );
add_action( 'wp_ajax_nopriv_request', 'get_filter' );
}
function get_filter() {
$min_price = $_POST['min_price'];
echo $min_price;
wp_die();
}
Далее есть код, самого фильтра не в functions.php, а в файле catalog.php в верхней части, перед html кодом самого вывода объектов. Данный код фильтрует по минимальной и максимальной цене (для нашего примера с ajax возьмем условие только для фильтрации по минимальной цене):
$objects = get_terms(
array(
'taxonomy' => 'objects',
)
);
if ( (!empty($_POST['min_price'])) && (empty($_POST['max_price'])) ) {
$objects = get_terms(
array(
'taxonomy' => 'objects',
'meta_query' => array(
array(
'key' => 'object_price_object_price_value',
'value' => array($_POST['min_price'], 999999999999999999999999),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
)
)
)
);
}
И код самого ajax в файле main.js:
jQuery(document).ready(function($) {
$( "#minPrice" ).change(function() {
$.ajax({
type: 'POST',
url: ajax.url,
data: {
action: 'request',
min_price: $("#minPrice").val(),
},
success: function(response) {
console.log(response)
}
})
});
});
Мне необходимо, чтобы после введения значения в поле с id minPrice передавалась переменная в php и фильтр срабатывал. Если в success пишу, например $('#filter').submit(), то всё ок, на страница перезагружается. Никак не могу как правильно передать эту переменную, еще подозреваю, что функция get_filter , которая у меня в functions.php должна быть как-то связана с фильтром в основном файле, иначе $min_price изначально Undefinded. Буду признателен за помощь.
HTML-фильтра
<?php
$currency = get_field_object('currency', 'catalog_settings')['value']['label'];
$objects = get_terms(
array(
'taxonomy' => 'objects',
)
);
if ( (!empty($_POST['min_price'])) && (empty($_POST['max_price'])) ) {
$objects = get_terms(
array(
'taxonomy' => 'objects',
'meta_query' => array(
array(
'key' => 'object_price_object_price_value',
'value' => array($_POST['min_price'], 999999999999999999999999),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
)
)
)
);
} elseif ( (empty($_POST['min_price'])) && (!empty($_POST['max_price'])) ) {
$objects = get_terms(
array(
'taxonomy' => 'objects',
'meta_query' => array(
array(
'key' => 'object_price_object_price_value',
'value' => array(0, $_POST['max_price']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
)
)
)
);
} elseif ( (!empty($_POST['min_price'])) && (!empty($_POST['max_price'])) ) {
$objects = get_terms(
array(
'taxonomy' => 'objects',
'meta_query' => array(
array(
'key' => 'object_price_object_price_value',
'value' => array($_POST['min_price'], $_POST['max_price']),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
)
)
)
);
}
?>
<div class="objects py-5">
<div class="container">
<form class="objects-filter relative mb-5" method="post" id="filter">
<div class="grid grid-cols-12 bg-white border border-gray-300 rounded-md min-h-[60px]">
<div class="xl:col-span-4 md:col-span-6 col-span-12 border-r border-gray-300 objects-filter__price">
<div class="flex items-center h-full px-3">
<div class="text-sm font-medium">Стоимость:</div>
<div class="flex ml-3 flex-1">
<div class="flex border border-gray-300 rounded-sm h-8 w-1/2">
<input class="h-full pl-3 outline-none text-sm w-full" type="number" name="min_price" placeholder="от" id="minPrice">
<span class="px-3 flex justify-center items-center text-gray-300"><?php echo $currency; ?></span>
</div>
<div class="flex ml-2 border border-gray-300 rounded-sm h-8 w-1/2">
<input class="h-full pl-3 outline-none text-sm w-full" type="number" name="max_price" placeholder="до" id="maxPrice">
<span class="px-3 flex justify-center items-center text-gray-300"><?php echo $currency; ?></span>
</div>
</div>
</div>
</div>
<div class="xl:col-span-2 border-r border-gray-300 objects-filter__features">
<div class="cursor-pointer flex items-center justify-between h-full px-3">
<div class="text-sm font-medium">Особенности</div>
<div class="ml-4 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</div>
<div class="xl:col-span-2 border-r border-gray-300 objects-filter__chars">
<div class="cursor-pointer flex items-center justify-between h-full px-3">
<div class="text-sm font-medium">Характеристики</div>
<div class="ml-4 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</div>
<div class="xl:col-span-2 border-r border-gray-300 objects-filter__class">
<div class="cursor-pointer flex items-center justify-between h-full px-3">
<div class="text-sm font-medium">Класс жилья</div>
<div class="ml-4 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</div>
<input type="hidden" name="action" value="request">
<div class="xl:col-span-2 objects-filter__submit">
<div class="flex justify-center items-center h-full">
<button class="w-full h-full bg-indigo-600 text-white px-1 rounded-tr-md rounded-br-md" type="submit">Отфильтровать</button>
</div>
</div>
</div>
</form>
<div class="objects__heading">
<h2 class="objects__title text-3xl font-bold pb-5">Объекты недвижимости</h2>
</div>
<?php if($objects): ?>
<div class="objects__list grid grid-cols-1 gap-y-12">
<?php foreach ($objects as $object): ?>
<?php
$object_images = get_field('object_gallery', $object);
$object_terms = get_field('object_terms', $object);
$object_price = get_field('object_price', $object);
$object_feautres = get_field('object_features', $object);
$object_floors = get_field('object_floors', $object);
$object_class = get_field_object('object_class', $object);
$object_variants = get_field('object_variants', $object);
?>
<div class="objects__item col-span-1 shadow-md grid lg:grid-cols-2 grid-cols-1 lg:gap-x-5 border border-gray-300 rounded-xl hover:border-gray-100 transition duration-500 ease-in-out" href="<?php echo get_term_link($object -> term_id); ?>">
<div class="overflow-hidden group relative xl:col-span-1 lg:col-span-1 rounded-tl-xl lg:rounded-bl-xl lg:rounded-tr-none rounded-tr-xl bg-no-repeat bg-cover bg-center lg:h-auto h-[350px]" style="background-image: url('<?php echo $object_images[0]['url']; ?>')">
<div class="absolute opacity-0 bg-opacity-80 bg-black w-full h-full top-0 left-0 group-hover:opacity-100 transition-all duration-300 z-20 ">
<a href="#" class="w-full h-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" class="w-24 h-24 stroke-white group-hover:rotate-180 transition-all duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</a>
</div>
<?php if ($object_class): ?>
<?php if ($object_class['value']['value'] === 'economy'): ?>
<div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-purple-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
<?php elseif ($object_class['value']['value'] === 'comfort'): ?>
<div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-green-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
<?php elseif ($object_class['value']['value'] === 'buisness'): ?>
<div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-blue-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
<?php elseif ($object_class['value']['value'] === 'elite'): ?>
<div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-orange-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="xl:col-span-1 lg:col-span-1 flex flex-col lg:p-0 lg:py-5 lg:pr-5 p-5">
<div>
<div class="flex sm:items-center items-start justify-between sm:flex-row flex-col">
<span class="sm:w-auto w-full font-bold text-xl"><?php echo $object -> name; ?></span>
<a href="#" class="sm:ml-5 sm:w-auto sm:mt-0 mt-1 border-b border-dotted border-gray-400 text-gray-400 text-xs hover:text-black hover:border-black">Посмотреть на карте</a>
</div>
<?php if ($object -> description): ?>
<div class="text-sm mt-2 text-gray-500">
<?php echo $object -> description; ?>
</div>
<?php endif; ?>
<div class="flex flex-wrap mt-3">
<?php if ($object_floors): ?>
<div class="flex sm:w-auto w-full">
<div class="text-sm font-medium">Этажность:</div>
<div class="text-sm ml-2"><?php echo $object_floors; ?></div>
</div>
<?php endif; ?>
<?php if ($object_terms): ?>
<div class="flex flex-wrap sm:w-auto sm:mt-0 mt-4 w-full sm:ml-4 ml-0">
<div class="text-sm font-medium sm:w-auto w-full">Срок сдачи объекта:</div>
<div class="text-sm sm:ml-2 sm:mt-0 sm:w-auto w-full mt-1"><?php echo $object_terms; ?></div>
</div>
<?php endif; ?>
</div>
<div class="flex flex-col mt-4">
<div class="text-sm font-medium">Варианты апартаментов:</div>
<div class="flex flex-wrap mt-2 text-sm items-center">
<?php if ($object_variants): ?>
<?php foreach($object_variants as $object_variant): ?>
<div class="py-[2px] px-2 border bg-gray-100 border-gray-200 rounded-md mr-3"><?php echo $object_variant['label']; ?></div>
<?php endforeach; ?>
<?php endif; ?>
<a href="#" class="text-blue-600 underline text-xs hover:text-blue-800 sm:w-auto sm:mt-0 w-full mt-2">Посмотреть апартаменты и планировки</a>
</div>
</div>
</div>
<div class="mt-12">
<?php if ($object_price): ?>
<div>
<?php if ($object_price['object_price_mode']['value'] === 'from'): ?>
<div class="text-2xl flex font-bold">
<span class="lowercase mr-2">
<?php echo $object_price['object_price_mode']['label']; ?>
</span>
<span class="price__from_value">
<?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
</span>
<span class="ml-2">
<?php echo $currency; ?>
</span>
</div>
<?php elseif($object_price['object_price_mode']['value'] === 'range'): ?>
<div class="text-2xl flex font-bold flex-wrap">
<div class="flex sm:w-auto w-full">
<span class="mr-2">
от
</span>
<span class="price__from_value mr-1">
<?php echo number_format($object_price['object_price_value_from'], 0, '.', ' '); ?>
</span>
</div>
<div class="flex sm:ml-4 sm:w-auto w-full">
<span class="mr-2">
до
</span>
<span class="price__to_value">
<?php echo number_format($object_price['object_price_value_to'], 0, '.', ' '); ?>
</span>
<span class="ml-2">
<?php echo $currency; ?>
</span>
</div>
</div>
<?php elseif($object_price['object_price_mode']['value'] === 'fix'): ?>
<div class="text-2xl flex font-bold">
<span class="price__fix_value">
<?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
</span>
<span class="ml-2">
<?php echo $currency; ?>
</span>
</div>
<?php elseif($object_price['object_price_mode']['value'] === 'stock'): ?>
<div class="flex items-end flex-wrap">
<div class="price__new text-2xl font-bold sm:w-auto w-full sm:order-1 order-2">
<?php if ($object_price['object_price_value_stock_from']): ?>
<span>от</span>
<?php endif; ?>
<span class="price__new-value">
<?php echo number_format($object_price['object_price_value_new'], 0, '.', ' '); ?>
</span>
<span>
<?php echo $currency; ?>
</span>
</div>
<div class="price__old text-base text-gray-400 line-through sm:ml-3 font-medium sm:w-auto w-full sm:order-2 order-1">
<span class="price__old-value">
<?php echo number_format($object_price['object_price_value_old'], 0, '.', ' '); ?>
</span>
<span>
<?php echo $currency; ?>
</span>
</div>
</div>
<?php if ($object_price['object_price_value_stock_text']): ?>
<div class="text-xs text-red-500 mt-1 mb-4">
<?php echo $object_price['object_price_value_stock_text']; ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($object_feautres): ?>
<div class="flex flex-wrap gap-3 mt-4 py-4 border-t border-b border-gray-200">
<?php foreach ($object_feautres as $object_feautre): ?>
<div class="text-xs py-1 px-2 border border-gray-400 text-gray-400 rounded-md"><?php echo $object_feautre; ?></div>
<?php endforeach ; ?>
</div>
<?php endif; ?>
<div class="flex flex-wrap w-full mt-4 items-center">
<a href="#" class="sm:mr-2 mr-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-blue-600 border border-transparent text-white rounded-md hover:border-blue-800 hover:bg-blue-800 transition duration-300 ease-in-out">Подробнее об объекте</a>
<a href="#" class="sm:ml-2 sm:mt-0 mt-3 ml-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-white text-gray-600 border border-gray-600 rounded-md hover:bg-gray-600 hover:text-white transition duration-300 ease-in-out">Оставить заявку</a>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php else : ?>
<div class="text-gray-400 text-sm">
Объектов по заданным параметрам не найдено.
</div>
<?php endif;?>
</div>
</div>
include_jquery()
, если он уже есть по умолчанию? 2. Подключение скриптов обычно происходит на хукwp_enqueue_scripts
, а неwp_footer
, тем более что Вы его уже используете выше. 3. По поводу фильтра не совсем понятно, если честно, добавьте html разметку. 4. Для того чтобы на$('#filter').submit()
страница не перезагружалась, добавьте в колбек e.preventDefault(). Так как сам фильтр скорее всего форма, то логично что страница при сабмите формы перезагружается, это стандартное поведение.$('#filter').submit()
, добавляю в success? Тогда куда добавлятьe.preventDeafult()
? Если я добавляю$('#filter').submit()
перед$.ajax
, а точнее кладу$.ajax
внутрь данной функции, то и вовсе ничего не работает.wp_enqueue_script('jquery');
. Вы бы объединили HTML код фильтра с PHP кодом фильтра и показали бы куда добавляете$('#filter').submit()
. Но вообще, сейчас мне становится ясно что Вам все же нужно аяксом возвращать отсортированные записи, а не сабмитить форму с фильтром и делать это наверное нужно когда пользователь нажимает на кнопку "Отфильтровать" (то есть юзер жмет на кнопку, значения из фильтра улетают на бекенд, где на основе этих значений Вы возвращаете отсортированные/отфильтрованные записи).