Редактор виджета
Внешний вид и состав виджета настраиваются в личном кабинете — не параметрами init() на сайте и не через поддержку. Откройте проект и перейдите на вкладку «Виджет»: там задаются настройки сборки и правится код виджета, а по кнопке публикации новый бандл собирается и встаёт на прежний адрес скрипта автоматически.
Редактор доступен владельцу аккаунта и сотрудникам с ролью Суперадмин: витрина — их работа. Наблюдателю и Маркетологу вкладка «Виджет» не открывается. Сотрудники поддержки SearchForce помогают через имперсонацию (заходят под клиентом), не имея прямого доступа к чужим проектам.
Как устроено
Виджет каждого проекта собирается из его воркспейса — набора исходников: карточка товара, тема (дизайн-токены), скрипты. При публикации платформа компилирует воркспейс в один файл searchforce-widget.js (стили вшиты внутрь) и кладёт его как текущий артефакт проекта. Адрес скрипта на сайте не меняется — обновляется только содержимое; смена версии происходит по хешу содержимого.
Редактор (личный кабинет) Очередь сборки Сайт
───────────────────────── ────────────── ────
правки карточки/темы/скриптов ─▶ сборка бандла ─▶ searchforce-widget.js
настройки сборки (форма) (Node/Vite) (тот же адрес, новый хеш)
└── «Сохранить и опубликовать» ──┘Настройки сборки
Блок «Настройки сборки» — это форма (переключатели), а не код. Здесь выбирается, из чего собирать виджет:
- Полностраничный поиск и Автокомплит — включить/выключить каждый шаблон. В бандл попадают только включённые (виджет получается легче).
- Блоки полностраничного поиска — категории-ярлыки, интервалы цен, мобильный слой фильтров.
- Синхронизация состояния поиска с URL — запрос и фильтры отражаются в адресе страницы (удобно для «поделиться ссылкой» и кнопки «назад»).
Поведение поиска настраивается отдельно
Фасеты, сортировки, лимиты, саджесты, доступность товаров, правила ранжирования — это поисковый домен: он настраивается на страницах проекта «Настройки проекта», «Настройка выдачи» и «Мерчандайзинг» и меняется без пересборки виджета. Настройки сборки отвечают только за то, что и как показывает виджет.
Правила выдачи («Мерчандайзинг») переставляют первые 250 результатов запроса; товары глубже они не достают. Если правило не сработало — сузьте запрос-триггер или условие, чтобы нужные товары попадали в эти 250.
Привязка к странице
Здесь задаётся, как скрипт цепляется к сайту. Значения запекаются в бандл, чтобы на странице клиента не требовался JS:
- Подключать автоматически по разметке — при включённом флаге скрипт сам дожидается DOM и монтирует виджет. Выключить — если инициализируете вручную (см. «Установка → Ручной режим»).
- Селектор поля поиска и Селектор контейнера выдачи — CSS-селекторы вашей разметки. Если указать их под существующую вёрстку сайта, клиенту не нужно ни добавлять классы, ни писать код. Пусто — используются хуки по умолчанию (
.sf-search-trigger/#sf-fullpage-rootи[data-sf-autocomplete]/[data-sf-fullpage]). - URL страницы выдачи и Query-параметр — куда ведёт строка поиска по сабмиту и под каким параметром (по умолчанию
q). Их же можно переопределить на конкретном поле атрибутамиdata-sf-search-url/data-sf-query-param.
Помощь при пустой выдаче
Блок «Помощь при пустой выдаче» — что виджет покажет покупателю, когда товар не нашёлся: тумблер показа, свободный текст, список контактов и предпросмотр. Предпросмотр собирается из ещё не сохранённых текста и контактов и показывает рядом с каждой строкой ссылку, которая уедет на сайт.
Контакты
Контакты правятся во всплывающем окне — кнопка «Контакты» под тумблером показа блока. До шести контактов, у каждого: вид (телефон, почта, Telegram, WhatsApp, Viber, MAX, VK, Одноклассники, произвольная ссылка), значение и своя подпись (пусто — подставляется имя вида). Показываются они все: экран «ничего не найдено» — единственное место, где контакты выводятся, поэтому отбирать из списка нечего. Не нужен контакт — удалите его строку.
Окно кладёт список на страницу, а на сайт он уезжает по кнопке «Сохранить» внизу страницы — вместе с текстом блока.
Контакты выводятся строками «подпись: значение» — Телефон: +7 999 123-45-67, — а не кнопками: покупатель читает номер глазами (переписать, сверить с тем, что на сайте), и кнопка «Позвонить» скрывала бы его. Значение печатается ровно так, как вы его ввели; телефон при этом набирается в международной форме (8 999… → +7 999…), иначе звонок с зарубежной SIM не уходит.
Исключение — вид «Ссылка»: печатать https://example.com/help?utm=… покупателю нечего, поэтому строка становится одной ссылкой, а её текстом работает подпись («Написать в чат»). Подпись не обязательна: если её не задать, ссылкой напечатается сам адрес.
Что принимается в поле «Значение» — зависит от вида:
| Вид | Значение |
|---|---|
| Телефон | номер: +7 999 123-45-67, 8 (999) 123-45-67 |
| Почта | адрес: shop@example.com |
| Остальные (мессенджеры, соцсети, ссылка) | адрес страницы или чата: https://t.me/shop, можно без схемы — t.me/shop |
Хендлы (@shop) и номера для мессенджеров не принимаются: скопируйте адрес чата из адресной строки — так он точно откроется у покупателя.
Правки доезжают до сайта сразу после сохранения, пересобирать виджет не нужно.
Адрес принимается только по https: браузер блокирует смешанный контент, и ссылка по http:// на защищённой витрине молчала бы.
Значение, из которого ссылка не собирается, окно не закроет и объяснит, что не так: неработающая кнопка в блоке помощи хуже её отсутствия — покупатель уже один раз не нашёл товар.
Клики по контактам видны в аналитике проекта — по ним понятно, как часто покупатели пользуются этим способом и какие запросы к нему приводят.
Код виджета
Вкладки блока «Код виджета» — редактор с тремя файлами, компонентами карточки и подменами блоков:
| Файл | Что это |
|---|---|
card/ProductCard.vue | Разметка карточки товара: заголовок, цена и старая цена, бейдж скидки, картинки, размеры, свотчи. Получает сырой товар (hit) со всеми атрибутами индекса. Значения берите хелпером getAttr(hit, 'Ключ') под ключи вашего фида. |
theme/tokens.css | Тема: переопределение дизайн-токенов --sf-* и стили карточки. Хардкод-hex вне токенов не нужен — меняйте через переменные. |
scripts.ts | Скрипты тенанта: связь виджета с сайтом через шину событий (например, добавление в корзину сайта по событию из карточки). Выполняются один раз при загрузке. |
Файл widget.config.ts в редакторе не правится руками — он генерируется из формы «Настройки сборки». Так в сборку не попадает произвольный код: собирается только предсказуемый конфиг плюс ваши карточка/тема/скрипты.
Дополнительные компоненты карточки
Карточку не обязательно держать одним файлом. На вкладке «Компоненты карточки» можно добавить свои SFC-компоненты (например, галерею изображений, блок отзывов, таймер акции) — каждый становится файлом в каталоге card/. Импортируйте его в card/ProductCard.vue относительным путём и используйте в разметке:
vue
<script setup lang="ts">
import Gallery from './Gallery.vue'
// …
</script>
<template>
<Gallery :images="hit.images" />
</template>Имя файла — вида Gallery.vue (буквы, цифры, ., _, - и расширение .vue/.ts/.css). Компоненты собираются в бандл вместе с карточкой при публикации; удаление компонента из списка убирает его файл из воркспейса.
Подмены блоков
На вкладке «Блоки» можно заменить блок «Ничего не найдено» или витрину товаров в нём своим компонентом — например, рекомендациями Mindbox. Что можно подменить, что доступно компоненту и готовые примеры — в «Подменах блоков».
Публикация
- Внесите правки в настройки и/или код.
- Нажмите «Сохранить и опубликовать» — воркспейс сохраняется, а сборка ставится в очередь.
- В блоке «Публикация» статус меняется вживую:
| Статус | Значение |
|---|---|
| В очереди | Сборка поставлена, ждёт воркер. |
| Собирается | Идёт компиляция. |
| Опубликован | Готово — новый бандл встал на адрес скрипта; там же блок «Код для установки». |
| Ошибка | Сборка не прошла; текст ошибки — под статусом. Прежний артефакт остаётся на месте. |
Кнопка «Пересобрать» запускает сборку заново без изменений — полезно после исправления ошибки. Одновременно выполняется одна сборка на проект: повторное нажатие во время сборки не создаёт дубль.
После первой публикации в блоке «Публикация» появляется «Код для установки» — готовые строки для <head> (preconnect + тег скрипта) с кнопкой «Скопировать код». Это всё, что нужно вставить на сайт; подробности — в «Установке на сайт».
Обновление на сайте
Адрес скрипта постоянный, поэтому на стороне сайта менять ничего не нужно — после публикации браузеры подхватят новую версию (кэш сбрасывается по хешу содержимого). Ошибка сборки на боевой виджет не влияет: он продолжает отдавать последнюю успешную версию.
Интеграции
Отдельная вкладка проекта — «Интеграции»: здесь виджет подключается к вашей собственной аналитике, чтобы поиск был виден в её отчётах. Первая интеграция — Яндекс.Метрика: включите её, укажите номер счётчика, и виджет начнёт отправлять в него цели поиска и виртуальные просмотры поисковых страниц. Писать код на сайте не нужно.
Сохранение на этой вкладке тоже публикует виджет: код включённой интеграции запекается в бандл, поэтому проекты, которые её не используют, не платят за неё весом файла. Статус сборки показан на самой вкладке.
Настройки сборки и код виджета вкладка «Интеграции» не затрагивает — и наоборот, публикация из вкладки «Виджет» не сбрасывает интеграции.