/ Сайтостроение / Плагины / WooCommerce AJAX Products Filter

WooCommerce AJAX Products Filter

10.06.2018

890

Раннее данный фильтр участвовал в общем обзоре, в котором я приводил основные особенности. Рассмотрим подробнее работу с фильтром WooCommerce AJAX Products Filter.

Работа с 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);
});
    }		
		
});

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/
Upgrade WC

Upgrade WC

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

/
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/

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

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

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