Поиск по блогу с помощью SimpleSearch

Наступило время для новой части уроков по созданию интернет-магазина на MODx Revolution. Сейчас мы с вами рассмотрим, как реализовывать поиск по сайту средствами SimpleSearch. Некоторые спросят: “Как SimpleSearch? Ведь в анонсе у нас был mSearch2”. Объясняю, через SimpleSearch у нас будет работать поиск по блогу, а через mSearch2 поиск по каталогу и фильтр в категории товаров.

Что ж приступим? Для начала нам необходимо установить из официального репозитория компонент SimpleSearch (как это сделать я рассказывал здесь). После того как мы установили пакет, мы увидим, что в комплекте с SimpleSearch идет два сниппета:

• SimpleSearch – сниппет, отвечающий за вывод результатов поиска.
• SimpleSearchForm – сниппет, который выводит форму поиска на странице.

Для начала, нам нужно создать шаблон, а затем ресурс, на котором у нас будут выводиться результаты поиска.

Вызов simpleSearch:

[[!SimpleSearch?
	&ids=`2`
]]

ids – это список родителей через запятую, указывает где искать ресурсы (в моем случае, это 2 — блог)

И создаем ресурс:

У меня идентификатор ресурса, на котором будут выводиться результаты – 6 (запомним его). Теперь в нашем чанке blogSidebar нам нужно вывести форму поиска. Но для начала нужно создать чанк этой формы. Я соединил чанк по умолчанию с тем отображением, которое у нас на шаблоне – получилось следующее (blogSearchFormTpl):

<form role="search" class="search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
  <div class="form-group">
	<label class="sr-only" for="page-search">Type your search here</label>
	<input name="[[+searchIndex]]" id="[[+searchIndex]]" class="search-input form-control" type="search" placeholder="Поиск по блогу...">
	<input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" /> 
  </div>
  <button class="page-search-button" type="submit">
	<span class="fa fa-search">
	  <span class="sr-only">Search</span>
	</span>
  </button>
</form>

И прикрепляю скриншот:

Теперь вызовем сниппет simpleSearchForm в сайдбаре:

[[!SimpleSearchForm? 
	&landing=`6`
	&tpl=`blogSearchFormTpl`
]]

landing – это id страницы, где у нас будут выводиться результаты (там должен быть вызван сниппет simpleSearch)

tpl – это чанк вывода формы.

Теперь нам осталось проверить работу (например, вбить “Тестовая статья”, надеюсь, что еще не удалили):

Отображение немного выбивается из общей стилистики шаблона. Я надеюсь, вы владеете навыками верстки и легко поправите визуально данный блок.

Так вот реализуется поиск. Надеюсь, было не очень сложно) В видео к данному уроку мы еще приведем наш сайдбар в порядок (выведем последние посты и категории блога). Напоминаю, что помимо статей, код вы можете посмотреть на тестовом сайте.