Простой вариант, когда работает один фильтр на странице
Устанавливаем плагин Search and Filter. Прописываем в него следующие настройки:
Очень важно, для фильтра обязательно должен быть настроен параметр Sort Order. Либо с сортировкой по умолчанию, либо с сортировкой еще и по ценам. Как правило с сортировкой только по умолчанию делается в том случае, когда сортировку по цене нужно будет делать в другом месте, вне фильтра. Внизу шпаргалки как раз и рассмотрен этот пример.
Ниже представлены как раз настройки в двух случаях.
Далее выводим фильтр на страницу, для этого в нужном месте размещаем код.
Код
<div class="container-cat-002-right-items">
<? echo do_shortcode( '[searchandfilter id="223"]' ); ?>
</div>
Далее установим плагин пагинации WP-PageNavi, как это сделать можно посмотреть в шпаргалке. Прописываем в него следующие настройки:
Далее выводим результаты работы фильтра.
Пример кода
<div class="container-cat-002-right">
<div class="container-cat-002-right-items">
<? echo do_shortcode( '[searchandfilter id="223"]' ); ?>
</div>
<div id="filter-result" class="container__filter-result">
<div class="container-cat-002-right-items">
<?php
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
/*'meta_key' => 'price', */
/*'meta_value' => array( 3000, 4000 ), */
/*'meta_compare' => 'BETWEEN', */
'orderby' => 'title',
'order' => 'ASC',
);
$args['search_filter_id'] = 223;
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
?>
<!--НАЧАЛО КАРТОЧКИ-->
<div class="container-cat-002-right-items-itm">
<?the_title();?>
</div>
<!--КОНЕЦ КАРТОЧКИ-->
<?php
}
wp_reset_postdata();
}
?>
</div>
<div class="content-body pagination" style="display: contents;">
<?php
if (function_exists('wp_pagenavi'))
{
wp_pagenavi( array( 'query' => $query ) );
}
?>
</div>
</div>
</div>
Что бы сортировка по умолчанию ставилась на "по умолчанию" добавим в футер в скрипты небольшой код.
Код
<script>
$(window).on('load', function() {
$('input:radio[name="_sf_sort_order[]"]').filter('[value="id+asc"]').attr('checked', true);
});
</script>
Далее прописываем стили для фильтра, пагинации и для результирующего блока.
Приведу примеры стилей для пагинации и компонентов фильтра.
CSS пагинация
/*Пагинация*/
.wp-pagenavi {
margin: 10px 0 0 0;
display: flex;
justify-content: center;}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 2px solid #a2000d;
padding: 3px 13px;
margin: 2px;
border-radius: 5px;
color: #000000;}
CSS фильтра
.searchandfilter ul li li {
padding: 0px 0;}
.searchandfilter li label {
margin: 0;
font-family: 'Roboto-Regular';
font-size: 15px;
line-height: 1;
color: #777;
text-align: center;}
.searchandfilter li {
position: relative;}
.searchandfilter input.sf-input-checkbox ~ label::before {
position: absolute;
left: -4px;
top: 0;
content: '\2714';
text-align: center;
color: #ffffff;
line-height: 1em;
width: 17px;
height: 17px;
background-color: #ffffff;
border: 2px solid #baa063;
border-radius: 0.25em;
margin: 0.25em;
display: inline-block;}
.searchandfilter input.sf-input-checkbox:checked ~ label::before {
color: #000000;}
.searchandfilter input.sf-input-radio ~ label::before {
position: absolute;
left: -4px;
top: 0;
content: '';
text-align: center;
color: #ffffff;
line-height: 1em;
width: 17px;
height: 17px;
background-color: #ffffff;
border: 2px solid #baa063;
border-radius: 50%;
margin: 0.25em;
display: inline-block;}
.searchandfilter input.sf-input-radio:checked ~ label::before {
border: 4px solid #baa063;
background-color: #000000;}
.searchandfilter li.sf-item-0 {
display: none;}
Сложный вариант фильтрации
Рассмотрим пример осуществления сложной фильтрации, когда кроме параметров например в боковом фильтре, нам нужно еще на самой странице делать сортировку по цене, т.е. сделать связь между сортировкой и боковым фильтром.
Логика такая, что мы пишем скрипт, который при щелчке сортировке на странице проставляет галочку скрытого параметра сортировки на боковом фильтре и применяет ее не открывая боковой фильтр.
Пример
<script>
$('#priceup').click(function(){
//$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').prop('checked', true);
$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').trigger('click');
$('li.sf-field-submit input').trigger('click');
});
$('#pricedown').click(function(){
//$('input[name="_sf_sort_order[]"][value="_sfm__price+asc+num"]').prop('checked', true);
$('input[name="_sf_sort_order[]"][value="_sfm__price+desc+num"]').trigger('click');
$('li.sf-field-submit input').trigger('click');
});
</script>
Скрытие ненужных параметров в боковом фильтре
Когда параметров много и не все параметры есть у товаров в категории, то нам нужно скрывать эти параметры в боковом фильтре. В этом случае фильтрацию лучше делать по кнопке "Применить фильтр" и при этом нажатии скрывать боковую панель.
Чтобы скрыть боковую панель при нажатии кнопки "Применить фильтр" используем скрипт.
Код
$("li.sf-field-submit").click(function() {
$(".panel").removeClass('panel-show');
});
За скрытие параметров отвечает вот такой код.
Код
$('#filter_Panel').find('li').each(function (){
let element_ul = $(this).find('ul');
if (element_ul.find('li').length > 0) {
} else {
element_ul.parent().addClass('hidden');
}
});
Поэтому будем его применять при загрузке страницы.
Код
<script>
$(window).on('load', function() {
$('input:radio[name="_sf_sort_order[]"]').filter('[value="_sfm__price+asc+num"]').attr('checked', true);
$('#filter_Panel').find('li').each(function (){
let element_ul = $(this).find('ul');
if (element_ul.find('li').length > 0) {
} else {
element_ul.parent().addClass('hidden');
}
});
});
</script>
При вызове боковой панели.
Пример
<script>
$("a.container-cat-002-right-title-link").click(function() {
$(".panel").addClass('panel-show');
$('#filter_Panel').find('li').each(function (){
let element_ul = $(this).find('ul');
if (element_ul.find('li').length > 0) {
} else {
element_ul.parent().addClass('hidden');
}
});
});
$("a.close-block").click(function() {
$(".panel").removeClass('panel-show');
});
</script>
При наведении на кнопку вызова боковой панели.
Пример
$("a.container-cat-002-right-title-link").hover(function() {
$('#filter_Panel').find('li').each(function (){
let element_ul = $(this).find('ul');
if (element_ul.find('li').length > 0) {
} else {
element_ul.parent().addClass('hidden');
}
});
});