Как сделать оптимизацию фильтрации блоков?

Question

[Роман Тузов]

Сейчас у меня на странице загружается более 550 блоков с контентом и загрузка страницы занимает долгое время, а на телефоне так тем более по wi-fi. Я пробовал выводить по 25 блоков с помощью пагинации wordpress и у меня получилось. Но было проблема: фильтр искал блоки только на открытой странице. Получается он искал только из 25 блоков, а все остальные блоки он не брал, т.к. они были на других страницах. И у меня возник вопрос: Как оптимизировать загрузку страницы и отображать не все 550 блоков разом, но чтобы фильтр искал из всех имеющихся.
Думал сделать как-то это с помощью скриптов может можно? Выводить не все сразу, но прогружать их или по страницам или просто появлениям при долистывании до конца.
Вот кстати сам скрипт фильтра:

// Фильтрация программ
function applyFilters() {
	// Инициализация классов
	var direction1 = $("#direction1").val();
	var level1 = $("#level1").val();
	var universities = $("#universities").val();
	var language = $("#language").val();
	var program = $("#program").val();
	// Создания селектора
	var selector = "#card-wrapper-first ." + direction1 + "." + level1 + "." + program + "." + language + "." + universities;

	// Появление нового запроса
	$('#card-wrapper-first .card-item').hide();
	$(selector).show();
}

Он берёт класс выбранных option и сверяет их с классами на блоках после нажатия на кнопку "Подобрать"

Comments

[Роман Тузов]

Совсем никто не знает? Пожалуйста, помогите, уже совсем вариантов нет. Ищу весь день

[TRNER]

Роман Тузов, А в каком виде у вас хранятся блоки с контентом до того, как вы их выведите? Возможно, у вас есть некоторая структура данных, описывающая эти блоки и которую вы сможете фильтровать, чтобы затем вывести уже отфильтрованный контент, нежели выводить все 550 блоков и фильтровать уже среди них.

Чего будет стоить только выигрыш с сокращением операций с DOM.

[Роман Тузов]

TRNER, обычные блоки с полями acf и классы взяты из таксономии к которой относятся блоки. У каждого блока своя таксономия, где-то общая. Как, например, уровни(level1)

<?php  $query = new WP_Query( 'post_type=program-card' ); ?>
<?php while ( $query->have_posts()):$query->the_post(); ?>
<div class="card-item level-<?php $term_list = wp_get_post_terms( $post->ID, 'level', array( 'fields' => 'ids' ) );
echo reset( $term_list ); ?> direction-<?php $term_list = wp_get_post_terms( $post->ID, 'direction', array( 'fields' => 'ids' ) );
echo reset( $term_list ); ?> university-<?php $term_list = wp_get_post_terms( $post->ID, 'university', array( 'fields' => 'ids' ) );
echo reset( $term_list ); ?> program-<?php $term_list = wp_get_post_terms( $post->ID, 'program', array( 'fields' => 'ids' ) );
echo reset( $term_list ); ?> language-<?php $term_list = wp_get_post_terms( $post->ID, 'language', array( 'fields' => 'ids' ) );
echo reset( $term_list ); ?>">
	<div class="card-item_top">
		<img src="<?php the_field('card_logo-link'); ?>" alt="logo">
		<p><?php the_field('card_title-rus'); ?></p>
		<h2><?php the_field('card_name-rus'); ?></h2>
		<h3>Основная программа <a href="<?php the_field('card_link'); ?>">О программе</a></h3>
	</div>
	<div class="card-item_middle">
		<ul>
			<li>
				<p>Уровень обучения</p>
				<h3><?php the_field('card_level-rus'); ?></h3>
			</li>
			<li>
				<p>Форма обучения</p>
				<h3><?php the_field('card_form-rus'); ?></h3>
			</li>
			<li>
				<p>Код программы </p>
				<h3><?php the_field('card_code'); ?></h3>
			</li>
			<li>
				<p>Продолжительность</p>
				<h3><?php the_field('card_during-rus'); ?></h3>
			</li>
			<li>
				<p>Степень или квалификация</p>
				<h3><?php the_field('card_level-rus'); ?></h3>
			</li>
			<li>
				<p>Язык обучения</p>
				<h3><?php the_field('card_language-rus'); ?></h3>
			</li>
		</ul>
		<p>Куратор</p>
		<h3><?php the_field('card_curator'); ?></h3>
		<div class="contact">
			<p><?php the_field('card_phone'); ?></p>
			<a href="mailto:<?php the_field('card_email'); ?>"><?php the_field('card_email'); ?></a>
		</div>
	</div>
	<div class="card-item_bottom">
		<div class="card-item_bottom-info">
			<h2><?php the_field('card_price'); ?>₽</h2>
			<p>за год обучения</p>
		</div>
		<a class="btn" target="_blank" href="<?php the_field('card_bottom-link'); ?>">Поступить</a>
	</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

Answer 1

[alekseyHunter]

Если в блоках искать только по заголовку - через базу данных получать список блоков и на их уровне фильтровать ... Where header like '%text%'
Если искать по тексту внутри блоков, готовься к тормозам сервера.