В этом уроке мы сделаем полноценный поиск по сайту на 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>
[[$footer]]
[[$scripts]]
</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">
<h3>
[[+idx]].
<a href="[[~[[+id]]]]" title="[[+longtitle]]">[[+pagetitle]]</a>
</h3>
<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>
<form class="simplesearch-search-form" action="services/seo-promotion" method="get">
<fieldset>
<label for="search">Поиск</label>
<input type="text" name="search" id="search" value="" />
<input type="hidden" name="id" value="20" />
<input type="submit" value="Поиск" />
</fieldset>
</form>
</li>
…
Где landing – id страницы поиска.
Добавим хлебные крошки
Мы забыли про хлебные крошки, быстренько отредактируем чанк navig-top, добполнив код следующим:
…
:or:if=`[[*id]]`:is=`20`
…
Перейдём на сайт, обновим его и проверим поиск. Ищет правильно, на пустые запросы реагирует, пагинация с AJAX – всё работает как нужно.
Заключение
Поздравляю, вы добавили поиск по сайту на MODx Revo. В следующем ролике мы ещё модифицируем наш блог, добавив вывод похожих статей. Пишите, если вам интересно модифицировать поиск и добавить возможность “живого” поиска с мгновенными результатами в дополнительном окне под поисковой строкой.
Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 5 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше внимания самой разработке.
Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!
Источник: Веб студия WITECH