MODX Revo | SimpleSearch | BootStrap 4 > Настройка поиска на сайте

Для начала тебе %USER_NAME% понадобится скачать и установить приложения для modx SimpleSearch

Первоначальная настройка

Код для страницы с выводом результатов поиска

Создаём новый ресурс, где будут отображаться результаты поиска, в содержании будет код

[[!SimpleSearch?
	&pageTpl=`search_page`
	&currentPageTpl=`search_page_current`
	&containerTpl=`search_wrap`
	&pagingSeparator=``
	&tpl=`search_result`
]]

Код для вывода формы поиска

Размещаем в шаблоне где нужно поле поиска этот код

[[!SimpleSearchForm? &landing=`87` &tpl=`search_form`]]

* где меняем 87 на id ресурса с результатами поиска

Чанки с Bootsrap 4

search_form - Форма для поиска

<form class="input-group md-form form-sm form-2 pl-0" action="[[~[[+landing]]]]" method="[[+method]]">
		<input class="form-control my-0 py-1 red-border" type="text" aria-label="Search" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]">
		<input type="hidden" name="id" value="[[+landing]]" />
		<div class="input-group-append">
			<span class="input-group-text red lighten-3" id="basic-text1"><i class="fas fa-search text-grey" aria-hidden="true"></i></span>
		</div>
	</form>

search_page - Пагинация, ссылка на страницу

<li class="page-item">
	<a class="page-link" href="[[+link]]">[[+text]]</a>
</li>

search_page_current - Пагинация, текущая страница

<li class="page-item active">
	<a class="page-link" href="[[+link]]">[[+text]] 
		<span class="sr-only">(current)</span>
	</a>
</li>

search_wrap - Обёртка для результатов поиска, пагинация и форма поиска

<div class="row search_block">
	<div class="col-12">
		[[!SimpleSearchForm? &landing=`87` &tpl=`search_form`]]
	</div>

	<p class="col-12 my-2 _info">[[+resultInfo]]</p>
	 
	<div class="col-12 _result">
		[[+results]]
	</div>
	 
	<nav class="col-12 my-2" aria-label="Page navigation">
		<ul class="pagination">
			[[+paging]]
		</ul>
	</nav>
</div>

* где меняем 87 на id ресурса с результатами поиска

search_result - Один блок с результатом

<div class="card my-2 text-right">
	<div class="card-body">
		<h5 class="card-title text-left">№[[+idx]]: [[+pagetitle]]</h5>
		<p class="card-text text-left">[[+extract]]</p>
		<a class="btn btn-primary" href="[[+link:is=``:then=`[[~[[+id]]]]`:else=`[[+link]]`]]" title="[[+longtitle]]">Перейти</a>
	</div>
</div>