Поисковый виджет

Поисковый виджет — самый быстрый способ запустить поиск: подсказки, выдача с фильтрами, исправление опечаток, поиск по фото, история и аналитика уже встроены. Нужен только JS-код на сайте.

Установка

В личном кабинете откройте Виджет, укажите CSS-селектор поля поиска на вашем сайте (например, #search-input) и выберите режим: всплывающее окно, встроенная выдача или только подсказки.

Скопируйте код и вставьте его в <head> всех страниц:

<link rel="preconnect" href="https://api.searchbooster.net" crossorigin />
<link rel="preconnect" href="https://cdn2.searchbooster.net" crossorigin />
<script data-skip-moving="true">
  var sbRegionId = '';   // регион посетителя, как в фиде
  var sbUserId = '';     // ваш ID пользователя (необязательно)
  var sbSegmentId = '';  // сегмент (необязательно)
  var sbScript = document.createElement('script');
  sbScript.src = 'https://cdn2.searchbooster.net/scripts/widget/PROJECT_UUID/main.js';
  sbScript.setAttribute('data-sb-init-script', 1);
  sbScript.async = true;
  document.head.appendChild(sbScript);
</script>

Откройте сайт и начните вводить запрос — появятся подсказки.

data-skip-moving="true" нужен для 1С-Битрикс: без него Битрикс переносит скрипт в конец страницы.

Регион, пользователь, сегмент

Переменная	Зачем
`sbRegionId`	ID региона из фида — цены и наличие в выдаче. Задайте до загрузки скрипта. Подробнее — Регионы.
`sbUserId`	Ваш ID пользователя (например, ID из CRM для авторизованных). Если не задан, виджет создаёт свой и хранит в cookie `searchbooster_v2_user_id`.
`sbSegmentId`	Сегмент посетителя (опт/розница, VIP) — для правил мерчандайзинга.

События виджета

В настройках виджета можно задать JS-код на события — например, отправить цель в Яндекс Метрику:

Событие	Когда
`popup-open` / `popup-close`	Открыли / закрыли окно поиска
`completions`	Пришли подсказки
`search`	Выполнен поиск
`offer-click`	Клик по товару

// код события «Клик по товару» в настройках виджета
ym(XXXXXX, 'reachGoal', 'sb_offer_click', { id: payload.id });

Остальные события (например, item-click — любой клик, включая «В корзину») подключаются через sb.on в своём коде инициализации. Полный список опций, событий и методов JS API — в Настройках виджета.

Внешний вид

Цвета, шрифты, расположение блоков, количество товаров, язык интерфейса (15 языков, включая русский, английский, казахский и украинский) — в личном кабинете, раздел Виджет. Свои CSS-правила можно добавить там же: они встраиваются в код автоматически. Изменения публикуются на CDN и видны посетителям в течение минуты — код на сайте менять не нужно.

Виджет или API?

	Виджет	API
Время запуска	часы	дни
Вёрстка	наша, настраиваемая	полностью ваша
SEO-страницы результатов, SSR	—	✓
Мобильное приложение	—	✓
Аналитика	автоматически	нужно отправлять события

Часто комбинируют: виджет для подсказок, а страница результатов — своя, на API поиска. Пример — в рецепте Своя страница результатов.