Хозяину на заметку
$73.64
€87.17
8 Августа 2020
eFilter – безальтернативный способ фильтрации документов по TV параметрам с множественными значениями. Установка и настройка для чайников.

eFilter – безальтернативный способ фильтрации документов по TV параметрам с множественными значениями. Установка и настройка для чайников.

В CMS Evolution есть один существенный недостаток. Все TV-переменные, прикрепляемые к документам очень сложно поддаются фильтрации в силу специфичности их записи в базу данных. Данный набор достаточно универсально решает эту проблему на Modx Evolution и позволяет делать магазины и другие сайты с каталогами, документы в которых нужно фильтровать по TV.

Исходные данные

EVO 1.4.44

Уже установлены: DocLister, DocInfo, MultiTV (есть в Extras). У вас уже есть каталог товаров с «родителем», который называется скорее всего "Catalog-tovarov", внутри которого есть папки (или папка) типа «Рубашки», «носки», «Галстуки» и пр. Внутри этих папок есть папки брендов, например, «восток», «гуччи» и т.д., а внутри них уже сами документы-товары. К каждому товару вы уже создали необходимый набор TV-шек с параметрами товара: размер, цвет, рост и пр.

Сделайте заранее новую «категорию» (группу) TV-шек, которые будут участвовать в фильтрации, например, «filters-tv». Фотографии, например, туда не добавляем, т.к. не смотря на то, что они и «привязаны» к карточке товара, но фильтровать по ним (т.е. использовать их) мы не будем. Это касается и других параметров, например, координат широты/долготы или чего-то другого по которым не планируется фильтровать документы/товары.

Установка

В один клик из Extras

Настройка

Нажимаем «Модули» и в выпадающем списке ещё раз на «модули». Появится список всех модулей, установленных в системе. «Тыкаем» на eLists. Идём на вкладку «конфигурация» и проставляем:

  • ID TV параметров товара tovarparams – id созданного во время установки нового TV параметра «tovarparams»;
  • ID шаблонов товара – id шаблона карточки товара;
  • ID категории параметров – id той самой, созданной нами ранее, группы TV-шек которые участвуют в фильтрации - «filters-tv». Откройте «Элементы» / «ПараметрыTV». Увидите список всех TV что у вас есть разбитых на категории (группы). Вот рядом с названием категории, в скобках, и указан этот id;
  • ID категории общих параметров – тут имеется ввиду, что если у вас есть TV доступные для шаблонов всех товаров и TV которые используются только на некоторых, специфичных, то ID группы общих указываем тут, а специфичную прописываем в ID категории параметров;
  • Не включать ТВ в параметры при выводе – тут можно задать исключения, точно не знаю, не пробовал.
  • Имя чанка вывода товара – имеется ввиду название чанка в котором расположен шаблон вывода товара на странице типа «список». Т.е. обычно это не шаблон одиночной страницы с одним товаром, а именно представление товаров в виде списка, т.к. результатов фильтрации бывает несколько, то удобнее их показывать списком. Этот параметр можно тут не задавать, а указать его позже, при вызове eFilterResult в качестве параметра &tpl.
  • ID TV, используемого для связки товар-категории через tagSaver – не использовал, нюансов не знаю.

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

Как помним, у нас появился TV tovarparams. Всё что надо с ним сделать – привязать к шаблону (поставить галку) корневого документа для каталога товаров (например, к шаблону Catalog). Важно, чтобы это была самая верхняя, корневая папка вашего каталога. Количество, «разветвлённость» и глубина дочерних документов значения не имеют.

Теперь один важный момент без которого ничего работать не будет. Тыкаем в «Модули» и в выпадающем списке жмём на eLists. Пред нами пустая таблица «Список параметров». Идея в том, чтобы в эту таблицу прописать дубликаты наших TV, которые участвуют в фильтрации. Делается это так:

  • В поле «Новый параметр» пишем название TV параметра по которому будем фильтровать. Это название не обязательно должно быть таким же как у самого TV, но желательно близко по смыслу, например, «Цвет». Нажимаем на кнопку «добавить параметр». В таблице появилась строчка с названием нашего нового параметра;
  • В колонке «значения» напротив нашего параметра нажимаем на «список значений». Вписываем значение параметра, например, «красный» и жмём «добавить значение». Стоит учитывать, что именно этот текст будет виден в самом фильтре на сайте. Если у вашего TV параметра несколько возможных значений (а иначе зачем оно нам нужно:)), то вписываем следующее название и добавляем. Количество значений не ограничено, более того, можно изменить их порядок если это необходимо. Сами значения лучше делать текстовыми, если проставить 0,1,2 и так далее, то есть вероятность, что фильтрация работать не будет;
  • После того как вы добавили все значения для параметра нажимаем на «обновить» справа вверху. Мы опять увидим «список параметров» у которых в столбце «описание» есть вот такая строчка вида

    @EVAL return $modx->runSnippet("multiParams", array("parent"=>"5"));

    Наша задача скопировать эту строчку и вставить в поле "возможные значения" для каждого TV параметра участвующего в фильтрации. При этом «тип ввода» оставьте удобным для вас (список, чекбоксы и пр.), он не влияет на работу фильтрации;
  • После того как вы создали/продублировали «параметры» для каждого TV, указали возможные значения параметров и скопировали полученный код в поле «возможные значения» в сам TV закрываем «управление списками».

Теперь открываем для редактирования документ, который у нас является корневым для каталога товаров (Catalog). Внизу, где обычно расположены TV параметры у нас появился блок собственно с этими параметрами. Он выглядит не так как мы привыкли и содержит всего один TV параметр «Настройка фильтра». В первом поле выбираем нужный TV по названию (соответствует вашим оригинальным названиям, указанным в параметрах TV), второе поле «Группа (не обязательно)» не трогаем. Переключатель «в списке» не трогаем, переключатель «фильтр» ставим в положение «ON» и рядом с ним выбираем тип визуального представления фильтра на странице (чекбокс, список и пр.). Теперь пропишем заголовок/название фильтра (например, «Цвет»). Всё, теперь аналогичным образом подготавливаем остальные фильтры для вывода на странице. Имейте ввиду, что если каким-то TV вы ещё не прописали параметры в eList, то они всё равно присутствуют в доступном списке, однако для фильтрации они доступны не будут. Порядок представления фильтров соответствует порядку представленному в этом разделе. Если нужно, то можете мышкой передвинуть категории фильтров.

Сейчас стоит посмотреть в админке на сами карточки/страницы товаров, проставлены ли там значения для TV параметров. После изменения списка значений они могут слететь, поэтому пройдитесь по всем или нескольким документам и проставьте значения для каждого TV.

Вывод на странице

Пришла пора сделать вывод самого фильтра на страницу и результатов его работы. В том месте старницы, где вы планируете разместить фильтр поместите следующий код:

[!eFilter?
&ajax=`1`
&ajaxMode=`1`
&btnText=`Показать`!]

[+eFilter_form+]

Последовательность именно такая, сначала вызов сниппета eFilter, а затем его плейсхолдер. Причём находиться они могут где угодно в теле/шаблоне страницы, главное, чтобы вызов сниппета был раньше, чем размещён плейсхолдер. Т.е. вызов сниппета вы можете разместить в чанке, который участвует в станицах где будет фильтрация, а пейсхолдер можно размещать в разных местах других чанков. Это актуально если у вас несколько разных шаблонов страниц где планируется фильтрация.

Последний шаг на пути к фильтрации – вызов сниппета eFilterResult:

[!eFilterResult?
      &display=`5`
      &summary=`len:100`
      &parents=`2`
      &depth=`2`
      &addWhereList=`c.template IN (5)`
      &tvPrefix=``
      &tvList=`price,photo`
      &renderTV=`photo`
      &id=`filters`
      &tpl=`tpl-doclister-item`
      &paginate=`pages`
      &TplNextP=`@CODE:<div class="arrow"><a href="" title="Вперёд"><span class="material-icons">navigate_next</span></a></div>`
      &TplPrevP=`@CODE:<div class="arrow"><a href="" title="Назад"><span class="material-icons">navigate_before</span></a></div>`
      &TplPage=`@CODE: <div class="page"><a href=""></a></div>`
      &TplCurrentPage=`@CODE: <div class="page current"></div>`
      &TplWrapPaginate=`@CODE: <div class="pagination"></div>`
!]

[+filters.pages+]

Будьте внимательны filters должен соответствовать параметру &id, а pages параметру &paginate.

Вызов этого сниппета размещаем в шаблоне страницы, которая отвечает за вывод списка товаров. Если вы знакомы с DocLister, то все параметры покажутся вам знакомы, а точнее, это по сути и есть сам DocLister. Для тестирования вывода списка товаров (без фильтрации) можете заменить название сниппета - вместо eFilterResult поставить DocLister и посмотреть на корректность вывода списка товаров. Если всё ок, то возвращайте обратно eFilterResult. Плейсхолдер
[+filters.pages+]

нужен для пагинации. Этот параметр также аналогичен Doclister-у, но тут можно не указывать &id у вызова фильтра и вообще не указывать плейсхолдер пагинации, всё будет работать и так. Единственное, в шаблонах пагинации, там где стоят теги ссылок добавьте к ним data-prefix="", получится примерно так:

<a data-prefix="" href="" title="Вперёд">

.Это надо для того, чтобы в режиме аякса пагинация не появлялась там, где она не нужна.

Теперь открываем сайт и проверяем работу фильтров. Все доступные параметров всех сниппетов и плагинов входящих в комплект вы найдёте на странице автора набора eFilter в GitHub.

Обсуждение eFilter в сообществе.

И немного о грустном: &cfg - параметр, отвечающий за внешний вид на сайте самих фильтров, поэтому если у вас специфичный авторский дизайн сайта и уж тем более все шаблоны свёрстаны с учётом дизайна, то исправить внешний вид списков, чекбоксов и пр. можно только в файле конфигурации. Для этого делаете копию оригинального файла и вместо default пишете своё, например, config.vasya_edition.php и все правки делаете в нём.

Стоит так же учесть, что к значениям TV в фильтре при выводе его на сайте добавляется параметр «все», который нужен далеко не всегда. Второй «визуальный» момент, с которым вы столкнётесь, будет вывод в скобках количества значений напротив каждого параметра фильтра. Это всё можно убрать в файле конфигурации.

Для исправления ситуации с визуальным оформлением нужно редактировать файл assets/snippets/eFilter/config/config.default.php

Его структура и разметка достаточно логичная и понятная, к тому же автор оставил комментарии. Как показали мои эксперименты, встроенные в код стили в оформлении не участвуют или участвуют минимально, хотя файл стилей, расположенный тут assets/snippets/eFilter/html/css подгружается.

Если вас не устраивает последовательность пунктов в блоке с чекбоксами или радиокнопками, то исправить её можно с помощью параметра &nosortTvId указав череза запятую ID TV-шек кторые не верно сортируются и выбрав желаемую сортировку в настроках eLists (указав порядок у значений параметров).

На этом всё, всем удачи!

Комментарии (показать/скрыть)

Maxim.Zone

Ещё статьи по теме "Интернет"