» Форма поиска в 1С-Битрикс

Форма поиска в 1С-Битрикс

На прошлом этапе, мы определились какие компоненты у нас будут отвечать за ту или иную область шаблона. В данном посте мы рассмотрим как реализовать “поиск“.

Поиск

Как я указал на этапе “подбор компонентов для шаблона“, за поиск у нас будет отвечать компонент «bitrix:search.form».

Действуем по аналогии, как и с другими компонентами…

Копируем шаблон flat компонента «bitrix:search.form» в папку с пользовательскими шаблонами компонентов, т.е. в www\bitrix\templates\имя_шаблона\components\bitrix\search.form. Шаблон flat я выбрал в качестве донора, потому что у него самая маленькая форма для ввода, это соответствует нашему поиску в шаблоне-прототипе. Переименуем наш шаблон в «my_flat» (вы можете назвать его как угодно, суть от этого не меняется)

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

<div class="top_search">
      <div class="search_text"><a href="http://www.free-css.com/">Advanced Search</a></div>
      <input type="text" class="search_input" name="search">
      <input type="image" src="images/search.gif" class="search_bt">
</div>

<div class="search_text"><a href="http://www.free-css.com/">Advanced Search</a></div>

</div>

Заменяем его на вызов компонента с нашим шаблоном:

<?$APPLICATION->IncludeComponent("bitrix:search.form", "my_flat", array(
	"PAGE" => "#SITE_DIR#search/index.php",   
                                                                                           bitrix:search.page
	"USE_SUGGEST" => "N"
	),
	false
);?>

<?$APPLICATION->IncludeComponent("bitrix:search.form", "my_flat", array(

"PAGE" => "#SITE_DIR#search/index.php",

bitrix:search.page

"USE_SUGGEST" => "N"

false

);?>

Отделяем картинки и стили формы поиска от шаблона сайта, в нашем случае это только пиктограмма лупы
и пару строк стилей.

Но т.к. в шаблоне «my_flat» файла стилей нет, то его придется создать – style.css. Скопируйте в него из www\bitrix\templates\test\template_styles.css все что относиться к форме поиска.

Перейдем к правке шаблона «www\bitrix\templates\test\components\bitrix\search.form\my_flat\template.php».
Убрав все лишнее у меня получилось следующее:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<form action="<?=$arResult["FORM_ACTION"]?>">
<div class="top_search">
<div class="search_text"><a href="http://www.free-css.com/">Advanced Search</a></div>
	<?if($arParams["USE_SUGGEST"] === "Y"):?><?else:?><input class="search_input" type="text" name="q" /><?endif;?><input class="search_bt" name="s" src="<?=SITE_TEMPLATE_PATH?>/images/search.gif" type="image"/>
</form>

</div>

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<div class="search_text"><a href="http://www.free-css.com/">Advanced Search</a></div>

<?if($arParams["USE_SUGGEST"] === "Y"):?><?else:?><input class="search_input" type="text" name="q" /><?endif;?><input class="search_bt" name="s" src="<?=SITE_TEMPLATE_PATH?>/images/search.gif" type="image"/>

</form>

</div>

Переменная $SITE_TEMPLATE_PATH содержит путь до директории шаблона.

Посмотрим результат в браузере:

Поиск работает, интеграцию компонента «bitrix:search.form» можно считать на этом законченной.

P.S. Мы упростили себе задачу и ссылку «Advanced Search» на форме поиска не использовали. Исходя из названия, она должна вести на страницу с дополнительными настройками поиска, но т.к. данный наворот в поиске используется довольно редко, мы его опустим и оставим надпись как элемент дизайна.