Настройка фильтров с помощью mSearch2

Для того, чтобы реализовать данный урок, вам необходимо приобрести компонент mSearch2 в магазине дополнений modstore.pro. Я это уже сделал:

В комплекте с компонентом mSearch2 идет три сниппета:

• mFilter2 – фильтрация карточек товара.
• mSearch2 – морфологический поиск.
• mSearchForm – форма поиска.

В данном уроке мы будем использовать только mFilter2. Фильтровать мы будем по следующим параметрам:

• Производитель – чекбоксы.
• Цена – у нас будет слайдер.
• Встроенная память – просто выбор чекбоксов – опция для телефонов и плееров.
• Количество ядер процессора – чекбоксы – опция для телефонов.

Этих параметров нам для обучения будет достаточно. Внимательные смогли отметить, что у нас нет последних двух параметров. Мы их сейчас реализуем. Переходим в “Приложения -> miniShop2 -> Настройки -> Опции”:

Как мы видим, в левой части экрана у нас расположены категории, по которым в дальнейшем будет возможна фильтрация опции, а в правой части экрана у нас будут перечислены опции.

Создаем первую опцию – “Встроенная память”:

Вам нужно сделать абсолютно также как на скриншоте. И создаем аналогично следующую опцию:

Также не забудьте создать производителей для новых карточек товара, которые мы добавляли в прошлом уроке. Теперь нам осталось заполнить данные параметры в наших карточках товара.

Когда мы заполнили карточки товара, мы можем непосредственно приступить к разработке нашего фильтра. Данная часть будет одной из самых масштабных в наших уроках.

Для начала нужно поработать над нашим шаблоном категории товаров. Я думаю, что дублирование меню нам здесь не нужно, поэтому я его уберу. А вот вывод последних товаров оставлю, только нам нужно создать чанк и сделать вывод. У меня чанк (featureProductTpl) получился вот такой:

<li class="sidebar-product-list-item">
  <div class="row">
	<div class="col-xs-4 col-sm-4 no-margin">
	  <a href="{$id | url}" class="thumb-holder">
		{if $image?}
		  <img src="assets/images/blank.gif" data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}"/>
		  {else}
		  <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
		  srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
		  alt="{$pagetitle}" title="{$pagetitle}"/>
		  {/if}
	  </a>
	</div>
	<div class="col-xs-8 col-sm-8 no-margin">
	  <a href="{$id | url}">{$pagetitle}</a>
	  <div class="price">
		{if $old_price?}
		  <div class="price-prev">{$old_price} <i class="fa fa-ruble"></i></div>
		{/if}
		<div class="price-current">{$price} <i class="fa fa-ruble"></i></div>
	  </div>
	</div>
  </div>
</li>		

А вызов msProducts вот такой:

<div class="widget">
	<h2 class="border">Последнее поступление</h2>
	<ul class="product-list">				
		[[msProducts?
		&parents=`0`
		&tpl=`featureProductTpl`
		&limit=`5`
		&sortby=`publishedon`
		&sortdir=`DESC`
		]]				
	</ul>
</div>

Теперь, когда мы убрали все лишнее, мы можем приступить к настройке фильтров. Процесс создания чанков будет аналогичен тому же процессу в miniShop2. Начнем мы создание наших чанков с чанка обертки (стандартный чанк “tpl.mFilter2.outer”). У меня он получился следующий:

У меня не проходит чанк через фильтры, поэтому смотрите на тестовом сайте. Про параметры я расскажу в видео и вы сможете прочитать про них в документации к компоненту.

Также я в чанке tpl.mFilter2.filter.checkbox добавил класс чекбоксам – le-checkbox.

Смотрите у нас заработал фильтр! Очень быстро не правда ли? Более того, это все быстро кастомизируется, что делает MODx одной из самых гибких CMS.

Теперь я приведу код css, который прописал как для корзины, так и для каталога и фильтра:

.product-grid-holder .product-item .image img,
.products-list .product-item .image img{
	max-height: 200px;
}

.product-item-holder.hover .product-item .hover-area .add-cart-button:before {
    z-index: -1;
}


.basket-item .thumb img,
.sidebar-product-list-item img {
    max-height: 50px;
	margin: 0 auto;
	display: block;
}

.sidebar .widget .product-list li a.thumb-holder{
	display: block;
	max-width: 50px;
	width: 100%;
	margin: 0 auto;
}

#msCart img{
	max-height: 95px;
}

header .top-cart-row .top-cart-holder .basket-item .close-btn,
#cart-page .items-holder .close-btn{
	border: none;
	padding: 0;
	background: transparent;
}

.product-item .ribbons .ribbon:nth-child(2) {
    margin-top: 30px; 
}

.product-item .ribbons .ribbon:nth-child(3) {
    margin-top: 60px; 
}

.product-item .ribbons .ribbon:nth-child(4) {
    margin-top: 90px; 
}

.capital, .h1, h1, h2, .iconic-link, .btn-add-to-compare, .btn-add-to-wishlist, .availability, .availability .available, .availability .not-available, .section-title, .pagination a, .inline-input .placeholder, .simple-link, .top-bar ul > li a, header .top-cart-row .wishlist-compare-holder, header .top-cart-row .top-cart-holder .total-price-basket, .categories-filter, .breadcrumb-nav-holder .breadcrumb-item > a, .le-links li a, .accordion-widget .accordion .accordion-inner li a, .accordion-widget .accordion, .le-button, .le-dropdown .dropdown-toggle, .carousel-holder .title-nav h1, .carousel-holder .title-nav h2, .product-item-holder .body .title, #owl-main .caption .small, .banner .banner-text h1, .banner .banner-text .tagline, .nav-tabs li a, .nav-tabs li.active a, .btn-loadmore, .meta-row label, .meta-row span, .meta-row span a, #single-product-tab .new-review-form h2, .tabled-data li label, .tabled-data li .value, .field-row label, .comment-item .comment-body .author, #cart-page .widget .buttons-holder .simple-link, #checkout-page .billing-address .placeholder, #checkout-page #your-order .order-item .title, #payment-method-options .payment-method-option .radio-label, #payment-method-options .payment-method-option .value, .sidebar .price-range-holder .filter-button a, .sidebar .widget .product-list li a, .sidebar .widget .category-filter ul label, #footer h2, #footer h3, #footer .widget .body li a, #footer .link-list-row .contact-info, #footer .link-list-row .link-widget li a, #footer .copyright-bar{
	text-transform: none;
}

.product-grid-holder .product-item-holder .prices{
	overflow: hidden;
}

header .top-cart-row .top-cart-holder .dropdown-toggle .total-price {
    font-size: 20px;
    font-weight: bold;
}

#mse2_filters fieldset{
	margin: 15px 0;
}

#mse2_filters h4{
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 18px;
}

.sidebar .widget .row{
	margin-left: -15px;
	margin-right: -15px;
}

.mse2_number_slider .ui-state-default, 
.mse2_number_slider .ui-widget-content .ui-state-default, 
.mse2_number_slider .ui-widget-header .ui-state-default,
.mse2_number_slider  .ui-button, 
html .mse2_number_slider .ui-button.ui-state-disabled:hover,
html .mse2_number_slider .ui-button.ui-state-disabled:active {
    border: 1px solid #59B210!important;
    background: #59B210!important;
    font-weight: normal;
    color: #59B210!important;
}

.ui-widget-header {
    border: 1px solid #ddd;
    background: #fff!important;
    color: #333;
    font-weight: bold;
}

.product-item-holder p{
	font-size: 14px;
}

.grid-list-products .product-grid-holder .products-list .product-item-holder {
    min-height: 0;
}

.products-list {
    margin: 0;
}

.grid-list-products .grid-list-buttons ul li a.active i{
	color: #59B210;
}

.grid-list-products .control-bar #popularity-sort{
	width: auto;
	display: inline-block;
	vertical-align: sub;
}

Данный код я разместил в файле mytheme.css в папке assets/css/ и подключил после всех стилей в чанке meta.