Elbuz ставить свій віджет пошуку на місце рядка пошуку вашого сайту: досить вказати адресу сайту, CSS-селектор поля й вставити один код у шаблон — переробляти сайт не треба.
Коли це знадобиться:
- Сайт на будь-якій CMS — віджет підключається одним скриптом і від рушія сайту не залежить.
- На телефоні рядок пошуку схований під лупою — окремий селектор мобільної кнопки відкриває пошук.
- Перший клік у полі показує «Loading...» — «Швидке відкриття пошуку» вантажить віджет разом зі сторінкою.
- Кнопка «До кошика» у вікні пошуку має працювати — віджет викликає функцію JS вашого сайту.
З чого почати: заповніть адресу сайту й селектор у картці віджета й вставте код інтеграції.
Що вміє віджет пошуку
- Заміняє поле пошуку сайту — стає на його місце за CSS-селектором, на телефоні — за селектором кнопки пошуку.
- Відкривається без затримки — «Швидке відкриття пошуку» вантажить віджет разом зі сторінкою.
- Показує результати так, як вам потрібно — вбудоване чи повноекранне вікно, сітка чи список, пагінація, темна тема.
- Фільтрує — за ціною, брендом, наявністю й атрибутами.
- Веде покупця на ваш сайт — шаблони посилань на товар, категорію, кошик і функції JS для кнопок.
Де це і хто має доступ
- Меню
- Довідники → Категорії → плитка «Налаштування віджету - Розумний пошук»
- Право доступу
- вікно «Віджет розумного пошуку товарів» у «Правах груп»
- Підготувати
- доступ до шаблону вашого сайту, щоб вставити код у
<head>
1
Вкладки налаштувань2
Швидке відкриття пошуку3
Адреса сайту4
CSS-селектор заміни поля пошуку- Налаштування розбиті на вкладки; остання — перевірка видачі.
- Віджет вантажиться зі сторінкою, без очікування ознак живого відвідувача.
- Сайт, на якому працюватиме віджет.
- Місце сторінки, яке віджет замінить собою.
Як поставити віджет на сайт
Підключення — це два рядки налаштувань і один вставлений код.
- Адреса сайту — на якому працюватиме віджет.
- CSS-селектор для заміни поля пошуку — те місце сторінки, куди стане віджет. Зазвичай це
#searchабо клас рядка пошуку вашої теми. Окремо задається селектор кнопки пошуку на мобільній версії: там рядок часто ховається під значок лупи. - Код інтеграції — скопіюйте його з картки віджета й вставте у
<head>сайту. Це невеликий скрипт, який сам підвантажує актуальну версію віджета.
Для типових платформ у картці є поля «CMS сайту» й «Дизайн тема» — вони підказують віджету, як улаштована верстка. Побачити результат до вставки на бойовий сайт можна кнопкою «Відкрити демо сайт», а перевірити саму видачу — на вкладці «Перевірка пошуку».
Швидке відкриття пошуку
За замовчуванням віджет запускається не одразу, а після ознак живого відвідувача: руху миші, дотику, прокрутки. Боти, які просто завантажують сторінки, таких ознак не дають, і пошуковий сервіс на них не витрачається. Ціна цього — перший клік у полі пошуку іноді показує «Loading...», поки віджет дозавантажується.
Перемикач «Швидке відкриття пошуку» на вкладці «Налаштування» прибирає цю затримку: віджет завантажується разом зі сторінкою, а дії покупця, зроблені до кінця завантаження, — клік у полі, перші букви — не губляться й виконуються, щойно віджет готовий.
Натомість захист від ботів слабшає: відомих ботів віджет і далі впізнає за назвою браузера й не запускається, але бот, що видає себе за звичайний браузер, буде звертатися до сервісу, і запитів стане більше.
- За замовчуванням перемикач вимкнено.
- Після збереження картки сервер одразу починає відсіювати ботів за назвою браузера. Сам швидкий запуск вмикається в кожного відвідувача з наступного перегляду сторінки: перший раз віджет дізнається про налаштування й запускається звичайно. Після вимкнення перемикача так само ще один перегляд пройде у швидкому режимі.
- Після ввімкнення перевірте на iPhone, що клавіатура відкривається з першого дотику до поля пошуку.
Кнопка «Отримати інформацію з сайту» заповнює за вас блок відомостей про магазин: назву, адресу, телефон, пошту, час роботи, способи доставки й оплати, посилання на соцмережі. Ці дані віджет показує в підказках і використовує чат, тому заповнити їх варто одразу.
- Повторне натискання поверх ваших правок перезаписує тільки ті поля, для яких сайт повернув непорожнє значення; поле, якого на сайті не знайшлося, лишається таким, як ви його заповнили.
- Заповнюється лише вкладка поточної мови, і нічого не записується, доки ви не збережете картку, — тож невдалий результат можна просто не зберігати.
- Відповіді від сайту віджет чекає до 120 секунд; якщо сайт не відповів, з'явиться повідомлення про помилку, а поля не зміняться.
Як налаштувати вигляд вікна пошуку
Як показувати результати
- Результати під час набору — видача змінюється з кожною літерою, без очікування паузи. Від одного покупця одночасно йде не більше одного запиту, тож сервіс не перевантажується. Перевірка орфографії через AI й уточнювальні підказки запитуються лише після паузи в наборі.
- Автодоповнення — продовження запиту блідим текстом у рядку; клавіша Tab його приймає, стрілки перемикають підказки, Esc закриває вікно.
- Посилання на результати — кнопка «поділитися» копіює адресу, що відкриває той самий пошук з тими самими фільтрами.
- Вигляд вікна — вбудоване під рядком пошуку або повноекранне.
- Вигляд списку — сітка чи список, із можливістю дати покупцеві перемикати.
- Пагінація — класична, кнопка «Показати ще» або нескінченне прокручування.
- Темна тема — завжди світла, завжди темна або за налаштуваннями пристрою.
- Тексти — підказка в полі пошуку, текст у шапці й підвалі вікна, слова для імітації набору в рядку.
Що бачить покупець у вікні пошуку
- Вікно без запиту — історія пошуку покупця (5 останніх запитів), популярні запити, популярні категорії й популярні товари, згруповані за категоріями. Проміжний набір («Зар», «Заря») у популярні запити й історію не потрапляє.
- Підказки запитів і знайдені категорії з кількістю товарів.
- Сортування — за релевантністю, спочатку дешевші, спочатку дорожчі, новинки.
- Картка товару — фото, назва, характеристики, рейтинг і кількість відгуків, ціна, стара ціна, знижка у відсотках, наявність; за бажанням — артикул, MPN, штрихкод, гарантія, модель. Рамка картки може бути в колір товару з назви.
- «Докладніше» без переходу зі сторінки — характеристики, опис, інструкції, відео, файли, мітки «Новинка», «Популярний», «Найкраща ціна», доставка, оплата, гарантія, повернення, контакти магазину й месенджери, відгуки й форма відгуку. Можна натомість вести покупця одразу на сторінку товару.
- Порівняння, обране, кошик — кнопки на картці й панель зі списками у вікні пошуку.
- Каталог — дерево категорій магазину кнопкою «Каталог» у вікні пошуку.
- Голосовий пошук — розпізнавання мовлення браузером, 15 мов.
- Плашки над результатами — «Показуємо результати для …», коли запит виправлено; «Точного збігу немає — показуємо схожі товари»; «Знайдені товари зараз відсутні в наявності»; «Нічого не знайдено» з кнопкою «Скинути фільтри». Коли яка з'являється — у статті як пошук розуміє помилки.
- Телефон — окрема кнопка пошуку, фільтри у висувній панелі, кнопки порівняння, обраного й кошика внизу екрана.
Фільтри
Вмикаються окремо: за ціною, за брендом, за наявністю, за атрибутами. Є перемикач «Застосовувати фільтри за кнопкою» — без нього результат перебудовується від кожної галочки.
Як налаштувати посилання й кнопки кошика
Віджет живе на вашому сайті, тому має знати, куди вести покупця. Задаються шаблони посилань на товар, категорію, фото, сторінку пошуку, кошик, оформлення, порівняння, акції.
Кнопки дій — «Додати до кошика», «До списку бажань», «До порівняння», «Докладніше» — працюють через код JS вашого сайту: для кожної дії вказується функція, яку викликати. Без цього кнопки показуватимуться, але нічого не робитимуть.
Якщо товари приїхали із зовнішнього майданчика й посилання на них зберігається у зв'язках із зовнішніми джерелами, вкажіть код джерела та ID шаблону, а в шаблоні посилання використайте макрос {external_url}.
Сценарії
На телефоні рядок пошуку схований під значком лупи
Що зробити. Крім CSS-селектора поля пошуку, заповніть селектор кнопки пошуку на мобільній версії і збережіть картку.
Що вийде. На телефоні пошук відкривається цією кнопкою, фільтри — у висувній панелі, кнопки порівняння, обраного й кошика — внизу екрана.
Чого не буде. Без цього селектора на телефоні пошук не відкривається.
Перший клік у полі пошуку показує «Loading...»
Що зробити. Увімкніть «Швидке відкриття пошуку» на вкладці «Налаштування», збережіть картку й перевірте на iPhone, що клавіатура відкривається з першого дотику.
Що вийде. Віджет вантажиться разом зі сторінкою, а клік і перші букви, набрані до кінця завантаження, не губляться.
Чого не буде. Перший перегляд після збереження ще йде у звичайному режимі. Ботів, що видають себе за браузер, віджет не відсіює.
Покупець має класти товар у кошик просто з вікна пошуку
Що зробити. Задайте шаблони посилань на товар, кошик і оформлення, а для дії «Додати до кошика» вкажіть функцію JS вашого сайту.
Що вийде. Кнопка на картці товару у вікні пошуку викликає кошик вашого сайту.
Чого не буде. Без функції кнопка показується, але нічого не робить.
Що робити, коли віджет не працює як слід
| Що ви бачите | Чому так | Що зробити |
|---|---|---|
| Віджет не з'явився на сайті | код інтеграції не вставлений або вставлений не в <head> | перевірити вставку в шаблоні сайту |
| Віджет є, але став не на місце поля пошуку | у налаштуваннях неправильний CSS-селектор | вказати селектор саме того елемента, який замінюємо |
| На телефоні пошук не відкривається | не заданий селектор кнопки пошуку мобільної версії | заповнити окреме поле для мобільної версії |
| Кнопка «До кошика» нічого не робить | не вказана функція JS вашого сайту | заповнити код функції для цієї дії |
| Покупець потрапляє не на ту сторінку товару | неправильний шаблон посилання | перевірити шаблони посилань на товар і категорію |
Часті запитання
Як побачити віджет до вставки на бойовий сайт?
Кнопкою «Відкрити демо сайт» у картці віджета. Саму видачу перевіряють на вкладці «Перевірка пошуку» — детальніше в статті як налаштувати видачу.
Чи зникне код із сайту, якщо вимкнути розумний пошук?
Ні. Код у <head> — рядок шаблону вашого сайту, його прибираєте ви. Детальніше: що зникне, якщо вимкнути розумний пошук.
Що робить кнопка «Отримати інформацію з сайту»?
Заповнює відомості про магазин: назву, адресу, телефон, пошту, час роботи, доставку, оплату, соцмережі. Їх віджет показує в підказках і використовує чат. Нічого не записується, доки ви не збережете картку.
Як показувати результати на весь екран, а не під рядком пошуку?
Виберіть повноекранний вигляд вікна замість вбудованого під рядком пошуку. Детальніше: як показувати результати.
Як зробити, щоб результат не перебудовувався від кожної галочки фільтра?
Увімкніть «Застосовувати фільтри за кнопкою»: результат перебудується, коли покупець натисне кнопку.
Суміжні теми
- Якщо потрібна загальна картина — розумний пошук на сайті: що він уміє і з чого почати.
- Якщо віджет стоїть, а пошук нічого не знаходить, — як побудувати пошуковий індекс.
- Якщо пошук має показувати лише товари в наявності чи знати ваші синоніми — як налаштувати видачу.
- Якщо магазин на Elbuz CMS — модуль розумного пошуку замість віджета.