@Alexey10

Как добавить кнопку показать еще в фильтр постов wp?

Всем привет)
Сделал кнопку на аякс показать еще для постов и сделал фильтр по дате для этих же постов. Но к сожалению они конфликтуют между собой. К примеру подгружаю несколько постов с помощью кнопки, и после этого нажимаю на радио-кнопку отфильтровать по дате, и он фильтрует мне только первые 12 постов (которые были изначально). И все сбивает. Как объединить эти два кода, чтобы они не мешали друг-другу? (Возможно у кого-то есть похожие решения? или статью в интернете, чтобы и фильтр постов и кнопка показать еще работала).

archive.php
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="post-date-filter">
	<ul class="tabs-list-articles flex">
		<li>
			<label class="label_filter_block">
			  <input class="filter_radio filter_radio-js" type="radio" name="date" value="DESC" checked  />
			  <span>Сначала новые</span>
			</label>
		</li>
		<li>
			<label class="label_filter_block">
			  <input class="filter_radio filter_radio-js" type="radio" name="date" value="ASC" />
			  <span>Сначала старые</span>
			</label>
		</li>
	</ul>
	<input type="hidden" name="action" value="customfilter">
</form>

<div class="item-tabs-content-article parent-post-js">
	<div class="items-article">

		

		<div class="row no-padding-20 filter-post-js">
			<?php 

				$params = array(
					'posts_per_page' => 12,
				);
				query_posts($params);
					 
				$wp_query->is_archive = true;
				$wp_query->is_home = false;
			?>
			<?php

				while ( have_posts() ) :
					the_post();
					?>
					<?php get_template_part( 'template-parts/content', 'post_news' ); ?>
			<?php
				endwhile;

			?>

		</div>
	</div>

    <?php if (  $wp_query->max_num_pages > 1 ) : ?>
		<script>
		var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
		var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
		var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
		var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
		</script>
		<div class="btn-main-article">
			<a class="button button-loading-js" href="#">Показать еще</a>
		</div>
	<?php endif; ?>


	
</div>


файл function.php
// кнопка подгрузки постов
function true_load_posts(){
 
	$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$params = array(
		'posts_per_page' => 12,
		'orderby' => 'date',
	  	'order' => $_POST['date']
	);
	query_posts($params);
	$params = unserialize( stripslashes( $_POST['query'] ) );
	$params['paged'] = $_POST['page'] + 1; // следующая страница
	$params['post_status'] = 'publish';

	if( have_posts() ) :
		while( have_posts() ): the_post();
 
			get_template_part( 'template-parts/content', 'post_news' );
 
		endwhile;
 
	endif;
	die();
}
// фильтр подгрузки постов
function posts_filters(){

	$params = array(
		'posts_per_page' => 12,
		'orderby' => 'date',
	  	'order' => $_POST['date']
	);
	query_posts($params);

	while ( have_posts() ) :
		the_post();
		
		get_template_part( 'template-parts/content', 'post_news' ); 

	endwhile;


	 die();
}
add_action('wp_ajax_customfilter', 'posts_filters');
add_action('wp_ajax_nopriv_customfilter', 'posts_filters');

add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');


ajax
// подгрузка постов через аякс
$('.button-loading-js').on('click', function(e){
	e.preventDefault();
	$(this).text('Загрузка...'); // изменяем текст кнопки, вы также можете добавить прелоадер
	var data = {
		'action': 'loadmore',
		'query': true_posts,
		'page' : current_page
	};
	$.ajax({
		url:ajaxurl, // обработчик
		data:data, // данные
		type:'POST', // тип запроса
		success:function(data){
			if( data ) { 
				$('.button-loading-js').text('Показать еще').parents('.parent-post-js').find('.row .post-js').last().after(data); // вставляем новые посты
				current_page++; // увеличиваем номер страницы на единицу
				if (current_page == max_pages) $('.button-loading-js').parent().remove(); // если последняя страница, удаляем кнопку
			} else {
				$('.button-loading-js').parent().remove(); // если мы дошли до последней страницы постов, скроем кнопку
			}
		}
	});

	$.ajax({
	   url:filter.attr('action'),
	   data:filter.serialize(), 
	   type:filter.attr('method'),
	   success:function(data){ 
		   $('.filter-post-js').html(data); 
		}
	});

});

// фильтр постов через аякс
$('.filter_radio-js').on('change', function() {
var filter = $('#post-date-filter');
$.ajax({
   url:filter.attr('action'),
   data:filter.serialize(), 
   type:filter.attr('method'),
   success:function(data){ 
	   $('.filter-post-js').html(data); 
	}
});

return false;
});
  • Вопрос задан
  • 560 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы