FENOM'енальный курс. Часть 14. Поиск по сайту на mSearch2 на Fenom.

Приступим с вами к уже знакомой нам части разработки – реализации поиска по сайту, но в этот раз на основе компонента mSearch2. Почитать как мы это делали ранее на основе SimpleSearch вы можете в статье “Поиск по блогу с помощью SimpleSearch”.

Я нашел 3 места, где у нас должна выводиться форма поиска, за которую отвечает сниппет mSearchForm:

• В шапке сайта
• Блок меню в мобильной версии
• Страница поиска

Так как у нас нет в комплекте шаблона страницы поиска, предлагаю вам пока скопировать шаблон текстовой страницы. Начнем мы с вами с того, что создадим ресурс страницы поиска. Посмотрите, как это сделано у меня:

Я думаю, что мы пойдем с вами сверху вниз и сначала выведем форму в шапке сайта:

{$_modx->runSnippet('!mSearchForm', [
	'element' => 'msProducts',
	'tplForm' => '@FILE chunks/search_form_desktop.tpl',
	'pageId' => 68
])}
	

Параметр pageId – это идентификатор ресурса, на котором мы будем выводить результаты поиска. Чанк search_form_desktop.tpl:

<form action="{$pageId | url}" method="get" class="msearch2">
  <input type="text" name="{$queryVar}" placeholder="Поиск по сайту" value="{$.get.query}">
  <button type="submit">
	<i class="fa fa-search"></i>
  </button>
</form>
	

Вызов mSearchForm в блоке мобильного меню:

{$_modx->runSnippet('!mSearchForm', [
	'element' => 'msProducts',
	'tplForm' => '@FILE chunks/search_form_mobile.tpl',
	'pageId' => 68
])}
	

Чанк search_form_mobile.tpl:

<form action="{$pageId | url}" method="get" class="msearch2">
  <div class="input-group">
	<input type="text" class="form-control" name="{$queryVar}" placeholder="Поиск по сайту" value="{$.get.query}">
	<div class="input-group-append">
	  <button class="btn btn-default" type="submit">
		<i class="fa fa-search"></i>  
	  </button>
	</div>
  </div>
</form>
	

Вызов в шаблоне поиска по сайту:

{$_modx->runSnippet('!mSearchForm', [
	'tplForm' => '@FILE chunks/search_form_page.tpl',
])}
	

Чанк search_form_page.tpl:

<form action="{$pageId | url}" method="get" class="well msearch2" id="mse2_form">
  <div>
	<div class="input-group mb-3">
	  <input type="text" class="form-control" name="{$queryVar}" placeholder="Поиск по сайту" value="{$.get.query}" />
	  <div class="input-group-append">
		<button type="submit" class="btn btn-outline-secondary">
		  <i class="glyphicon glyphicon-search"></i> Найти
		</button>
	  </div>
	</div>	
  </div>
</form>
	

В данных чанках мы с вами использовали новую Fenom-конструкцию {$.get.query}, которая позволяет нам получать элементы массива GET. Аналогично можно получать элементы массивов REQUEST, POST, SESSION.

Отлично! Формы мы вывели. Теперь нам нужно вывести обработчик запроса. Поиск, я думаю, мы с вами будем производить только по товарам. Сниппет mSearch2 будет возвращать только id найденных ресурсов, а их мы будем передавать в сниппет msProducts. В итоге у нас получится примерно такой шаблон страницы поиска по сайту:

{extends 'file:templates/index.tpl'}
{block 'content'}
{include 'file:chunks/breadcrumbs.tpl'}
<section class="def-section content">
    <div class="container">
        <h1>{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</h1>
        {$_modx->runSnippet('!mSearchForm', [
            'tplForm' => '@FILE chunks/search_form_page.tpl',
        ])}
        {var $res = $_modx->runSnippet('!mSearch2', [
            'tpl' => '@FILE chunks/product_tpl.tpl',
            'parents' => 2,
            'returnIds' => 1,
            'where' => '{"template":11}'
        ])}
        {if $res}
        <div id="pdopage" class="products">
		  <div class="search-results row rows">
		      {$_modx->runSnippet('!pdoPage', [
		          'element' => 'msProducts',
		          'parents' => 0,
		          'resources' => $res,
		          'tpl' => '@FILE chunks/product_tpl.tpl',
		          'limit' => 9,
		          'ajaxMode' => 'button',
			      'ajaxTplMore' => '@INLINE <button class="btn btn-blue btn-block btn-more">Загрузить еще</button>',
		      ])}
		  </div>
		  <div class="pagination">
			{$_modx->getPlaceholder('page.nav')}
		  </div>
		</div>
		{/if}
    </div>
</section>
{/block}
	

Теперь можно проверить функциональность нашего поиска по сайту. Надеюсь, что у вас так же, как и у меня все получилось с первого раза.