/ Плагины / WooCommerce AJAX Products Filter

WooCommerce AJAX Products Filter

HIT

10.06.2018

3694

Раннее данный фильтр участвовал в общем обзоре, в котором я приводил основные особенности. Рассмотрим подробнее работу с фильтром 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]
  • Похожие записи
  • Комментарии
  • Вложения
Upgrade WC

Upgrade WC

Очередная серия улучшений (upgrade) плагина WC. Буду добавлять по мере изучения новые решения. Поиск по SKU (артикулу) Из коробки WC не ищет по артикулам (SKU). Но достаточно установить плагин Search Читать далее »

/
Кнопки WC

Кнопки WC

Давно хотел подробно разобрать тему с кнопками WC. Кнопки меняют свой вид и функционал в зависимости от типа продукта, наличия, и других факторов. Так же в движке магазина Woocommerce множество Читать далее »

Технология акций на Woocommerce

Технология акций на Woocommerce

В одном из постов я анализировал плагины для создания массовых скидок (акций). В процессе этого мною был выработан довольно универсальный алгоритм создания акций. Переделка плагина Woo Product Category Discount Woo Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

WooCommerce AJAX Products Filter WooCommerce AJAX Products Filter
Боковая слайд-панель
Рекомендации для васБоковая слайд-панельOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.