SimpleSearch — поиск по сайту

Сегодня урок о том как в Modx Revolution реализовать поиск по сайту при помощи компонента SimpleSearch.

Документация

SimpleSearch имеет 2 сниппета — один для отображения формы («SimpleSearchForm»), а другой для отображения результатов поиска («SimpleSearch»). Рассмотрим их параметры.

Параметры сниппета SimpleSearch

Параметры сниппета SimpleSearchForm

Реализация поиска на сайте MODX

1. Устанавливаем и активируем пакет SimpleSearch с основного репозитория.
2. Создаем страницу с результатами поиска, отключаем у нее html редактор и вызываем сниппет [[!SimpleSearch]] и запоминаем ID ресурса.
   
3. В месте где нужно вывести форму поиска вызываем сниппет:[[!SimpleSearchForm? &landing=`39`]], где 39 это id ресурса с результатами поиска.

Меняем внешний вид формы поиска

За html разметку формы поиска отвечает чанк: SearchForm, сделаем его копию и назовем SearchFormNew
Теперь открываем копию чанка и подгоняем разметку под свою, к примеру у меня получилось такое код чанка:

<form role="search" class="simplesearch-search-form search-form" action="[[~[[+landing]]]]" method="[[+method]]"> 
    <label for="[[+searchIndex]]">
        <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" class="search-field" placeholder="Поиск..." value="[[+searchValue]]">
        <input type="hidden" name="id" value="[[+landing]]" />
    </label>
    <input type="submit" class="search-submit" value="Найти">
</form>

Далее указываем в вызове этот чанк:

[[!SimpleSearchForm? &landing=`39` &tpl=`SearchFormNew`]]

Меняем внешний вид результатов поиска

В принципе по умолчанию результаты поиска выглядят довольно адекватно (по крайней мере в моем случае).

За результаты поиска отвечает сниппет SimpleSearch в котором обрабатываются 4 чанка:

• tpl (SearchResult) — используется для каждого отображаемого результата.
• containerTpl (SearchResults) — используется для обертывания всех результатов поиска, разбивки на страницы и сообщения.
• pageTpl (PageLink) — используется для ссылки на страницы.
• currentPageTpl (CurrentPageLink) — используется для вывода текущей ссылки на страницы.

Сделаем копии этих 4х чанков (указаны в кавычках) и добавим к их названиям префиксы New.

Теперь можно изменить вызов с [[!SimpleSearch]] на

[[!SimpleSearch? &tpl=`SearchResultNew` &containerTpl=`SearchResultsNew` &pageTpl=`PageLinkNew` &currentPageTpl=`CurrentPageLinkNew`]]

Если сейчас произвести поиск, то результаты будут такими же — т.к. по факту не чего не изменилось — мы выводим точно такие же как и оригинальные чанки.

Давайте разберем каждый из этих чанков — чтобы вы понимали что и за что отвечает.

Начнем с обвертки результатов: SearchResultsNew, стандартная разметка у него следующая:

<p class="simplesearch-results">[[+resultInfo]]</p>

<div class="simplesearch-paging">
    <span class="simplesearch-result-pages">[[%simplesearch.result_pages? &namespace=`simplesearch` &topic=`default`]]</span>[[+paging]]
</div>

<div class="simplesearch-results-list">
    [[+results]]
</div>

<div class="simplesearch-paging">
    <span class="simplesearch-result-pages">[[%simplesearch.result_pages? &namespace=`simplesearch` &topic=`default`]]</span>
    [[+paging]]
</div>

Здесь:

• [[+resultInfo]] — инф-я о кол-ве найденных документов и по какому словосочетанию
• [[+sisea.result_pages? &namespace=`sisea` &topic=`default`]] — вывод фразы «Страницы с результатами поиска:»
• [[+results]] — результаты поиска
• [[%simplesearch.result_pages? &namespace=`simplesearch` &topic=`default`]] — вывод фразы «Страницы с результатами поиска:»
• [[+paging]] — пагинация

Давайте добавим картинки в результаты поиска и сделаем разметку результатов под бутстрап 4 сетку. Для этого допишем в конце вызова &includeTVs=`1` &processTVs=`1`

[[!SimpleSearch? 
    &tpl=`SearchResultNew` 
    &containerTpl=`SearchResultsNew` 
    &pageTpl=`PageLinkNew` 
    &currentPageTpl=`CurrentPageLinkNew`
    &includeTVs=`1` 
    &processTVs=`1`
]]

И в чанке заменим данный кусок кода

<div class="simplesearch-results-list"> [[+results]] </div>

На <div class="row">[[+results]]</div>

Теперь откроем чанк SearchResultNew, его стандартный код такой:

<div class="simplesearch-result">
    <h3>[[+idx]]. <a href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">[[+pagetitle]]</a></h3>
    <div class="extract">
        <p>[[+extract]]</p>
    </div>
</div>

Здесь:

• [[+idx]] — номер результата поиска в списке
• [[+link:is=«:then=`[[~[[+id]]]]`:else=`[[+link]]`]] — ссылка на документ (модификатор).
• [[+longtitle]] — расширенный заголовок
• [[+pagetitle]] — заголовок
• [[+extract]] — текст, по которому был найден этот документ

Поменяем разметку под бутстрап + добавим картинку (TV поле с картинкой в моем случае имеет имя image), получим примерно следующее:

<div class="col-12 mb-3">
    <a href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">
        <img src="[[+image:pthumb=`w=195&h=115&zc=1`]]" alt="[[+pagetitle]]" class="img-fluid mt-2" style="float:left;padding-right:15px"> 
        <h3>[[+pagetitle]]</h3>
    </a>
    <p>[[+extract]]</p>
</div>

В вызове я сделал обрезку картинки при помощи пакета pthumb:  [[+image:pthumb=`w=195&h=115&zc=1`]] — учитывайте это можно сделать просто [[+image]].

Ну и давайте разберем 2 оставшихся чанка.

PageLinkNew :

<span class="simplesearch-page">
    <a href="[[+link]]">[[+text]]</a>
</span>

Здесь:

• [[+link]] — ссылка на документ;
• [[+text]] — номер документа.

И CurrentPageLinkNew

<span class="simplesearch-page simplesearch-current-page">[[+text]]</span>

Где [[+text]] вывод текущей ссылки на страницу.

В принципе все. Официальная документация по компоненту здесь. Меняйте под себя все что вам нужно.

Так же если ваш сайт использует jQuery, то вы можете настроить автозаполнение (живой поиск), для этого смотрите Github.

На сайтах которых работают на шаблонизаторе феном я обычно делаю поиск при помощи PdoTools.

Если есть вопросы, пишите задавайте их в комментариях.