Форма поиска в 1С-Битрикс
На прошлом этапе, мы определились какие компоненты у нас будут отвечать за ту или иную область шаблона. В данном посте мы рассмотрим как реализовать “поиск“.
Поиск
Как я указал на этапе “подбор компонентов для шаблона“, за поиск у нас будет отвечать компонент «bitrix:search.form».
Действуем по аналогии, как и с другими компонентами…
- Копируем шаблон flat компонента «bitrix:search.form» в папку с пользовательскими шаблонами компонентов, т.е. в www\bitrix\templates\имя_шаблона\components\bitrix\search.form. Шаблон flat я выбрал в качестве донора, потому что у него самая маленькая форма для ввода, это соответствует нашему поиску в шаблоне-прототипе. Переименуем наш шаблон в «my_flat» (вы можете назвать его как угодно, суть от этого не меняется)
- Находим html фрагмент, отвечающий за вывод формы поиска, в моем случае он такой:
12345<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>
- Заменяем его на вызов компонента с нашим шаблоном:
1234567<?$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».
Убрав все лишнее у меня получилось следующее:123456789<?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>Переменная $SITE_TEMPLATE_PATH содержит путь до директории шаблона.
Посмотрим результат в браузере:
Поиск работает, интеграцию компонента «bitrix:search.form» можно считать на этом законченной.
P.S. Мы упростили себе задачу и ссылку «Advanced Search» на форме поиска не использовали. Исходя из названия, она должна вести на страницу с дополнительными настройками поиска, но т.к. данный наворот в поиске используется довольно редко, мы его опустим и оставим надпись как элемент дизайна.
Вам будет интересно:
Буду признателен если вы поделитесь данным постом