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

WooCommerce AJAX Products Filter

HIT

10.06.2018

1439

Раннее данный фильтр участвовал в общем обзоре, в котором я приводил основные особенности. Рассмотрим подробнее работу с фильтром 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);
	});
});

Плагины компаньоны

Бесконечная подгрузка товаров — Load More Products for WooCommerce (10000 скачиваний). Тот же разработчик BeRocket, что гарантирует что они не будут конфликтовать с фильтром. Можно настраивать автоматическую подгрузку при скроллинге, подгузку при нажатии кнопки, ajax пагинацию (или ajax пагинация + кнопка).

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Кастомный метод платежа

Кастомный метод платежа

Создадим собственный метод платежа. Это может быть простой не предусмотренный изначально в WC метод: оплата курьеру картой, квитанция и прочие. Добавление подобных способов оплаты поможет на более раннем этапе понять Читать далее »

Фильтр. Принцип работы

Фильтр. Принцип работы

Попытка реализовать функционал полноценного фильтра для различных ситуаций: по меткам, по категориям, по таксономиям, по дополнительным полям, по сочетанию всех этих данных. Принцип работы фильтра Создаем в шаблоне архива (категории, Читать далее »

Апселлы и кросселы

Апселлы и кросселы

У Woocommerce есть функционал Апселлы (аналоги) и Кросселы (сопутствующие). Апселлы Апселлы — лучшие товары которые вы бы рекомендовали в замен данному. К примеру, товары которые лучше по качеству или каким-то Читать далее »

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

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

WooCommerce AJAX Products Filter WooCommerce AJAX Products Filter
Технология акций на Woocommerce
Рекомендации для васТехнология акций на WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.