Нажимаем "Управление пакетами"

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

Основные параметрами сниппета :

1. SimpleSearch

2. Решаем различные проблемы с кодировками и т.д.

Идем в core/components/simplesearch/model/simplesearch/simplesearch.class.php в нем заменяем следующие строки:

строку 297:

$text = preg_replace("/(\[\[\+.*?\]\])/i", "", $text);

заменяем на

$text = preg_replace("/(\[\[\+.*?\]\])/iu", "", $text);

строку 311:

$text = trim(preg_replace("/\s+/", " ", $this->sanitize($text)));

заменяем на

$text = trim(preg_replace("/\s+/u", " ", $this->sanitize($text)));

строку 413:

$string = preg_replace("/" . $quoteValue . "/i", "$0", $string);

заменяем на

$string = preg_replace("/" . $quoteValue . "/iu", "$0", $string);

закоментируем строку 179:

If (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str));

т.е. должно получиться вот так

/*if (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str)); */

3. Делаем копии всех стандартных чанков которые лежат в директории core/components/simplesearch/elements/chunks/

Создаем новые чанки с теми же именами и префиксом -new, и тем же содержимым (только они уже не на основе файлов, а обычные), для чего все это поймете дальше.

Например, берем первый чанк currentpagelink.chunk.tpl и создаем новый чанк currentpagelink-new (элементы — создать новый чанк) ну и переносим в него код.

[[+text]]

Отвечает за управления кнопкой в пагинации для активной страницы.

И таким же образом создаем остальные чанки:

— pagelink-new — отвечает за вывод отдельной кнопки пагинации.

[[+text]]

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

— searchform-new — форма поиска

[[%sisea.search? &namespace=`sisea` &topic=`default`]]

— searchnoresults можно не переносить — там нет не какого оформления;

— searchresult-new — вывод каждого пункта результата.

[[+idx]]. [[+pagetitle]]

[[+extract]]

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

— searchresultli — по сути тоже можно не переносить.

— searchresults-new — обертка всех результатов

[[+resultInfo]]

• [[+resultInfo]] - инф-я о кол-ве найденных документов и по какому словосочетанию.
• [[+sisea.result_pages? &namespace=`sisea` &topic=`default`]]

  Вывод фразы «Страницы с результатами поиска:»

• [[+paging]] - пагинация
• [[+results]] - результаты поиска

После всего проделанного у вас должно получиться 5 новых чанков.

4. Создаем новый документ на который будут выводиться результаты поиска

Заголовок: Результаты поиска, ставим галку «Не показывать в меню». В «Настройки» и убираем галки с «Доступен для поиска», «Использовать HTML-редактор». Сохраняем. Обновляем страницу и прописываем в содержимое

[[!SimpleSearch? &tpl=`searchresult-new` &containerTpl=`searchresults-new` &pageTpl=`pagelink-new` ¤tPageTpl=`currentpagelink-new`]]

чанки оформлении которые создали на 3 шаге (внешний вид).

Если хотите чтобы в результах поиска были картинки, то дописываем в конце этого вывода

&includeTVs=`1` &processTVs=`1`

В чанке searchresult картинку можно вызывать так: [[+img]].

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

На месте где нужно вывести форму поиска, пишем

[[!SimpleSearchForm? &landing=`11` &tpl=`searchform-new`]]

Здесь landing — id страницы с результатами поиска, в tpl — чанки оформления формы, который создали на 3 шаге.

Делали 4 и 5 шаг мы для того, чтобы можно было редактировать на свое усмотрение внешнее оформление: самой формы, результатов поиска и т.д. не влезая в исходники. А стандартное оформление достаточно печальное, вот так к примеру выглядит стандартная форма поиска.

6. Меняем оформление.

Описывать как оформить все чанки не вижу смысла, для примера приведу новое оформление для чанка searchform-new

Это обычная стандартная разметка формы от бутстрап 3, на сайте выглядит так:

Официальная документация здесь: docs.modx.com/extras/revo/simplesearch

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

This snippet displays search results based on the search criteria sent.

Simply place the snippet in the Resource you would like to display search results in.

[[!SimpleSearch]]

There are 4 chunks that are processed in SimpleSearch. Their corresponding SimpleSearch parameters are:

• tpl - The Chunk to use for each result displayed.
• containerTpl - The Chunk that will be used to wrap all the search results, pagination and message.
• pageTpl - The Chunk to use for a pagination link.
• currentPageTpl - The Chunk to use for the current pagination link.

Searching custom tables is available in SimpleSearch using the &customPackages property; however, you must have a custom package built for it. The format is:

ClassName:fieldName(s):packageName:packagePath:joinCriteria||class2Name:fieldName(s):package2Name:package2Path:join2Criteria

In other words, each custom package is separated by ||. Then, each part of it is separated by colons (:). An example to search Quip comments:

&customPackages=`quipComment:body:quip:{core_path}components/quip/model/:quipComment.resource = modResource.id`

Let"s break down each part:

• className - The class name of the table you want to search. Here, it"s QuipComment.
• fieldName(s) - A comma-separated list of column names to search. We did "body", you could also have done "body,email" or whatever.
• packageName - The name of the schema Package to add. This one is called quip.
• packagePath - The path to the model/ directory where the package is located.
• joinCriteria - The SQL to join the table you want to search and the modResource table. Your table must have some connection to the Resource it"s on (otherwise SimpleSearch won"t know how to load a URL for it!)

Once you"ve added it, it will search those fields as well for data. If it finds it in that table, it will display the result as a link to the Resource you specified in your joinCriteria. In our example, that would be the resource the Quip comment is located on.

SimpleSearch - это стандартный пакет, поиск по сайту в modx revo lution. К нему мы добавим ajax запрос для живого поиска. Пример можно посмотреть на этом же сайте, работает довольно просто и, заметьте, с пагинацией. Снипет SimpleSearchForm (форма поиска) запрашивает ajax запросом у отдельной страницы с результатами, который выводит снипет SimpleSearch.

1 Скачиваем популярный пакет поиск по сайту SimpleSearch из репозитория modx revo и устанавливаем его.
Создаем ресурс с пустым шаблоном для того что бы ajax забирал данные и отправлял при запросах в форме поиска.
Псевданим к примеру назовем «search-results» к нему будет обращаться ajax.
Содержимое ресурса:

search results if(typeof jQuery !== undefined) { $(document).ready(function() { $(".sisea-page a").click(function(event) { // пагинация event.preventDefault(); // Предотвращает навигацию браузером по страницам // Загружает следующую страницу поиска и показывает контейнер $("#site-search-results").load($(this).attr("href")).show(); return false; // заглушка }); }); } [[!SimpleSearch]]

2 Теперь разместим форму поиска в удобном для Вас месте, за это отвечает снипет «SimpleSearchForm».
Как правило форму поиска пихают в шаблоны modx.
Div элемент выводит результаты ajax запроса.

[[!SimpleSearchForm]]

3 Подключим ajax для отправки запросов из формы на созданую нами стриницу в пункте 1.
(!) Не забываем подключить jquery
(!) Убедитесь по какому адресу ajax обращается к ресурсу. За это отвечает метод load() в 2-х местах.

// SimpleSearch ajax $(document).ready(function() { // Кнопка $(".sisea-search-form").submit(function () { // раскоментировать если нужна кнопка // $("#site-search-results").load("/search-results/",$(".sisea-search-form").serialize()).slideDown("fast"); return false; }); // Живой поиск $(".sisea-search-form input").keyup(function() { if(this.value.length > 2) { // Пользователь набирает больше 2 символов в строке поиска // скрывает/отображает с результаты за пределами окна $(document).click(function(event){ // скрываем if ($(event.target).closest(".site-search-results").length) return; $(".site-search-results").slideUp("fast"); //event.stopPropagation(); }); $("#search").click(function() { // отображаем $(".site-search-results").slideDown("fast"); return false; }); // ajax запрос загрузка результатов поиска от страницы и показ контейнера $("#site-search-results").load("/search-results/",$(".sisea-search-form").serialize()).slideDown("fast"); } else { // Если набрано меньше 2 символов, скрыть контейнер (CSS display:none;) $("#site-search-results").slideUp("fast"); } }); });

4 Подключаем css для отображения реузьтатов ajax эффекта скрытия и раскрытия окна и его необходимые стили отображения, все по минимуму. Остальные стили допилите сами как описанное в мануале пакета SimpleSearch в modx revolution.

/* SimpleSearch ajax */ .site-search-results { display:none; position:absolute; text-align:left; padding:15px; background:#F7F7F7; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55); -webkit-box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55); -moz-box-shadow: 2px 3px 9px -2px rgba(50, 50, 50, 0.55); }

Кнопку поиска в снипете SimpleSearchForm можно вообще убрать
так как ajax и так перехватывает нажатие кнопки Enter.