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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для начала нужно поработать над нашим шаблоном категории товаров. Я думаю, что дублирование меню нам здесь не нужно, поэтому я его уберу. А вот вывод последних товаров оставлю, только нам нужно создать чанк и сделать вывод. У меня чанк (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”). У меня он получился следующий:

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

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

Также я в чанке 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. 

Оцените статью:

Проголосовало: 53

Комментарии (12)

  1. Сергей Малышев 28 апреля 2017, 08:45 # 0
    В комплекте с компонентом mSearch2 идет два сниппета:
    На самом деле три сниппета. Поправьте, пожалуйста.
    1. Петропавловский Артем 28 апреля 2017, 09:01 # 0
      Поправил, спасибо!
      1. Алексей 13 июня 2017, 11:04 # 0
        Артем!Подскажите, после установки mDSearsh2 — как то странно вывел весь фильтр, он проиндексировал базу, после все вывел в виде кода, подскажите где и что надо исправить чтобы хотя бы он показывался нормально?Выводит примерно так: Array ( [filters] => Цена От /> До <input type=«text» name=«ms|price» и так далее…
    2. Илья 30 мая 2017, 10:30 # 0
      Покажите пожалуйста как отсортировать товары по опциям товара изначально при загрузке страницы (в mFilter2 метод &sort). По документации плохо это понятно.
      1. Соломон 14 июня 2017, 17:08 # 0
        Артем, добрый день! Помогите, пожалуйста, решить проблему. При переключении режимов «Сетка» — «Список» очень долго грузятся картинки товаров. На вашем тестовом сайте у меня происходит тоже самое. Картинки загружаются после обновления страницы. А при переключении «Сетка» — «Список» — тормоза(
        1. Константин 11 августа 2017, 07:47 # 0
          Привет! У меня такая же фигня. Поделись решением, если исправил! Спасибо!
          1. Владимир 27 сентября 2017, 10:05 # 0
            Проблема в echo.min.js, отключите библиотеку и в чанке gridProductTpl и listProductTpl строку
            <img src="/images/blank.gif" data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}"  width="200"/>
            замените на
            <img src="{$image}" alt="{$pagetitle}" title="{$pagetitle}"  width="200"/>
        2. Соломон 15 июня 2017, 11:57 # 0
          Артем, объясните, пожалуйста, зачем при загрузке картинок вы используете: img src=«assets/images/blank.gif» data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}", а не просто загружаете с помощью: img src="{$image}" alt="{$pagetitle}" title="{$pagetitle}"
          1. Владимир 27 сентября 2017, 10:20 # 0
            Это не Артем использует, а шаблон такой!
          2. Андрей 23 июля 2017, 17:16 # 0
            Артем доброго времени суток. Спасибо за Ваше видео. Вопрос следующий. mSearch2 настроил. Фильтр работает. Но когда выдает несколько страниц найденного товара то при переходе на следующую страницу фильтр сбивается. Какая может быть в этом причина? Спасибо. С Уважением к Вам Андрей!
            1. Константин 11 августа 2017, 07:43 # 0
              Это связано с тем, что у тебя не аяксовская пагинация
            2. Андрей 11 ноября 2017, 22:05 # 0
              Артем, создайте пожалуйста урок по бесплатному фильтру. У меня не особо красиво все получилось, а сайт i-guru.ru дает отличный мануал по созданию на EVO, на котором я и сделал сайт. Я очень горю желанием таки доклепать маг на РЕВО. Если это в Ваших силах, помогите. Я не нашел в нете не одного нормального руководства по созданию магов на РЕВО — версии.