Улучшить поиск на сайте можно двумя путями: переписать собственный или подключить внешний. Первый путь — проект с разработкой, второй — строка скрипта. Разбираем, что стоит за вторым вариантом и на что смотреть при подключении.
Что делает встраиваемый виджет
Скрипт подключается на страницы сайта и заменяет собой поисковую строку либо добавляет свою. Дальше он работает с индексом, построенным по вашему товарному фиду: принимает запрос, показывает подсказки, отдаёт результаты с фильтрами.
Вёрстка магазина при этом не трогается. Это важно для проектов на готовых движках, где правка шаблонов означает потерю обновлений.
<script src="https://api.cartflow.ru/search-widget.js"
data-key="sk_ваш_ключ" async></script>
Атрибут async здесь не косметика: без него загрузка скрипта блокирует отрисовку страницы, и вы ухудшаете скорость сайта ради поиска, которым воспользуется часть посетителей.
Что настраивается без кода
Разумный виджет выносит в кабинет то, ради чего иначе пришлось бы звать разработчика:
- цвета, шрифт и радиусы под дизайн сайта;
- позицию и вид кнопки или строки;
- поля, показываемые в результате: цена, наличие, артикул, картинка;
- порядок и состав фильтров;
- тексты — заглушку, сообщение при пустом результате, кнопку.
Если для смены цвета кнопки нужно править скрипт на сайте, это не настройка, а разработка в другой обёртке.
Безопасность: белый список доменов
Ключ доступа виден в исходном коде страницы — так устроен любой клиентский виджет. Значит, ключ сам по себе не может быть секретом.
Защищает не секретность ключа, а ограничение по источнику: запросы принимаются только с доменов, которые вы указали. Чужой сайт с вашим ключом получит отказ.
Проверить это стоит сразу после подключения: откройте страницу с виджетом на постороннем домене и убедитесь, что поиск не работает. Если работает — ваш ключ может использовать кто угодно.
Отдельные ключи на сервисы
Если у поставщика несколько виджетов — поиск, консультант, приём заявок, — ключи должны быть разными. Причина практическая: сервисы включаются и отключаются независимо, и один общий ключ не даёт этой возможности.
Что проверить после подключения
Скорость. Замерьте показатели страницы до и после. Асинхронный скрипт не должен менять время до первой отрисовки; если изменилось — разбирайтесь.
Мобильную версию. Поиск с телефона — обычно больше половины обращений. Строка должна открываться на весь экран, клавиатура не должна перекрывать первые результаты.
Клавиатуру. Стрелки вверх-вниз по подсказкам, Enter — переход, Escape — закрытие. Это ожидаемое поведение, его отсутствие замечают сразу.
Поведение без результата. Что видит покупатель, когда ничего не нашлось: пустой экран или альтернативы и предложение спросить менеджера.
Ссылки на товары. Виджет должен вести на карточки вашего сайта, а не на промежуточную страницу.
Когда виджет не подойдёт
Честно о границах:
- Нужна глубокая интеграция с корзиной — добавление в корзину прямо из выдачи с учётом вашей логики цен и скидок.
- Особая логика ранжирования, завязанная на данные, которых нет в фиде: маржинальность, склады, персональные цены.
- Собственный поиск уже работает хорошо и проблема в другом месте.
В первых двух случаях виджет годится как быстрый первый шаг, но рано или поздно упрётся в ограничения. Стоит понимать это заранее.
Коротко
- Виджет подключается строкой скрипта и не требует правки шаблонов магазина.
- Скрипт обязан быть асинхронным, иначе вы ухудшаете скорость сайта.
- Ключ виден в коде страницы — защищает белый список доменов, а не секретность ключа.
- Проверять нужно скорость, мобильную версию, работу с клавиатуры и поведение при пустом результате.
- Для глубокой интеграции с корзиной и собственной логикой цен виджет — временное решение.