Раннее данный фильтр участвовал в общем обзоре, в котором я приводил основные особенности. Рассмотрим подробнее работу с фильтром WooCommerce AJAX Products Filter (также он называется Advanced AJAX Product Filters).
Работа с WooCommerce AJAX Products Filter
Можно создавать как единичные фильтры, так и группы фильтров.
Фильтрация по категориям
Недавно была задача: для архивов атрибутов товаров (для мальчиков, для девочек) сделать дополнительные пункты меню по категориям (кеды, кроссовки, ботинки и т.д. (категории одного уровня, без вложенности)). Решил сделать на основе фильтрации. Добавил фильтр по категории, причем сам фильтр работал не корректно — после фильтрации нельзя было отменить эту категорию. Но при этом в url добавлялся атрибут фильтрации по категории. Я просто брал этот url и делал в меню произвольные ссылки, а сам фильтр по категории в последствии убрал.
Вертикальная верстка фильтра
Нестандартная вертикальная верстка фильтра дело довольно хлопотное, т.к. базовые стили и скрипты фильтра на это не рассчитаны.
Привожу доработки, которые я применял в своем решении. Изначально сам фильтр и сортировку я вставляю в размеченную панель (подробнее о панели).
function sitechoiceviewproduct() {
echo '<span class="mobile-filter-button"><i class="fa fa-filter" aria-hidden="true"></i> Фильтр по товарам</span>';
echo '<div id="filter-area">';
dynamic_sidebar( 'filter-group' );
echo '</div>';
}
add_action( 'woocommerce_before_shop_loop', 'sitechoiceviewproduct', 20 );
function addpannell() { echo '<div id="pannel">'; }
add_action( 'woocommerce_before_shop_loop', 'addpannell', 17 );
function addpannellend() { echo '</div>'; }
add_action( 'woocommerce_before_shop_loop', 'addpannellend', 60 );
Далее дорабатываем стили и скрипты:
/* Фильтрация */
#filter-area {display: flex; width: 50%; justify-content: space-between;}
.berocket_aapf_widget-wrapper {display: flex; align-items: center; margin-right: 30px;}
.berocket_aapf_widget-title_div {display: flex; align-items: center;}
.berocket_aapf_widget-title, .berocket_aapf_widget {margin-bottom: 0 !important;}
.berocket_aapf_widget-title:after {content: "\f105"; font-family: FontAwesome; margin-left: 5px; color: #4b5da2;}
ul.berocket_aapf_widget li > span {color: #111 !important;}
ul.berocket_aapf_widget {
margin-bottom: 0 !important;
position: absolute;
z-index: 96;
top: 100%;
background: #fff;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
padding: 15px;
min-width: 200px;
visibility: hidden !important;
display: block !important;
transition: all 0.1s ease;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s ease 0s;
}
.berocket_aapf_widget.berocket_style_block.filter-open {visibility: visible !important;}
input.berocket_aapf_reset_button {cursor: pointer; border-radius: 3px; background: none; border: 1px solid #fff;}
li.berocket_widget_show_values {display: none !important;}
/* Раскрытие фильтров */
jQuery(document).ready(function(){
jQuery('.berocket_aapf_widget-wrapper').click(function() {
jQuery(this).find('ul.berocket_aapf_widget').addClass('filter-open');
});
});
/* Скрытие фильтров */
jQuery(function($){
$(document).mouseup(function (e){ // событие клика по веб-документу
var div = $("ul.berocket_aapf_widget"); // тут указываем ID элемента
if (!div.is(e.target) // если клик был не по нашему блоку
&& div.has(e.target).length === 0) { // и не по его дочерним элементам
div.removeClass('filter-open'); // скрываем его
}
});
});
/* Доработка для моб.версии */
$(document).bind('ready ajaxComplete', function(){
width = $(window).width();
if (width <= 480) {
jQuery('ul.berocket_aapf_widget li').click(function() {
setTimeout(function () { jQuery('ul.berocket_aapf_widget').removeClass('filter-open'); }, 1000);
});
}
});
Конфликт с Lazy Load for WooCommerce
Если при Ajax обновлении товаров картинки не подгружаются то их можно перезагрузить принудительно
$(document).ready(function () {
$("body").on("click", "ul.berocket_aapf_widget li", function () {
setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
});
$("body").on("click", "ul.page-numbers li", function () {
setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
});
$("body").on("change", ".orderby", function () {
setTimeout(function(){ $("img.lazy").show().lazyload({effect: "fadeIn"}); }, 2000);
});
});
Универсальный event после применения фильтра любым из способов:
// Активация скриптов после применения фильтра
$(document).on('berocket_ajax_filtering_end', after_filter_events);
function after_filter_events (e) {
setTimeout(function(){
// alert ('filtred');
// скрипты которые нужно запускать после применения фильтра
}, 1000);
}
Особенности фильтрации
Если все выведенные товары с одинаковой ценой, то фильтр по цене не выводится.
Плагины компаньоны
Бесконечная подгрузка товаров — Load More Products for WooCommerce (10000 скачиваний). Тот же разработчик BeRocket, что гарантирует что они не будут конфликтовать с фильтром. Можно настраивать автоматическую подгрузку при скроллинге, подгузку при нажатии кнопки, ajax пагинацию (или ajax пагинация + кнопка).
Скрытие раскрытие (spoiler) каждого отдельно фильтра
jQuery(document).ready(function($) {
// Раскрывающийся блок
$('.bapf_body').hide();
$('.bapf_head').click(function(){
$(this).toggleClass('open');
$(this).next().slideToggle();
});
// Исключение (фильтры будут открыты)
$('#bapf_1 .bapf_head').addClass('open');
$('#bapf_1 .bapf_body').slideDown();
$('#bapf_2 .bapf_head').addClass('open');
$('#bapf_2 .bapf_body').slideDown();
$('#bapf_3 .bapf_head').addClass('open');
$('#bapf_3 .bapf_body').slideDown();
});
Стили:
/* Раскрытие фильтров */
.bapf_head {position: relative; cursor: pointer;}
.bapf_head:after {
content: "\e97a";
font-family: "icomoon";
position: absolute;
right: 15px;
top: 3px;
}
.bapf_head.open:after {
content: "\e97d";
}
[site-socialshare]