SimpleSearch - это стандартный пакет, поиск по сайту в modx revolution. К нему мы добавим 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.
Здравствуйте, дорогие друзья и коллеги! Хочу познакомить вас с отличным пакетом для организации поиска на сайте под системой Modx Revolution - SimpleSearch . Я пошагово объясню вам, как установить этот пакет на сайт и организовать поиск на сайте. Итак, приступим:
1. Для начала заходим в "Система" - "Управление пакетами"
Жмем "Продолжить", а потом "ОК"
7. Создаем новый ресурс в корне дереваЗаголовок: Результаты поиска, ставим галочку "Не показывать в меню". Нажимаем на вкладку "Настройки" и убираем галочки с "Доступен для поиска", "Использовать HTML-редактор". Незабываем сохранить ресурс.
8. Далее заходим в новосозданный ресурс и в поле "Содержимое ресурса" вписываем [[!SimpleSearch]] 9. Запоминаем id этого ресурса, это страница вывода результатов поискаВ шаблон где находится сама форма поиска вставляем следующий код:
[[!SimpleSearchForm? &landing=`1` &tpl=`search`]]
где landing - это ID страницы вывода результатов поиска, а чанк search отвечает за саму форму поиска, который мы сейчас создадим
10. Затем копируем следующий кодэто содержимое файла core/components/simplesearch/elements/chunks/searchform.chunk.tpl:
[[%sisea.search? &namespace=`sisea` &topic=`default`]]
в новый чанк с названием search и создаем тот шаблон отображения окна поиска, который нам необходим.
11. Далее решаем проблемы с кодировкойНаходим файл core/components/simplesearch/model/simplesearch/simplesearch.class.php в нем заменяем строку
$text = trim(preg_replace("/\s+/", " ", $this->sanitize($text)));
$text = trim(preg_replace("/\s+/u", " ", $this->sanitize($text)));
12. Затем заменяем строку $string = preg_replace("/" . $quoteValue . "/i", "$0", $string);$string = preg_replace("/" . $quoteValue . "/iu", "$0", $string);
13. А так же заменяем строку $text = preg_replace("/(\[\[\+.*?\]\])/i", "", $text);$text = preg_replace("/(\[\[\+.*?\]\])/iu", "", $text);
14. И последнее, надо закомментировать строчку if (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str)); Основные чанки SimpleSearchПоиск на сайте под управлением Modx Revolution готов. Он работает, можете убедиться в этом сами, но есть еще несколько моментов, которые пригодятся в работе с этим сниппетом. А именно редактирование чанков результатов поиска, его обертки, пагинации и так далее. Для начала Вам нужно понимать, что все чанки в формате.tpl находятся вот по этому пути: core/components/simplesearch/elements/chunks/. Ну а для того, чтобы с ними было легче работать выведем основные чанки в админку Modx. Вот их параметры
- containerTpl
- pageTpl
- currentPageTpl
Ну а называть сами чанки мы уже будем как хотим.
Параметр tpl - чанк SimpleSearchResultПараметр tpl отвечает за вывод каждого отдельного пункта результата поиска. Давайте создадим чанк и назовем его SimpleSearchResult . Скопируем в него код из файла core/components/simplesearch/elements/chunks/searchresult.chunk.tpl :
[[+idx]]. sanitize($text)));
$text = trim(preg_replace("/\s+/u", " ", $this->sanitize($text)));
12. Затем заменяем строку $string = preg_replace("/" . $quoteValue . "/i", "$0", $string);$string = preg_replace("/" . $quoteValue . "/iu", "$0", $string);
13. А так же заменяем строку $text = preg_replace("/(\[\[\+.*?\]\])/i", "", $text);$text = preg_replace("/(\[\[\+.*?\]\])/iu", "", $text);
14. И последнее, надо закомментировать строчку if (!empty($str)) $this->searchString = strip_tags($this->modx->sanitizeString($str)); Основные чанки SimpleSearchПоиск на сайте под управлением Modx Revolution готов. Он работает, можете убедиться в этом сами, но есть еще несколько моментов, которые пригодятся в работе с этим сниппетом. А именно редактирование чанков результатов поиска, его обертки, пагинации и так далее. Для начала Вам нужно понимать, что все чанки в формате.tpl находятся вот по этому пути: core/components/simplesearch/elements/chunks/. Ну а для того, чтобы с ними было легче работать выведем основные чанки в админку Modx. Вот их параметры
- containerTpl
- pageTpl
- currentPageTpl
Ну а называть сами чанки мы уже будем как хотим.
Параметр tpl - чанк SimpleSearchResultПараметр tpl отвечает за вывод каждого отдельного пункта результата поиска. Давайте создадим чанк и назовем его SimpleSearchResult . Скопируем в него код из файла core/components/simplesearch/elements/chunks/searchresult.chunk.tpl :
[[+idx]].
