Реализация поиска на MODX сайте при помощи Fenom
Код простейшей формы поиска будет выглядеть так:
<form action="/search/" method="get">
<input name="search" value="{$.get.search | escape}">
<button>Найти</button>
</form>
Стилизуем ее при помощи стилей bootstrap 5 (Button addons) и SVG иконки:
<form action="/search/" method="get">
<div class="input-group">
<input class="form-control" name="search" placeholder="поиск" value="{$.get.search | escape}">
<button class="btn btn-outline-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
</div>
</form>
и вставим ее в верхнюю часть сайтбара созданный на прошлом уроке, обернув в:
<div class="card mb-3">
<div class="card-body">
форма поиска
</div>
</div>
Симпатично получается? Особенно с учетом того что не строчки CSS не написали)
Создание страницы с результатами поиска
В категории «Служебные» быстро создаем ресурс с Заголовком «Результаты поиска», шаблон ставим «Статика», Псевдоним «search», ставим галки «Скрыть из меню», «Опубликован». Во вкладке «Настройки» убираем галки с пунктов «Использовать HTML-редактор», «Доступен для поиска» и сохраняем.
Открываем только, что созданный документ, идем во вкладку «Поисковая система» (эту вкладку добавляет пакет SEO Suite). Снимаем с индексации данную страницу, запрещаем переход по ссылкам с нее и фиксируем URL «search» см. скрин.
Здесь же на вкладке «Карта сайта» убедитесь что не стоит галка на против пункта «Включить эту страницу в карту сайта?».
Переключаемся во вкладку «Документ», в поле содержимого помещаем простенький вывод результатов поиска:
{set $category1 = '!pdoPage' | snippet : [
'parents' => 0 //тут нужная категория
'includeContent' => 1,
'tpl' => '@INLINE {$pagetitle}',
'where' => [
'pagetitle:LIKE' => '%'~ $.get.search | escape ~'%',
'OR:introtext:LIKE' => '%'~ $.get.search | escape ~'%',
'OR:content:LIKE' => '%'~ $.get.search | escape ~'%'
] | toJSON
]}
{if $category1?}
<div>Найдено:</div>
{$category1}
{/if}
И сохраняем документ. Можете проверить работу)
Стилизуем и модернизируем результаты поиска
Давайте стилизуем по нормальному результаты поиска: я обычно для наглядности, добавляю TV поле с изображением, в конечном итоге получается что-то типа такого вывода:
{set $category1 = '!pdoPage' | snippet : [
'parents' => 10,
'includeContent' => 1,
'includeTVs' => 'img',
'tvPrefix' => '',
'tpl' => '@FILE chunks/blog/searchresults.tpl',
'where' => [
'pagetitle:LIKE' => '%'~ $.get.search | escape ~'%',
'OR:introtext:LIKE' => '%'~ $.get.search | escape ~'%',
'OR:content:LIKE' => '%'~ $.get.search | escape ~'%',
'OR:img:LIKE' => '%'~ $.get.search | escape ~'%',
] | toJSON
]}
{if $category1?}
{$category1}
{/if}
Здесь в parents я указал id главной категории блога (для поиска по всему сайту ставим 0) и чанк searchresults.tpl
со следующим кодом:
<div class="row border-bottom mb-2">
<div class="col-3"><a href="{$uri}"><img class="img-fluid" src="{$img | pthumb : "w=255&h=100&zc=1&q=70"}" alt="{$pagetitle}"></a></div>
<div class="col-9">
<h6><a href="{$uri}">{$pagetitle}</a></h6>
{$content | truncate : 130 : ' ... '}
</div>
</div>
Внимание! Изображения обрезаются пакетом
pthumb
— установите его с основного репозитория, если не сделали этого по ходу уроков.
Проверка поиска
Пишем в форму какой-нибудь запрос (я ввел «долг») и и видим.
Больше подробностей по такой реализации можно найти на просторах modx.pro (взято за основу выше написанного кода).
Дополнительно: полнотекстовый поиск
Добавляем полнотекстовый индекс в таблицу:
ALTER TABLE `modx_customextra_items` ADD FULLTEXT(`name`);
После этого появляется возможность использовать MATCH:
{set $category1 = '!pdoPage' | snippet : [
'class' => 'customExtraItem',
'loadModels' => 'customextra',
'includeContent' => 1,
'tpl' => '@INLINE {$name}',
'where' => [
"MATCH(customExtraItem.name) AGAINST ('[[!#get.search]]')"
]'
]}
{if $category1?}
<div>Найдено:</div>
{$category1}
{/if}
Не испытывал, решение взято от сюда.
Если кого-то не устраивает как он ищет или еще что-нибудь, тогда альтернативы вам в помощь, пакеты: SimpleSearch или mSearch2 (платный).
В следующем уроке настроим вывод предыдущей и следующей статьей.