Autocomplete и полностраничный поиск

Виджет состоит из двух независимых блоков. Каждый запускается своим вызовом .init(options) и возвращает управляющий объект { dispose() } для снятия виджета со страницы.

• SearchForceWidget.autocomplete.init(options) — выпадающие подсказки на поле поиска.
• SearchForceWidget.fullpage.init(options) — полностраничная выдача с фильтрами.

Базовая установка обоих блоков описана в «Установке на сайт»; ниже — полный справочник параметров.

Autocomplete

projectId и apiUrl вшиваются в бандл при сборке — на странице их можно не передавать. Если передать, они переопределят вшитые значения.

Параметр	Обяз.	Значение
input	✅	Элемент-триггер: DOM-элемент или CSS-селектор. Может быть <input>, <button> или ссылкой. Если селектор ничего не находит — .init() бросает ошибку.
projectId	—	Идентификатор проекта. Обычно вшит в бандл (см. выше).
apiUrl	—	Адрес API платформы — https://platform.searchforce.ru. Обычно вшит в бандл (см. выше).
searchUrl	—	URL страницы выдачи, куда вести по сабмиту. Если не задан, перехода не происходит — вместо него виджет бросает событие sf:search-submit (см. «События»), а ссылка «Показать все результаты» скрывается.
searchQueryParam	—	Имя query-параметра запроса. По умолчанию q. Должно совпадать с тем, что читает страница выдачи. Если выдачу рисует виджет SearchForce (fullpage), оставьте q — он читает именно ?q=; другое значение имеет смысл, только если переход по поиску вы обрабатываете сами через sf:search-submit.
indexName	—	Имя индекса InstantSearch. По умолчанию products; менять не нужно — фактический каталог определяется projectId.

История подсказок ограничена 5 последними запросами и блок категорий строится по фасету category_names — оба значения фиксированы и через init() не меняются.

Полностраничный поиск (fullpage)

Параметр	Обяз.	Значение
container	✅	Пустой контейнер под выдачу: DOM-элемент или CSS-селектор. Виджет заполняет его результатами, фильтрами и сортировкой. Если не находится — .init() бросает ошибку.
projectId	—	Идентификатор проекта. Обычно вшит в бандл (как у autocomplete).
apiUrl	—	Адрес API платформы. Обычно вшит в бандл.
indexName	—	Имя индекса InstantSearch. По умолчанию products; менять не нужно — каталог определяется projectId.
enableRouting	—	Синхронизировать состояние поиска (запрос, фильтры) с URL. По умолчанию true для первого экземпляра fullpage на странице и false для последующих.
routingNamespace	—	Префикс для состояния в URL. Нужен, когда на одной странице несколько экземпляров fullpage и роутинг отключён.
blocks	—	Точечное включение/выключение блоков шаблона (категории, интервалы цен, мобильный слой фильтров). Обычно задаётся в редакторе виджета, а не в init().

Повторная инициализация и SPA

.init() возвращает объект с методом dispose(), который снимает виджет и удаляет созданные им узлы DOM:

var handle = SearchForceWidget.fullpage.init({ /* … */ });
// позже:
handle.dispose();

Повторный вызов .init() на том же элементе безопасен — виджет сам снимает предыдущий экземпляр. Это удобно для AJAX-навигации и SPA: при подгрузке новой страницы можно заново вызывать .init(), не боясь дублей.

Ещё три хелпера глобала:

• SearchForceWidget.ready(callback) — вызывает callback, когда бандл загружен и DOM готов (замена самописного ожидания загрузки скрипта).
• SearchForceWidget.autoInit() — пере-сканирует разметку и подключает новые элементы по селекторам привязки; удобно после AJAX-навигации.
• SearchForceWidget.setScope(filters) — ограничивает выдачу так, как решил сайт (см. ниже).

Ограничение выдачи со стороны сайта

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

// поле в индексе → значение (или несколько значений)
SearchForceWidget.setScope({ region: 'MSC' });
SearchForceWidget.setScope({ region: ['MSC', 'SPB'] });   // любое из двух
SearchForceWidget.setScope(null);                          // снять ограничение

То же самое работает до загрузки бандла — через очередь готовности, как события:

window.SearchForceWidget = window.SearchForceWidget || [];
window.SearchForceWidget.push(['scope', { region: 'MSC' }]);

Правила:

• поле должно быть фильтруемым в настройках проекта (у поля или свойства включён «Фильтр»); показывать его покупателю при этом не обязательно;
• разные поля складываются по И, несколько значений одного поля — по ИЛИ;
• вызывайте при загрузке страницы и при каждой смене значения на сайте; новое ограничение действует со следующего запроса поиска — уже показанная выдача сама не перерисуется;
• на текстовые подсказки и популярные запросы ограничение не распространяется: они считаются по статистике проекта целиком.

Оформление под бренд

Внешний вид виджета настраивается в личном кабинете — в редакторе виджета: тема (дизайн-токены) и разметка карточки правятся там и запекаются в бандл вашего проекта при публикации. Отдельного runtime-параметра для оформления карточки больше нет.

Тему можно переопределить и со стороны сайта: стили виджета вшиты в JS и работают в light DOM через CSS-переменные (--sf-*). Задайте их на :root или на элементе-обёртке — виджет подхватит, а хостовое значение перекроет запечённое:

:root {
  --sf-color-primary: #c8102e;   /* акцентный цвет (кнопки, ссылки, активное) */
  --sf-color-text:    #1a1a1a;
  --sf-font-family:   inherit;   /* использовать шрифт сайта */
  --sf-radius-md:     8px;        /* скругления */
}

Доступны, среди прочих: --sf-color-primary, --sf-color-text, --sf-color-text-muted, --sf-color-surface, --sf-color-border, --sf-color-error, --sf-font-family, --sf-font-size-base, --sf-radius-sm/md, --sf-shadow-sm/md, а также z-index-токены (--sf-z-dropdown, --sf-z-sheet-overlay и др.) — на случай конфликтов наложения с элементами сайта.

Позиционирование выпадашки

Панель autocomplete позиционируется под полем через --sf-ac-offset-top — виджет проставляет это значение автоматически. Если у вас фиксированная или динамически меняющаяся шапка и панель заезжает под неё, значение можно задать вручную или пересчитывать при ресайзе — см. FAQ → «Панель заезжает под фиксированную шапку».

Оформление карточки товара

Разметка карточки — это файл card/ProductCard.vue в редакторе виджета. Карточка получает сырой товар (hit) со всеми атрибутами индекса и сама решает, что показать: заголовок, цену и старую цену, бейдж скидки, картинки, размеры, свотчи цветов. Какие атрибуты и как отображать — правится прямо в этом файле (значения берутся хелпером getAttr(hit, 'Ключ')), стили карточки — в теме (theme/tokens.css). После правок нажмите «Сохранить и опубликовать» — новый вид карточки соберётся в бандл автоматически.

Если карточки отображаются некорректно (чужой бейдж, не те картинки или атрибуты) — поправьте карточку в редакторе или обратитесь в поддержку.