Фильтр категории AJAX в WordPress

Question

Я пытаюсь создать пользовательский фильтр категорий с ajax на главной странице. Когда я нажимаю на любую из таксономий, контент исчезает, и я не получаю никакого контента. Пользовательский тип записи: aranzman .

Это 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' );

Демонстрация или пример не работает по этой ссылке

DEMO

Answer 1

Вот для 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);
        }
    });
});
});

Вот для функции.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;
}

Я думаю, что это может помочь!

Answer 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: "ожидаемый dataType (JSON)", данные: {action: {your_action_id}, "другие данные, которые вы хотите отправить"} success: function (response) {}});

Чтобы иметь возможность обрабатывать содержимое ответа, вам необходимо отправить как часть вашего ответа html / текст результата. Таким образом, все, что вам нужно сделать, это использовать простой jqueryметод $ (селектор) .html (htmlOfResult);

Чтобы отправить данные в ваш успешный обратный вызов JavaScript, вы можете использовать wp_send_jсын () https://codex.wordpress.org/Function_Reference/wp_send_json.