Фильтр категории ajax в wordpress
Я пытаюсь создать настраиваемый фильтр категорий с помощью ajax на главной странице. Когда я нажимаю на любую настраиваемую таксономию, содержимое исчезает, и я не получаю никакого содержимого. Пользовательский тип сообщения - Аранцман.
Это page-usluge.php
<ul class = "categories-filters">
<?php $args= array(
'show_option_all' => 'All posts', //Text for button All
'title_li' => __(''),
'taxonomy' => 'vrsta-aranzmana',
'post_type' => 'aranzman' );
wp_list_categories( $args ); ?> </ul>
<?php $query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
<div id = "main-content" class = "row">
<div id = "inside">
<div class = "container">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<article>
<a class = "xiong-articlebox" href = "<?php the_permalink();?>">
<header>
<h3><?php the_title( );?></h3> <p><em><?php the_date( 'j.n.Y'); ?> </em></p> </header>
<p><?php the_excerpt();?></p> </a> </article>
<?php endwhile; }?>
</div><!-- container-->
</div><!--inside -->
</div> <!--row -->
Это ajax.js
jQuery(function(){
var mainContent = jQuery('#main-content'),
cat_links = jQuery('ul.categories-filters li a');
cat_links.on('click', function(e){
e.preventDefault();
el = jQuery(this);
var value = el.attr("href");
mainContent.animate({opacity:"0.5"});
mainContent.load(value + " #inside", function(){
mainContent.animate({opacity:"1"});
});
});
});
И это functions.php, вызывающий ajax.js
function ajax_theme_scripts() {
//Ajax filter scripts
wp_register_script( 'ajax', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_script( 'ajax' );
}
add_action( 'wp_enqueue_scripts', 'ajax_theme_scripts' );
"Не" работающая демонстрация или пример находится по этой ссылке.
Да, извините, я использую этот код из некоторого обучающего видео, и он говорит ajax, однако я не знаю ajax, и я тоже думал, что это не ajax, когда я смотрю видео.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, Wordpress уже поставляется с обработчиком ajax (admin-ajax.php).
Вот ссылка на документацию по этому поводу: https://codex.wordpress.org/AJAX_in_Plugins.
Вкратце, что вам нужно сделать:
1) add_action ('wp_ajax_nopriv_ {your_action_id}', обратный вызов)
Ваш обратный вызов здесь должен быть функцией фильтра
2) Напишите javascrip ajax: $ .ajax ({ метод: "ожидаемый метод (POST)", URL: "wp-admin / admin-ajax.php (должен вызываться динамически с помощью wp_localize_script => https://codex.wordpress.org/Function_Reference/wp_localize_script)" dataType: "ожидаемый тип данных (JSON)", данные: { действие: {your_action_id}, "другие данные, которые вы хотите отправить" } успех: функция (ответ) {} });
Чтобы иметь возможность обрабатывать содержимое ответа, вам необходимо отправить как часть вашего ответа html / текст результата. Таким образом, все, что вам нужно сделать, это использовать простой метод jquery $ (selector) .html (htmlOfResult);
Чтобы отправить данные в ваш обратный вызов успеха javascript, вы можете использовать wp_send_json () https://codex.wordpress.org/Function_Reference/wp_send_json.
Я новичок в ajax и его сложных вещах, я не могу это сделать при загрузке? Спасибо за обучение по этой ссылке.
Вот для ajax.js
jQuery(document).ready(function($) {
$('ul.categories-filters li a').on('click', function(event) {
event.stopPropagation();
event.preventDefault();
$.ajax({
method: "POST",
url: Object_var.ajax_url_attr,
dataType: "JSON",
data: {
action: "myfilter_action",
// I think you are using the href to check filter
filter_req: $(this).attr('href')
},
success: function(response) {
if (typeof response != "undefined")
$('#inside .container').html(response.html_text);
}
});
});
});
вот для function.php
<?php
add_action('wp_enqueue_scripts', function(){
// Register first the ajax.js script
wp_enqueue_script('handle_of_script', 'link/to/ajax.js');
// Now send variable to the script
wp_localize_script('handle_of_script', "Object_var", [
"ajax_url_attr" => admin_url( 'admin-ajax.php' )
]);
});
add_action("wp_ajax_nopriv_myfilter_action", function(){
$filter_req = $_POST['filter_req'];
// Run filter of whatever
$query_result = your_filter();
// Convert values to html/text
$html_text = convert_to_html_text($query_result);
// Send data to jQuery AJAX
wp_send_json(
"html_text" => $html_text
);
wp_exit();
});
function convert_to_html_text($query) {
$html = "";
ob_start();
// Maybe check if query is valid or have post ...
?>
<?php while ( $query->have_posts() ): $query->the_post(); ?>
<article>
<a class = "xiong-articlebox" href = "<?php the_permalink(); ?>">
<header>
<h3><?php the_title(); ?></h3>
<p>
<em><?php the_date( 'j.n.Y'); ?></em>
</p>
</header>
<p><?php the_excerpt();?></p>
</a>
</article>
<?php endwhile;?>
<?
$html_text = ob_get_contents();
return $html;
}
Думаю, это может помочь!
wp_send_json ("html_text" => $ html_text); Сообщается об ошибке "Неожиданная двойная стрелка"
Извините, я это пропустил! wp_send_json ожидает массив в качестве параметра. Итак, это должно быть wp_send_json (["html_text" => $ html_text]).
Вы говорите, что выполняете вызов ajax. Но в вашем JS я не вижу, чтобы вы выполняли вызов ajax. Это основная статья, которая поможет вам начать работу с WordPress ajax