Настройка фильтров с помощью 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. 

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

0 Число голосов: 9
3
5
1
9

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

  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, на котором я и сделал сайт. Я очень горю желанием таки доклепать маг на РЕВО. Если это в Ваших силах, помогите. Я не нашел в нете не одного нормального руководства по созданию магов на РЕВО — версии.
              1. Кирилл 04 июля 2018, 16:37 # 0
                Делал, делал по вашим урокам и вдруг платный компонент. Продолжить дальше возможности нету не покупая ничего? Зря потратил время, никто не предупреждал что будут платные части. грустно.
                1. Петропавловский Артем 04 июля 2018, 16:50 # 0
                  Вы вполне можете использовать свою голову и написать свой фильтр для товаров, тем самым вы избежите «огромного» удара по вашему кошельку, но получите достаточно сильный по вашему времени. Чем жертвовать выбирайте сами, если и правда хотите чему-то научиться.
                  1. Кирилл 04 июля 2018, 16:53 # 0
                    Спасибо, это безусловно вопрос выбора. Благодарю за уроки было интересно.
                    1. Петропавловский Артем 04 июля 2018, 16:58 # 0
                      Напишите мне ваш контакт, skype или почту, я вам скину одну из предыдущих версии этого компонента для учебных целей.
                      1. Кирилл 04 июля 2018, 17:13(Комментарий был изменён) # 0
                        kzasorin[at]gmail.com спасибо я вообще верстаю, gulp sass. Очень люблю modx, пока как хобби, больше работал с modxevo custom сборкой. Решил по вашим урокам подтянуть revo и уперся))
                        1. Петропавловский Артем 04 июля 2018, 17:26 # 0
                          Отправил
                          1. Кирилл 04 июля 2018, 17:28(Комментарий был изменён) # 0
                            Спасибо, что то пока пусто в почте
                            1. Петропавловский Артем 04 июля 2018, 20:49 # 0
                              У вас сервер заблокировал сообщение. Я завтра выгружу на Гугл диск и скину ссылку на почту
                              1. Петропавловский Артем 05 июля 2018, 11:19 # 0
                                Ушло письмо
                      2. Александр 26 марта 2019, 11:42(Комментарий был изменён) # 0
                        Артем, скиньте, пожалуйста и мне предыдущую версию.Только осваиваю ModX по Вашим урокам, и, естественно, работаю на локальной виртуальной машине. Попытка купить фильтр на modstore.pro не увенчалась успехом.
                  2. Володя 17 сентября 2018, 17:24 # 0
                    Артем, объясни пожалуйста подробнее что как работает "&class=``" откуда он выборку ведет? потому что в руководстве написано что берет поле а какое не понятно, и второе [[!mFilter2? &paginator=`pdoPage`&class=`msProduct`msProduct это что переменная которая берется из сниппета? заранее спасибо
                    1. Алексей 14 апреля 2019, 21:38 # 0
                      Как реализовать фильтр по группам например: Суперлегкие (до 5 кг), 
легкие (до 8 кг), 
средние (до 12 кг), 
тяжелые (более 12 кг), 
не важно?
                      1. shopsdev(lingerie) 10 июня 2019, 20:28 # 0
                        Спасибо за полезную обучающую статью.
                        В своих проектах очень помогла!
                        1. Александр 13 июня 2019, 14:47 # 0
                          Напишите, пжл. mSearch2 покупается раз или на каждый проект его надо заново покупать?
                          1. Іван Тіперчук 13 мая 2020, 15:07 # 0
                            Доброго времени суток. Подскажите пожалуйста что из статьи будет работать на mSearch1, а что не будет?
                            1. Петропавловский Артем 15 мая 2020, 09:08 # 0
                              Не могу сказать, так как не работал с mSearch1.
                            2. Анастасия Луговая 14 июня 2020, 11:55(Комментарий был изменён) # 0
                              День добрый! уже все перепробовала! все переделала заново по 10 раз, но проблема не уходит((( На первой странице вывода сеткой получается какая-то, простите, фигня совершенно не сеткой… на второй стр и далее норм. Появилось после того как сделала через фильтр… В чем может быть проблема?
                              1. Петропавловский Артем 14 июня 2020, 13:43 # 0
                                У вас некорректно отверстаны карточки товаров, поэтому все слетает. Попробуйте сверстать их через display: inline-block или через flexbox
                              2. Руслан 06 октября 2020, 13:36(Комментарий был изменён) # 0
                                Если мне нужно сделать 2 фильтра на одной страницы через tabs как это реализовать?Пример www.grandline.ru/raschet-ogragdeniy/подобное нужно реализовать?
                                1. Петропавловский Артем 06 октября 2020, 14:19 # 0
                                  Для этого вам нужно будет править default.js и, возможно, исходный код mSearch2. Такие компоненты не заточены под вывод нескольких блоков на странице. Сам недавно дописывал Tickets, чтобы выводилось несколько блоков комментариев на странице, у него подобная проблема.
                                2. Кирилл 25 января 2021, 17:15 # 0
                                  Приветствую, подскажите почему нормально не выводится слайдер цены?flex-bags.ru/katalog/shopperyiДелаю всё по Вашим урокам, многое чего не понимаю с первого раза, а то и приходится читать/смотреть пару раз что бы допереть.Буду премного благодарен за совет.
                                  1. Кирилл 25 января 2021, 17:45 # 0
                                    Всё нормально, это я лох.Вместо tplFilter написал tplFilert
                                  2. Александр 30 марта 2021, 11:47(Комментарий был изменён) # 0
                                    Артем, здравствуйте, обучаюсь только по вашим урокам, все получается, спасибо Вам огромное!Приобрел mSearch, удалось настроить фильтр, но есть одно но, не пойму в чем дело, если у товара в стандартном поле size указаны несколько размеров, то фильтр на странице почему то выводит недоступное поле чекбокса — " [«39-41»,«42-44»,«44-46»] 0", если указан один размер, то все хорошо, и чекбокс доступен и фильтрация идет.
                                    [[!mFilter2?
                                            &class=`msProduct`
                                            &element=`msProducts`
                                            &parents=`[[*id]]`
                                            &tplOuter=`mFilter2OuterTpl`
                                            &tpls=`grid_product_tpl`
                                            &limit=`15`
                                            &aliases=`
                                            ms|size==size,
                                            msoption|knit==knit,
                                            ms|price==price
                                            `
                                            &filters=`
                                            ms|size:default,
                                            msoption|knit:default,
                                            ms|price:number
                                            `
                                            &tplFilter.outer.price=`tpl.mFilter2.filter.slider`
                                            &tplFilter.row.price=`tpl.mFilter2.filter.number`
                                            ]]
                                    скриншот:ibb.co/s9dzfdN
                                    1. Петропавловский Артем 30 марта 2021, 11:58 # 0
                                      В параметр Filters пропишите так
                                      msoption|size:default,
                                      
                                      Ну, и aliases подкорректируйте:
                                      msoption|size==size,
                                      
                                      Это небольшая пасхалка от разработчика)
                                      1. Александр 30 марта 2021, 12:38 # 0
                                        Артем, спасибо, странно, но реально работает! Спасибо огромное!
                                    2. Владислав 16 сентября 2021, 10:48 # 0
                                      Добрый день. Артем, подскажи, пожалуйста. Хочу сделать вывод TV полей к категории товаров. В шаблоне для [[!mFilter2? прописываю соответственно
                                      &includeTVs=`menuactionhref,menuactionimage`
                                      В ресурсах категорий товаров соответственно создал и путь и картинку. Назначил шаблону — Категория товаров. В чанке mFilter2OuterTpl вывожу телевизоры так:
                                      <a href="[[+menuactionhref]]"><img alt="" src="[[+menuactionimage]]" /></a>
                                      Но на странице ничего не выводится, точнее получаю
                                      <img alt="" src="">
                                      Где я допустил ошибку?
                                      1. Владислав 16 сентября 2021, 10:51 # 0
                                        кстати, если в чанке выводить Твшку так: [[*menuactionimage]], по выводится путь к картинке
                                        1. Петропавловский Артем 16 сентября 2021, 14:16 # 0
                                          Попробуйте вывести с префиксом:
                                          [[+tv.menuactionhref]]
                                        2. Владислав 17 сентября 2021, 05:27 # 0
                                          Про &tvPrefix знаю и, конечно же, сразу так и попробовал. Но нет, не получается. Здесь проблема в другом. Если я применяю эти же Твшки к ресурсам товаров и вывожу их, например, в чанке gridProductTPL, то всё прекрасно выводится. Или, если выводить через:
                                          [[!msProducts?
                                                      &parents=`3`
                                                      &tpl=`tvCategoryProductsTPL`
                                                      &includeTVs=`menuactionimage,menuactionhref`
                                           ]]
                                          — тоже выводится, но именно картинки товаров, а нужно общую картинку категории. Думаю, было бы здорово вывести такую картинку к категориям на вашем тестовом сайте ecom2.dart.agency, по которому я и учусь, тем более, что и ТВ там готовы уже (для менюшки делали) и шаблон, осталось только вывести. И это было бы хорошим дополнением к статье :))!
                                          1. Петропавловский Артем 17 сентября 2021, 09:37(Комментарий был изменён) # 0
                                            Я не внимательно прочитал. Смотрите, если вы хотите вывести TV страницы, на которой находитесь, то нужно использовать конструкцию [[*tv]] (со звездочкой, это так же относится и к полям ресурса). А, если же, вы наоборот выводите в чанке поля другого ресурса, то тут нужно в сниппете подключать includeTVs и выводить их с помощью конструкции [[+tv.tv]] (с плюсиком). Бывает еще ситуация, когда вам нужно вывести поле другого ресурса, то тут можно воспользоваться сниппетом pdoField, например:
                                            [[pdoField?
                                                &id=`[[+parent]]`
                                                &field=`tv`
                                            ]]
                                            
                                            или же так:
                                            [[+parent:pdofield=`tv`]]
                                            
                                            1. Владислав 17 сентября 2021, 11:32(Комментарий был изменён) # 0
                                              Спасибо! Как всё просто оказалось. А то я уже накостылил через:
                                              [[pdoMenu?
                                                              &parents=`[[*id]]`
                                                              &level=`1`
                                                              &includeTVs=`menuactionimage,menuactionhref`
                                                              &tplOuter=`@INLINE <section>[[+wrapper]]</section>`
                                                              &tpl=`@INLINE <div class="dropdown-banner-holder"><a href="[[+menuactionhref]]"><img alt="" src="[[+menuactionimage]]" /></a></div>`                
                                                          ]]
                                              Хотя тоже заработало. А вот тогда ещё вопрос — почему не применяется фильтр обрезки к картинке, типа такого —
                                              <img alt="" src="[[*menuactionimage:phpthumbon=`w=690&zc=1]]" />
                                              Выводится всё-равно полноразмерным
                                              1. Владислав 18 сентября 2021, 11:55 # 0
                                                сам заметил кавычку. опять невнимательность
                                          2. Иван 02 декабря 2021, 13:16(Комментарий был изменён) # 0
                                            Здравствуйте. Делал всё по вашему уроку, но в итоге фильтр по опциям не выводится, а есть только стрелка ">". Но товары все выводятся. В чём может быть проблема?

                                            Наши клиенты

                                            Многие компании уже доверяют нам. Будьте в их числе!

                                            Хотите реализовать проект?

                                            Контакты

                                            Напишите нам - мы расскажем вам много интересного!


                                            Пермь, шоссе Космонавтов 252, офис 218