Как поправить load more в WP?

Question

[Александр Осадчий]

Делаю у себя ajax фильтры постов + кнопка "Показать больше" по вот этой инструкции

Фильтры отлично работают, а вот кнопка load more - она создает проблему.

Если я отфильтровал записи по категориям


То, по задумке, кнопка "load more" должна подгружать записи из отфильтрованных категорий. А она подгружает все записи.

Знаю, что отфильтрованные категории массивом нужно передать сюда:

function misha_loadmore_ajax_handler(){
	...
	$args['category_name'] = 'services, categories';
	...
}

Но как правильно это сделать - не знаю.

P.S Сами фильтры категорий в шаблоне (а у меня два фильтра) - выводятся так:

<?php
        $cat_services = get_category_by_slug('services');
        $categories_services = get_categories( [
            'taxonomy'     => 'category',
            'type'         => 'post',
            'parent'       => $cat_services->term_id,
            'hide_empty'   => 0,
        ] );

        echo '<h3>'. $cat_services->cat_name .'</h3>';

        if( $categories_services ){
            echo '<ul class="cat-check-list" id="categoryfilter-1" name="categoryfilter-1">';
            foreach( $categories_services as $cat ){
                echo '<li><div class="checkbox-custom"><span><label for="category_'. $cat->cat_ID .'"><input type="checkbox" id="category_'. $cat->cat_ID .'" name="category_'. $cat->cat_ID .'" />' . $cat->name . '</label></span></div></li>';
            }
            echo '</ul>';
        }


        $cat_categories = get_category_by_slug('categories');
        $categories_categories = get_categories( [
            'taxonomy'     => 'category',
            'type'         => 'post',
            'parent'       => $cat_categories->term_id,
            'hide_empty'   => 0,
        ] );

        echo '<h3>'. $cat_categories->cat_name .'</h3>';
        if( $categories_categories ){
            echo '<ul class="cat-check-list" id="categoryfilter-2" name="categoryfilter-2">';
            foreach( $categories_categories as $cat ){
                echo '<li><div class="checkbox-custom"><span><label for="category_'. $cat->cat_ID .'"><input type="checkbox" id="category_'. $cat->cat_ID .'" name="category_'. $cat->cat_ID .'" />' . $cat->name . '</label></span></div></li>';
            }
            echo '</ul>';
        }
	?>

Comments

[Alex]

Каким образом вы подгружаете новые посты?

[Александр Осадчий]

Alex, У меня есть две родительские категории (только из них нужно выводить записи), в index.php вот так сделал

<?php
		if ( have_posts() ) :

            if (is_blog()) {
                $args = json_decode( stripslashes( $_POST['query'] ), true );
                $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
                $args['post_status'] = 'publish';
                $args['category_name'] = 'services, categories';
                query_posts( $args );
            }
            /* Start the Loop */
            echo '<div><div id="response">';
			while ( have_posts() ) :
				the_post();
				get_template_part( 'template-parts/content/news-card', get_post_format() );
            endwhile;
            echo '</div>';
            
            if (  $wp_query->max_num_pages > 1 ) :
                echo '<div id="misha_loadmore" class="basic">More posts</div>'; // you can use <a> as well
            endif;
            echo '</div>';
			// the_posts_navigation();

		else :

			get_template_part( 'template-parts/content', 'none' );

        endif;
		?>

Кнопка Load more

$("body").on("click", "#misha_loadmore", function() {	
	var filter = $('#filter');
	console.log('Кнопка точно работает');
	$.ajax({
		url : misha_loadmore_params.ajaxurl, // AJAX handler
		data : {
			'action': 'loadmore', // the parameter for admin-ajax.php
			'query': misha_loadmore_params.posts, // loop parameters passed by wp_localize_script()
			'page' : misha_loadmore_params.current_page // current page
		},
		type : 'POST',
		beforeSend : function ( xhr ) {
			$('#misha_loadmore').text('Loading...'); // some type of preloader
		},
		success : function( data ){
			if( data ) {

				$('#misha_loadmore').text( 'More posts' );
				$('#response').append( data ); // insert new posts
				misha_loadmore_params.current_page++;

				if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page ) 
					$('#misha_loadmore').hide(); // if last page, HIDE the button

			} else {
				$('#misha_loadmore').hide(); // if no data, HIDE the button as well
			}
			
		}
	});
	return false;
});

В functions.php misha_loadmore_params

add_action( 'wp_enqueue_scripts', 'misha_script_and_styles', 1 );
function misha_script_and_styles() {
	global $wp_query;
	wp_register_script( 'misha_scripts', get_stylesheet_directory_uri() . '/script.js', array('jquery') );
	wp_localize_script( 'misha_scripts', 'misha_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
		'max_page' => $wp_query->max_num_pages
	) );

 	wp_enqueue_script( 'misha_scripts' );
}


add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

function misha_loadmore_ajax_handler(){

	// prepare our arguments for the query
	$form_filter_checkboxes = array($_POST['categoryfilter-1'], $_POST['categoryfilter-2']);

	$args = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
	$args['post_status'] = 'publish';
	$args['category_name'] = 'services, categories';


	// it is always better to use WP_Query but not here
	query_posts( $args );

	if( have_posts() ) :

		// run the loop
		while( have_posts() ): the_post();

			get_template_part( 'template-parts/content/news-card', get_post_format() );

		endwhile;

	endif;
	die; // here we exit the script and even no wp_reset_query() required!
}

[Alex]

Александр Осадчий, По клику на load more как и откуда загружаются новые записи?

[Александр Осадчий]

Alex, Обновил ответ выше

[Александр Осадчий]

Alex, Здсь по сути вся загвоздка в том, что я не знаю как правильно передать массив категорий в фильтрацию(

Answer 1

[Alex]

На стороне клиента собираете выбранные категории и передаёте на сервер

data : {
      'action': 'loadmore', // the parameter for admin-ajax.php
      'query': misha_loadmore_params.posts, // loop parameters passed by wp_localize_script()
      'page' : misha_loadmore_params.current_page // current page
      'categories': ...
    },

На сервере принимаете этот параметр
$args['category_name'] = $_POST['categories']

Comments

[Александр Осадчий]

Спасибо вам огромное, что помогаете!!

Подскажите пожалуйста, а как сюда собрать категории?
'categories': ...

Если у меня есть два фильтра со списком категорий (в index.php):

$cat_services = get_category_by_slug('services');
        $categories_services = get_categories( [
            'taxonomy'     => 'category',
            'type'         => 'post',
            'parent'       => $cat_services->term_id,
            'hide_empty'   => 0,
        ] );

        echo '<h3>'. $cat_services->cat_name .'</h3>';

        if( $categories_services ){
            echo '<ul class="cat-check-list">';
            foreach( $categories_services as $cat ){
                echo '<li class="checkbox"><span class="wpcf7-list-item first"><label for="category_'. $cat->cat_ID .'"><input type="checkbox" id="category_'. $cat->cat_ID .'" name="category_'. $cat->cat_ID .'"><span class="wpcf7-list-item-label">' . $cat->name . '</span></label></span></li>';
            }
            echo '</ul>';
        }


        $cat_categories = get_category_by_slug('categories');
        $categories_categories = get_categories( [
            'taxonomy'     => 'category',
            'type'         => 'post',
            'parent'       => $cat_categories->term_id,
            'hide_empty'   => 0,
        ] );

        echo '<h3>'. $cat_categories->cat_name .'</h3>';
        if( $categories_categories ){
            echo '<ul class="cat-check-list" id="categoryfilter-2" name="categoryfilter-2">';
            foreach( $categories_categories as $cat ){
                echo '<li class="checkbox"><span class="wpcf7-list-item first"><label for="category_'. $cat->cat_ID .'"><input type="checkbox" id="category_'. $cat->cat_ID .'" name="category_'. $cat->cat_ID .'"><span class="wpcf7-list-item-label">' . $cat->name . '</span></label></span></li>';
            }
            echo '</ul>';
        }

Это получается 2 массива..

[Alex]

Александр Осадчий, JavaScript- ом. Смотрите какие значения выбраны в обоих фильтрах и добавляете их в одну строку через запятую

[Александр Осадчий]

Alex, сейчас, к сожалению, такая ситуация, что у меня ума на это не хватает..два дня кручу и так и сяк..нет продвижения(

Если вдруг вам не сложно, помогите пожалуйста(

[Александр Осадчий]

Alex,

JavaScript- ом. Смотрите какие значения выбраны в обоих фильтрах и добавляете их в одну строку через запятую

Попробовал так:
JS-ом собрал все выбранне (checked) атегории:

var inp = $('.cat-check-list input');
	var length = inp.length;
	var mas = [];
	
	for (var i = 0; i < length; i++) {
		if (inp[i].checked) {
			mas.push(inp[i].nextSibling.textContent);
		}
	}

data : {
			'action': 'loadmore', // the parameter for admin-ajax.php
			'query': misha_loadmore_params.posts, // loop parameters passed by wp_localize_script()
			'page' : misha_loadmore_params.current_page, // current page
			'categories' : mas.join(',')
		},

Потом это дело (как вы и сказали) засунул в functions.php в функцию подкгузки
$args['category_name'] = $_POST['categories']

По сути это сработало...но частично((

Оно подгружает с правильных категорий, но может подгрузить (и показать) одну и ту-же запись несколько раз

[Alex]

Александр Осадчий, не совсем понимаю из-за чего это происходит.
Изучите параметры https://wp-kama.ru/function/wp_query#postpages
В частности post__not_in.