Перейти к основному содержимому

Как выбрать CSS-селектор для активации окна поиска

Для того чтобы умный поиск отображался, когда пользователь кликает на строку поиска вашего интернет-магазина, нам необходимо знать, какой именно элемент на вашей странице является элементом поиска. Это делается с помощью CSS-селектора.

Видеоинструкция по выбору CSS селектора для подключения умного поиска

Что такое CSS-селектор?​

CSS-селектор — это шаблон, который используется для выбора одного или нескольких HTML-элементов на веб-странице. Он как адрес, по которому браузер находит нужный элемент (например, текстовое поле, кнопку, абзац). Селекторы используются в CSS для применения стилей, но в нашем случае они нужны, чтобы наш программный код понял, какое поле ввода отслеживать.

Зачем нам нужен CSS-селектор вашего поискового поля?​

Наш скрипт должен "знать", когда пользователь решит воспользоваться поиском на вашем сайте. В этот момент мы должны показать ему окно умного поиска. Указывая CSS-селектор вашего поля ввода (или иконку) поиска, вы сообщаете нашему сервису, какой элемент инициирует показ поискового слоя.

Как найти правильный CSS-селектор для вашего поля поиска?​

Самый простой способ найти CSS-селектор вашего поля ввода поиска — использовать инструменты разработчика в браузере.

  1. Откройте ваш сайт в браузере (например, Chrome, Firefox, Edge).
  2. Найдите поле ввода поиска на вашей странице. Обычно это элемент для ввода текста поиска или иконка в виде лупы, которая открывает элемент ввода текста при клике на нее.
  3. Щелкните правой кнопкой мыши по найденному элементу.
  4. В контекстном меню выберите пункт "Просмотреть код", "Просмотреть код элемента", "Исследовать элемент" или аналогичный (название может отличаться в зависимости от браузера).
  5. Откроется панель инструментов разработчика, где будет выделен HTML-код элемента, по которому вы щелкнули.
  6. В этом выделенном HTML-коде найдите атрибуты id или class.
    • Вы увидите атрибут id="..." или class="...". Значение внутри кавычек – это имя ID или класса.
  7. Сформируйте CSS-селектор, используя найденное имя:
    • Если вы нашли атрибут id="имя_id", то соответствующий CSS-селектор будет #имя_id. Добавьте символ # перед именем ID. ID должен быть уникальным на странице, поэтому это часто самый надежный селектор.
    • Если вы нашли атрибут class="имя_класса", то соответствующий CSS-селектор будет .имя_класса. Добавьте символ . перед именем класса. У элемента может быть несколько классов, перечисленных через пробел (например, class="search-field js-input"); выберите то имя класса, которое наиболее точно описывает поисковое поле.
  8. Скопируйте или запишите полученный CSS-селектор (например, #search-input или .search-field).
  9. Вставьте скопированный селектор в соответствующее поле настроек вашего умного поиска в нашей системе управления.
подсказка

Если вам нужно указать несколько селекторов, то добавляйте их через запятую .selector1, .selector2, .selector3

Примеры CSS-селекторов​

  • .search-input (если у вашего поля есть class="search-input")
  • #search-box (если у вашего поля есть id="search-box")
подсказка
  • Выбирайте селектор, который максимально точно указывает именно на поле ввода поиска и не совпадает с другими элементами на странице, которые не являются поисковым полем.
  • Проверьте, что введенный вами селектор корректно идентифицирует поле ввода на всех страницах вашего сайта, где присутствует поиск (если поле находится в шапке и отображается везде).
  • Если ваша строка поиска появляется только после клика по иконке, селектор должен указывать именно на иконку, чтобы при клике на нее открылось окно Умного поиска.
  • Проверьте мобильную версию своего сайта. Возможно, на ней используется другой элемент поиска, поэтому его селектор тоже надо добавить в поле настроек селекторов в нашей системе.

После сохранения настроек с правильным CSS-селектором наш сервис сможет отслеживать активность в вашем поле поиска и активировать окно умного поиска для ваших посетителей.