В четвёртом уроке мы рассмотрим интеграцию очень непростого, но важного компонента - поисковой строки в шапку сайта!
Помимо поисковой строки в шапке у нас на сайте будет ещё несколько элементов поиска, однако пока мы не хотели бы забегать вперёд, поэтому вероятно вернёмся к ним в одном из следующих уроков.
Для начала создадим раздел сайта /search/ в котором будет находиться страница поиска. На странице index.php мы разместим самый обычный компонент страницы поиска bitrix:search.page с дефолтным шаблоном:
| <?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); ?><?$APPLICATION->IncludeComponent( "bitrix:search.page", "", Array( "USE_SUGGEST" => "Y", "AJAX_MODE" => "N", "RESTART" => "N", "NO_WORD_LOGIC" => "N", "USE_LANGUAGE_GUESS" => "Y", "CHECK_DATES" => "Y", "USE_TITLE_RANK" => "Y", "DEFAULT_SORT" => "rank", "FILTER_NAME" => "", "SHOW_WHERE" => "N", "SHOW_WHEN" => "N", "PAGE_RESULT_COUNT" => "50", "CACHE_TYPE" => "A", "CACHE_TIME" => "3600", "CACHE_NOTES" => "", "DISPLAY_TOP_PAGER" => "Y", "DISPLAY_BOTTOM_PAGER" => "Y", "PAGER_TITLE" => "Результаты поиска", "PAGER_SHOW_ALWAYS" => "Y", "PAGER_TEMPLATE" => "", "arrFILTER" => array(), "AJAX_OPTION_JUMP" => "N", "AJAX_OPTION_STYLE" => "Y", "AJAX_OPTION_HISTORY" => "N" ), false );?><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?> |
Как можно заметить он мало похож на красивую поисковую строку, расположенную в верхней части шаблона:
Мы ещё вернёмся к оформлению этого компонента, однако в настоящий момент страница /search/index.php с компонентом поиска нужна нам только для проверки работоспособности поиска.
Поисковая строка
Начнём интеграцию поисковой строки для шаблона с размещения на нашей тестовой рабочей странице (например 1.php) компонента bitrix:search.form с шаблоном suggest. Зададим так же путь к разделу поиска /search/, используя константу с адресом сайта:
| <?$APPLICATION->IncludeComponent("bitrix:search.form", "suggest", array(
"PAGE" => "#SITE_DIR#search/" ), false );?> |
Скопируем шаблон компонента в шаблон сайта под именем "top".
Обратим внимание, что внутри компонента вызывается другой компонента - search.suggest.input. В данном случае мы не будем пользоваться подобной структурой, поскольку нашей цели можно достичь более простым путём.
Заменим весь код внутри шаблона компонента на нашу поисковую форму из вёрстки и обратив на 3 ыделенных цветом элемента:
| <form id="search-form" action="search.php" method="GET" accept-charset="utf-8" class="navbar-form">
<input type="text" name="s" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"> <a href="#" onclick="document.getElementById('search-form').submit()"></a> </form> |
1) accept-charset="utf-8"
Мы удалим данный элемент. В случае, если разработка производится на проекте с отличной от UTF-8 кодировкой, наличие этого параметра приведёт к повреждению передаваемого поискового запроса.
2) name="s"
Если мы посмотрим на страницу поиска, которую мы создали, то она по умолчанию получает поисковый запрос из переменной "q", поэтому и для формы следует переменную переименовать.
Приведение к стандартны значениям может и покажется "не красивым", однако значительно упрощает жизнь при работе с родными компонентами системы.
3) action="search.php"
Очевидно, здесь передаётся адрес скрипта для которого предназначено действие с нашей формой.
В шаблоне формы поиска это поле нигде не фигурировало, поскольку поле для ввода поискового запроса задавалось отдельным компонентом.
Однако в параметрах компонента мы заполнили параметр "PAGE" => "#SITE_DIR#search/". Куда же он делся?
Очевидно, что он был передан компоненту, вызываемому в шаблоне. Что же делать? Посмотрим на ЛОГИКУ компонента формы поиска и узнаем как же этот параметр обрабатывается. Логика компонента находится в файле /bitrix/components/bitrix/search.form/component.php.
Ни в коем случае не удаляем и не вносим изменения в этот файл! Всё содержимое папки /bitrix/components/bitrix/ - системные компоненты, т.е. часть ядра. Они необходимы для корректной работы продукта и могут быть изменены автоматически при обновлении системы. Правка системных компонентов (или их шаблонов) считается дурным тоном и категорически запрещена. Шаблоны компонентов необходимо копировать в шаблоны сайтов (как мы уже делали в этом и предыдущем уроке), а сами компоненты при необходимости модификации (в крайнем случае) - выносить в собственное пространство имён. Мы коснёмся этого вопроса в будущем.
Обратим внимание в коде компонента на строку:
| $arResult["FORM_ACTION"] = htmlspecialcharsbx(str_replace("#SITE_DIR#", SITE_DIR, $arParams["PAGE"])); |
Мы видим, в этой строке происходит преобразование нашего параметра в адрес. Так же тперь мы знаем как вызвать его в шаблоне - $arResult["FORM_ACTION"].
В результате итоговый код шаблона поисковой строки будет выглядеть:
| <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<form id="search-form" action="<?=$arResult["FORM_ACTION"]?>" method="GET" class="navbar-form"> <input type="text" name="q" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"> <a href="#" onclick="document.getElementById('search-form').submit()"></a> </form> |
Обратим внимание, что сейчас наша поисковая форма может не всегда корректно срабатывать (например, на нажатие кнопки с пиктограммой лупы). Это вызвано тем, что на странице существует 2 формы с одинаковым id="search-form". Это является семантической ошибкой, которая устранится на всех страницах, где будет находиться лишь 1 форма - наш компонент.
Заменим форму в шаблоне на вызов компонента.
Материалы данного урока (демо данные и шаблон сайта) доступны в нашем репозитории на .
