REES46

# Поиск

# Быстрый поиск

Быстрый поиск представляет собой выпадающее окно, которое изменяется по мере ввода текста в поле поиска.

Быстрый поиск

Подключение выполняется простым добавлением CSS класса rees46-instant-search к вашему существующему полю поиска:

<input class="rees46-instant-search" type="text">

Если на вашем поле поиска уже есть CSS-классы, просто добавьте новый к ним. Например, так:

<input class="my-class1 my-class2 rees46-instant-search" type="text">

Не забудьте отключить функциональность вашего старого поиска.

# Полный поиск

Полный поиск

Подключение выполняется простым добавлением элемента на вашей странице:


<div class="rees46-full-search-results" data-search-query="%QUERY%"></div>

Где %QUERY% - поисковый запрос.

Также можно подключить предустановленный блок фильтров результата поиска. Простой пример:


<div style="display: flex">
    <div class="rees46-filters"></div>
    <div class="rees46-full-search-results" data-search-filters-block=".rees46-filters" data-search-query="%QUERY%"></div>
</div>

В этом примере наглядно показано использование data-атрибутов.

Первый, data-search-filters-block, указывает на то, что фильтры должны быть отображены именно в этом блоке.

Атрибут data-search-query содержит запрос с которым будет работать поиск.

Запрос пользователя также может содержаться в data-input-query.

Чтобы указать блок сортировки, нужно использовать data-search-sort-block.

Обратите внимание

Атрибут data-search-sort-block должен находиться внутри блока фильтров: <div class="rees46-filters">.

Пример реализации блока сортировки:


<div class="rees46-filters">
    <div class="rees46-sort">Сортировать по:
        <select>
            <option value="popular" selected>популярности</option>
            <option value="price_desc">убыванию цены</option>
            <option value="price_asc">возрастанию цены</option>
            <option value="discount_desc">убыванию скидки</option>
            <option value="discount_asc">возрастанию скидки</option>
        </select>
    </div>
</div>
<div class='rees46-full-search-results' data-search-query="jacket" data-search-filters-block=".rees46-filters" data-search-sort-block=".rees46-sort select"></div>

Для отображения общего числа найденных товаров, следует использовать data-search-total-block.

Атрибут data-search-callback - это колбек с резульатами поиска, который может быть обработан кастомной функцией пользователя.

В значение атрибута нужно передать имя глобальной функции, которая будет вызвана после рендеринга результатов поиска.

Аналогично data-search-error - позволяет обработать ошибки.

Атрибуты, модифицирующие запрос к базе данных

Следующие атрибуты это фильтры, которые применяются путём модификации запроса к базе данных.

Соответственно, они должны использоваться в одном блоке с самим запросом в атрибуте: data-search-query.

  • data-search-limit - ограничивает количество возвращаемых результатов
  • data-search-page - страница выдачи, по умолчанию 1
  • data-search-offset - смещение выдачи на другую страницу. Если указано, то data-search-page игнорируется
  • data-search-available - фильтрация товаров в наличии, по умолчанию true. По умолчанию поиск будет возвращать только товары в наличии. Доступные значения: true, false
  • data-search-sort-by - сортировка результатов, по умолчанию popular. Доступные значения: popular, price, sales_rate, date, discount, rating
  • data-search-order - порядок сортировки, по умолчанию desc. Доступные значения: asc, desc. С помощью этого атрибута задаётся порядок сортировки по умолчанию
  • data-search-price-min - фильтрация по нижней границе цен. Товары с ценами ниже заданного значения не попадут в результаты поиска
  • data-search-price-max - фильтрация по верхней границе цен. Товары с ценами выше заданного значения не попадут в результаты поиска
  • data-search-categories - нужно задать список категорий через запятую. Поиск в базе данных будет ограничен укзанными категориями
  • data-search-brands - нужно задать список брендов через запятую. Поиск в базе данных будет ограничен укзанными брендами
  • data-search-locations - фильтр по географическому расположению
  • data-search-merchants - фильтр по продавцам. Товары продавцов, не переданных в атрибуте, не попадут в выдачу
  • data-search-brand-limit - ограничивает количество брендов в выдаче. По умолчанию возвращаются все
  • data-search-category-limit - ограничивает количество категорий в выдаче. По умолчанию возвращаются все

<div style="display: flex">
    <div class="rees46-filters"></div>
    <div class="rees46-full-search-results" data-search-filters-block=".rees46-filters" data-search-categories="Smartphones" data-search-brands="Apple" data-search-limit="10" data-search-query="%QUERY%"></div>
</div>

Доступные аттирибуты для элемента с блоком фильтров rees46-filters:

  • data-categories-title - заголовок для блока фильтров категорий
  • data-brands-title - заголовок для блока фильтров брендов
  • data-filters-title - заголовок для блока фильтров по параметрам

Для SPA сайтов

Каждый раз при переходе по страницам вашего сайта необходимо вызывать методы:

  • для полного поиска r46('full_search_init')
  • для быстрого поиска r46('search_init')

# Ограничения

По умолчанию лимит на поисковый запрос - 80 символов. Для кейсов, когда копируется название товара, поддерживается лимит - 200 символов. В этом случае поиск работает только в режиме точного совпадения наименования товара, поиск по части запроса отключается.

# Решение проблем

В случае некорректного отображения результатов поиска, воспользуйтесь этим документом для поиска проблем.

← Динамический фильтр-гайд для категории →