В этом уроке мы сделаем полноценный поиск по сайту на MODx Revo, с возможностью исключения ресурсов и настройками поиска. Всё это дело дополним AJAX пагинацией.

Вступление

Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации “скелета” и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.

В прошлом уроке мы добавили фото и видео галерею с возможностью увеличения и пролистывания изображений на наш сайт, ниже будут полезные ссылки:

Установим SimpleSearch

Начнём мы с загрузки и установки дополнения SimpleSearch, с помощью него мы и будем осуществлять поиск, зайдём в пакеты -> установщик -> загрузить пакеты -> SimpleSearch.

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

Создание шаблона и ресурса поиска

Теперь создадим шаблон для страницы поиска: имя – поиск, категория SimpleSearch (она автоматически создалась после установки пакета), следующее содержание:

<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
<h1>[[*pagetitle]]</h1>
<div class="navig-dop">
[[$navig-top]]
</div>
<div id="tickets-wrapper">
<div id="tickets-rows" class="ul-search">
<ul>
[[*content]]
</ul>
</div>
[[!+page.nav]]
</div>
</main>
[[$footer1]]
[[$scripts1]]
</body>
</html>

Просто скопируем содержание шаблона Галерея, мы создавали его в прошлом уроке, заменим только класс ul-gallery на другой css идентификатор ul-search.

Теперь создадим ресурс: имя Результаты поиска, шаблон Поиск, псевдоним search, поставим галочки Опубликован и Не показывать в меню, в настройках уберём галочки Использовать HTML-редактор, Доступен для поиска и Кэшируемый.

Содержание ресурса будет следующим:

[[!SimpleSearch?
&tpl=`item-id`
&minChars=`2`
&perPage=`100000`	
&docFields=`pagetitle,longtitle,alias,introtext,content`
&toPlaceholder=`res_ids`
&containerTpl=`s_container`
&includeTVs=`1` 
&processTVs=`1`
]]
[[!pdoPage:default=`Результаты отсутствуют, а коронавирусный психоз?`?
&resources=`0, [[+res_ids]]`
&showHidden=`0` 
&tpl=`SearchResult`
&limit=`3` 
&parents=`0`
&sortdir=`ASC`
&ajax=`1`
&includeTVs=`1` 
&processTVs=`1`
]]

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

Вкратце пройдёмся по смыслу написанного и продолжим: tpl item-id – шаблон вывода результата поиска, передаваемого pdoPage; минимальное количество символов для поиска; большое число результатов на страницу, pdoPage сам их рассортирует; укажем поля для поиска; с помощью toPlaceholder передаём массив результата в pdoPage; укажем containerTpl s_container, чтобы не получить в массиве ничего лишнего; подключим дополнительные поля.

В pdoPage мы сразу задаём ответ при нулевом поиске с помощью default, далее выводим ресурсы, полученные массивом и обязательно пишем в начале ноль, иначе, будет кривой пустой поиск. Не выводим скрытые ресурсы, ограничиваем вывод тремя, указываем родителя как 0, подключаем AJAX.

Создадим и отредактируем системные чанки

Прекрасно, давайте теперь создадим чанк item-id, категория SimpleSearch, в содержание:

[[+id]],

Далее создадим чанк s_container, категория SimpleSearch, содержание будет таким:

[[+results]]

Подключим AJAX

Перейдём в чанк scripts и подключим скрипт для пагинации к нашей странице, добавив такой код к уже имеющейся конструкции:

…
:or:if=`[[*id]]`:is=`20`
…

Редактируем чанк вывода результата

Зайдём в созданный дополнением чанк SearchResult и поместим там следующее:

<div class="simplesearch-result">
<h2>[[+idx]]. <a href="[[~[[+id]]]]" title="[[+longtitle]]">[[+pagetitle]]</a></h2>
<div class="extract">
<p>
[[+template:is=`4`:then=`
[[#[[+id]].content:ellipsis=`150`]]
`:else=`
[[+description]]
`]]
</p>
</div>
</div>

Если шаблон “Блог-пост” выводи его содержание, если нет – описание. С помощью [[#[[+id]].content]] мы получаем поле content ресурса по его ID (максимально универсальное решение, оно часто выручает).

Редактируем чанк вывода формы

Отлично, займёмся формой для ввода поискового запроса – перейдём в созданный дополнением чанк SearchForm и поместим туда следующий код:

<form class="simplesearch-search-form" action="[[~[[+landing]]]]" method="[[+method]]">
<fieldset>
<input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />
<input type="hidden" name="id" value="[[+landing]]" />
<input type="submit" value="[[%simplesearch.search? &namespace=`simplesearch` &topic=`default`]]" />
</fieldset>
</form>

Выведим форму поиска

Сделаем, чтобы форма была рядом с общей навигацией – перейдём в чанк header и дополним код следующим:

…
<li>[[!SimpleSearchForm? &landing=`20`]]</li>
…

Где landing – id страницы поиска.

Добавим хлебные крошки

Мы забыли про хлебные крошки, быстренько отредактируем чанк navig-top, добполнив код следующим:

…
:or:if=`[[*id]]`:is=`20`
…

Перейдём на сайт, обновим его и проверим поиск. Ищет правильно, на пустые запросы реагирует, пагинация с AJAX – всё работает как нужно.

Заключение

Поздравляю, вы добавили поиск по сайту на MODx Revo. В следующем ролике мы ещё модифицируем наш блог, добавив вывод похожих статей. Пишите, если вам интересно модифицировать поиск и добавить возможность “живого” поиска с мгновенными результатами в дополнительном окне под поисковой строкой.

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

Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!