Плавающий поиск в Битриксе

Битрикс - самодостаточная платформа с кучей крутых решений и, на наш взгляд (как разработчиков), с очень правильными требованиями в организации кода и формировании собственных компонентов. Но, как говорится, – «И на старуху, бывает порнуха». И нет-нет, да найдется компонент, который то хранит в себе часть активной логики, которая должна быть в шаблонах, то стили, то скрипты – все это раздражает и мешает жить.

Сегодня поговорим о компоненте поиска на сайте, а именно о том, что показывает нам красивые подсказки (bitrix:search.title). Думаю, многие обожглись на нем, пытаясь заставить его работать в плавающей панели и удивлялись тому, что поиск сваливался в левый верхний угол экрана. Причина такому поведению - то, что логика расчета и позиционирования расположена не в шаблоне, а в компоненте.

Поиск в плавающем блоке. Ошибка отображения

Ужас, правда?! Будем исправлять. Одно решение я уже писал в блогах разработчиков (Статья в битриксе), но оно оказалось с погрешностями в смысле скорости загрузки, и на медленном соединении не всегда быстро и красиво отрабатывало. Т.е. мы могли наблюдать ту же самую проблему, либо скаканье результата быстрого поиска.

Что ж, это плохо, и решение у нас по факту одно: собрать свое решение на основе Битрикса, а точнее - доработать то, что уже существует. Для начала перенесем компонент search.title в свое пространство имен. У нас это denisoft, соответственно путь следующий: /local/components/denisoft/search.title/. И не забываем, что теперь нам вызывать компонент следующим ключом: denisoft:search.title.

Сначала на 355 строке в скрипте меняем код:

this.RESULT = document.body.appendChild(document.createElement("DIV"));
на:
this.RESULT = this.CONTAINER.appendChild(document.createElement("DIV"));

Просто обратите внимание на то, что мы меняем целевого родителя для блока с результатом.

Отлично, теперь нам необходимо обнулить сумасшедшее позиционирование. Смотрим на строки 338-340 – они у нас отвечают за позиционирование результата быстрого поиска. Позиционирование реализуется относительно всего окна, поэтому эти строки нещадно удаляем.

А дальше дело стилей. Правите их под себя и получаете отличный кастомизированный компонент, который можно вставлять в плавающие блоки, и результат его выдачи будет зависеть от поля ввода, а не от всего документа.

Как результат, получаем следующее:

Поиск в плавающем блоке. Решение

Красиво и правильно. Если у вас не получилось, обращайтесь к нам за помощью.

Арт-Директор mit
Александр Павлов

Дата: 06.10.2017

Поделитесь статьей со своими друзьями в социальных сетях.


Назад к списку статей


Хочу такое же

*
*

с условием обработки моих персональных данных

* - Поля, обязательные для заполнения