Как запустить внутренний поиск по сайту и не сломать вёрстку
Технические детали подключения поиска: куда ставить скрипт, что проверить в стилях, как не потерять мобильную версию и что делать с конфликтами.
Подключение поиска редко ломает сайт целиком. Ломает обычно мелочи: съехавшая шапка на телефоне, окно поиска под футером, чужие стили, перекрасившие кнопку. Ниже порядок действий, который эти мелочи закрывает заранее.
Два способа встроить поиск
Виджет поверх страницы. Одна строка скрипта, окно рисуется поверх содержимого. Вёрстку не трогает, ставится за десять минут, выглядит как отдельное окно.
Встроенная строка. Поиск живёт в шапке или на странице каталога как часть дизайна. Смотрится органичнее, но требует работы с вёрсткой и стилями.
Начинать почти всегда стоит с первого: он обратим. Если поиск не подошёл, вы просто убираете строку скрипта.
Куда ставить скрипт
- В общий шаблон всех страниц, а не на одну. Иначе поиск исчезнет там, где он нужнее всего.
- Перед закрывающим тегом body или с атрибутом отложенной загрузки, чтобы не задерживать отрисовку.
- Один раз. Дублирование скрипта на странице даёт две кнопки в одном углу.
На конструкторах для этого есть настройки проекта; на самописном сайте — базовый шаблон.
Что проверить в стилях
Три частых конфликта:
- Слои перекрытия. Если у шапки или у cookie-баннера высокий приоритет отображения, окно поиска окажется под ними. Лечится значением слоя у контейнера виджета.
- Глобальные правила для полей ввода. Общее правило вроде «все поля во всю ширину» перекраивает и поле поиска.
- Шрифты и цвета по наследству. Виджет наследует стили страницы, и фирменный цвет иногда превращается в серый.
Хороший виджет изолирует свои стили. Уточните это у вендора: вопрос экономит день отладки.
Мобильная версия
Проверять её надо отдельно, а не масштабированием окна браузера:
- кнопка не перекрывает корзину и кнопку звонка;
- окно открывается на весь экран, а не в четверти;
- клавиатура не прячет поле ввода;
- страница за окном не прокручивается вместе с ним.
Последний пункт — самая частая жалоба: человек листает результаты, а под ними уезжает сайт.
Порядок запуска
- Поставьте скрипт на тестовую копию сайта.
- Проверьте главную, каталог, карточку товара и корзину.
- Проверьте на телефоне вживую, а не в эмуляторе.
- Замерьте скорость загрузки до и после.
- Выкатите на боевой сайт в спокойное время суток.
- Первые два дня смотрите запросы: они сразу покажут, что клиенты ищут и чего не находят.
Что делать при конфликте
Если после подключения что-то поехало:
- уберите скрипт и убедитесь, что дело в нём;
- откройте консоль браузера и найдите ошибку;
- проверьте, не загружается ли скрипт дважды;
- сообщите вендору с адресом страницы и снимком экрана.
Практический пример запуска целиком — виджет на сайте за один день.
Вывод и следующий шаг
Поиск подключается одной строкой, а проблемы возникают в слоях, стилях полей и мобильной версии. Проверка на тестовой копии по четырём страницам закрывает почти все из них.
Следующий шаг: сделайте копию сайта, поставьте скрипт туда и пройдите четыре страницы с телефона в руках. На боевой сайт выкатывайте только после этого.
Частые вопросы
Замедлит ли скрипт поиска загрузку сайта?
При асинхронной загрузке — незначительно. Замерьте скорость до и после, это пятнадцать минут.
Нужен ли программист?
Для виджета — нет, достаточно доступа к шаблону или настройкам проекта. Для встроенной строки — обычно да.
Что делать, если окно открывается под шапкой?
Поднять слой отображения контейнера виджета. Это одна строка в стилях.
Можно ли поставить поиск только на страницу каталога?
Можно, но не стоит. Люди ищут с любой страницы, чаще всего с той, куда пришли из рекламы.
Как убрать поиск, если не подошёл?
Удалить строку скрипта. Поэтому виджет и предпочтительнее для пилота.
Влияет ли виджет на индексацию сайта?
Само окно поиска в индекс не идёт. Следите за другим: страницы результатов не должны попадать в карту сайта.