Поиск по сайту или блогу на чистом Fenom

Результаты поиска MODX Revo
В данном уроке реализуем поиск по сайту или просто блогу на MODX Revo при помощи PdoTools - на Fenom.

Реализация поиска на 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 (платный).

В следующем уроке настроим вывод предыдущей и следующей статьей.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий