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

WooCommerce AJAX Products Filter

HIT

10.06.2018

1180

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

Тэги: ,

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

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

Переход на WC 3.0

Когда видишь в панели плагинов обновление woocommerce до версии 3.0 — ощущение как будто резко наступил Новый год! Что же нового в версии 3.0: изучаем, тестим, разбираемся. Галерея изображений Теперь Читать далее »

Шорткоды woocommerce

Шорткоды woocommerce

Для вывода (например) на главной странице сайта элементов WC. Последние продуктыПолезно для использования на главной странице. Определяет, сколько товаров показывать на странице и количество сколько столбцов. Код: Рекомендуемые (featured)Работает точно Читать далее »

/
Отделить категории от товаров

Отделить категории от товаров

В архивах woocommerce выводит категории и товары в один список (если включить настройку выводить категории и товары). Но нам, например, необходимо категории оформить по другому. Для этого нужно отделить категории Читать далее »

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

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

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