Подготовка страницы к встроенному виджету

Встроенный виджет привязывается к полю поиска в шапке вашего сайта: подсказки выпадают прямо под полем, а выдача открывается под шапкой. Гибрид работает так же на десктопе, а на мобильных открывает поиск в окне поверх сайта — по нажатию на лупу. Чтобы всё встало красиво, на странице нужно несколько блоков: о них эта страница.

Если готовить вёрстку некогда, выберите режим «Окно поверх сайта»: ему нужен только селектор поля поиска или кнопки-лупы.

Десктоп · встроенный режим

4

2

1торшер

3

ЗапросыКатегории

Товары

5

Мобильные · гибрид

6

→

торшер

1. Поле поиска — настоящий <input> в шапке. Его селектор указывается в настройках виджета.
2. Якорь подсказок — обёртка поля (форма или блок поиска). Подсказки открываются под её нижним краем.
3. Подсказки рисует виджет: запросы, категории, бренды, товары. От сайта нужно только место под шапкой.
4. Якорь выдачи — шапка сайта целиком. Выдача начинается под ней и закрывает страницу до низа экрана.
5. Выдача с фильтрами и сортировкой — тоже виджет. Страница под ней не прокручивается, пока поиск открыт.
6. Кнопка-лупа на мобильных (гибрид): по нажатию виджет открывает окно поиска поверх сайта.

Какие блоки страницы использует встроенный и гибридный виджет. Номера совпадают с пунктами ниже.

Что нужно от страницы

1. Поле поиска — настоящий <input> ①

   Виджет работает с полем ввода: <input type="search"> или <input type="text">. Не подойдут div с contenteditable, поле внутри <iframe> или внутри shadow DOM.

   • У поля должен быть устойчивый id или класс: #search, .header-search__input. Классы, которые меняются при каждой сборке сайта (.css-1x2y3z, .sc-abc123), не годятся — после обновления сайта виджет не найдёт поле.
   • Если в шапке два поля (обычная и «липкая» шапка) — укажите оба через запятую: #search, #search-sticky.
   • Виджет сам ставит полю autocomplete="off", чтобы браузер не показывал свои подсказки поверх наших.

2. Блок-якорь для подсказок ②

   Обёртка поля: форма поиска или блок с полем и кнопкой «Найти». Подсказки открываются под нижним краем этого блока. Если отдельной обёртки нет, якорем будет само поле.

3. Место под шапкой для подсказок ③

   Подсказки — это выпадающий блок с запросами, категориями и товарами. В настройках поля выберите «Ширина и выравнивание»: «На всю ширину окна» (подходит почти всем), «По ширине якоря» или «От левого края якоря». Рекомендуем «На всю ширину окна»: в узком блоке товарам мало места.

4. Шапка сайта — якорь выдачи ④

   Выдача открывается под нижним краем этого блока и занимает экран до самого низа. Обычно это вся шапка: header или .header. Если шапка «липкая» (остаётся при прокрутке) — укажите именно её, тогда выдача не залезет под шапку.

5. Страница под выдачей ⑤

   Пока выдача открыта, страница под ней не прокручивается. Ничего готовить не нужно, но проверьте, что поверх выдачи не вылезают элементы сайта с очень большим z-index — чаты, баннер cookies, кнопка «Наверх». У выдачи и подсказок z-index: 99999.

6. Мобильная версия: поле или лупа ⑥

   • Если на мобильных поле поиска видно сразу — подойдёт и встроенный режим, укажите поле так же, как на десктопе.
   • Если поле спрятано за иконкой-лупой или в меню — выбирайте гибрид и укажите селектор кнопки-лупы для мобильных. По нажатию виджет откроет окно поиска поверх сайта.

Ваш поиск и наш: чтобы не было двух подсказок

По умолчанию виджет заменяет поле поиска его копией. У копии нет обработчиков вашего сайта, поэтому ваши старые подсказки и переход на страницу результатов по Enter перестают работать — их заменяет SearchBooster. Отдельно отключать старые подсказки не нужно.

Если поле нужно оставить как есть (например, на нём держится ваша аналитика), в коде подключения задаётся опция noClone: true — напишите в поддержку, мы включим. Тогда старые подсказки сайта нужно отключить самостоятельно — иначе под полем появятся два выпадающих списка.

Пример вёрстки

Хорошо

<header class="header">                       <!-- ④ якорь выдачи -->
  <a class="header__logo" href="/">…</a>
  <form class="header-search" action="/search"> <!-- ② якорь подсказок -->
    <input id="search" class="header-search__input"
           type="search" name="q" placeholder="Поиск по каталогу"> <!-- ① -->
    <button type="submit">Найти</button>
  </form>
  <button class="header__search-mobile" aria-label="Поиск">🔍</button> <!-- ⑥ -->
</header>

Настройки виджета для такой вёрстки:

Поле в личном кабинете	Значение
Поле 1 → Поле поиска, устройство «Только десктоп»	#search
Поле 1 → Подсказки → Якорь	.header-search
Поле 1 → Подсказки → Ширина и выравнивание	На всю ширину окна
Поле 1 → Выдача → Якорь	.header
Поле 2 → Поле поиска, устройство «Только мобильные» (гибрид)	.header__search-mobile

Плохо

<div class="css-1q2w3e">                       <!-- класс меняется при сборке -->
  <div contenteditable="true" class="search">  <!-- не input -->
  </div>
</div>
<iframe src="/search-box.html"></iframe>      <!-- поле внутри iframe виджет не видит -->

Как найти селекторы

1. Откройте сайт в Chrome или Яндекс Браузере, нажмите правой кнопкой по полю поиска → «Посмотреть код» (или «Исследовать элемент»).
2. В открывшейся панели подсвечен элемент <input …>. Если у него есть id="search" — селектор #search. Если только класс class="header-search__input" — селектор .header-search__input.
3. Чтобы найти якорь, поднимитесь по дереву элементов выше: форма или блок вокруг поля — якорь подсказок, <header> — якорь выдачи.
4. Проверьте селектор: во вкладке Console выполните document.querySelectorAll('#search').length — должно получиться 1 (или 2, если полей два).

Найти автоматически

В личном кабинете у полей селекторов есть кнопка «Найти автоматически»: вставьте адрес любой страницы сайта, и через 2–5 минут агент SearchBooster подберёт поле поиска, якоря и мобильную кнопку, а заодно цвета и шрифты сайта для темы виджета. Результат подставляется в форму — проверьте его в предпросмотре и сохраните.

Частые проблемы

Что видно	Причина	Что сделать
Виджет не открывается	Селектор поля не находит элемент или находит другой input	Проверьте селектор в консоли, см. «Как найти селекторы»
Под полем два списка подсказок	В коде подключения включён noClone, а подсказки сайта остались	Отключите старые подсказки сайта или напишите в поддержку — уберём noClone
Выдача залезает под шапку	Якорь выдачи — не вся шапка или шапка «липкая», а указан внутренний блок	Укажите внешний блок шапки (header)
Подсказки узкие, названия товаров обрезаны	Подсказки по ширине маленького поля	Выберите «На всю ширину окна»
Поверх выдачи висит чат или баннер	У элемента сайта z-index больше 99999	Уменьшите его z-index или скрывайте элемент, пока поиск открыт
На мобильных поиск не открывается	Поле на мобильных спрятано в меню	Включите гибрид и укажите селектор кнопки-лупы
После обновления сайта поиск пропал	Сменился класс поля (сгенерированные классы)	Используйте устойчивый id или атрибут: input[name="q"]

Проверка после установки

После публикации откройте в личном кабинете «Поисковый виджет» → «Проверить установку» и вставьте адрес страницы сайта:

• Быстрая проверка за несколько секунд смотрит HTML страницы: подключён ли код этого проекта и находятся ли селекторы из настроек.
• Полная проверка открывает сайт в браузере на десктопе и мобильном, кликает в поиск и проверяет, что виджет открылся. Занимает 2–5 минут. Нужна, если код подключён через Google Tag Manager или поле поиска рисуется скриптом.

Подробнее о коде установки и событиях — в разделе Поисковый виджет, о внешнем виде и опциях — в Настройках виджета.