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

 

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

 

 

Поиск

 

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

 

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

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

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

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

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

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

     

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

 

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

 

templeate_magnifier

 

 

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

 

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




Буду признателен если вы поделитесь данным постом


Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены