Для поиска написан бекенд на elasticsearch и API к нему.

Если коротко - отправляем в API параметры поиска (фильтр, сортировку, пагинацию и пр), в ответ получаем два объекта - новое состояние фильтра и список найденных серверов. Ниже на примерах описана часть сценариев, касающихся вывода фильтра - какие действия производим, что в результате нужно отправить API, что оно возвращает и как это потом должно выглядеть на сайте.

Первое отображение

• пользователь заходит на страницу поиска: https://www.data-xata.com/search

  • отправляем запрос:

    curl -XPOST <https://api.data-xata.com/v2/search>

• в ответ API возвращает:

  • result - ok (или error в случае ошибки)
  • data.total - общее количество результатов в выборке
  • data.filters - по каким фильтрам искали
  • data.combos - данные для списка серверов
  • data.facets - данные для панели фильтров
  • settings - настройки пользователя (валюта и т.п. и пр. - описание ниже)

  

  Панель фильтров

  Панель фильтров заполняется так:

  1. в массиве facets API возвращает фильтры, по которым можно фильтровать список серверов

  2. Есть 4 типа отображения значений фильтра, все они показаны ниже на скриншотах:

     • список чекбоксов
     • диапазон значений
     • чекбоксы-плитки
     • input с полнотекстовым, регистро-независимым поиском по значениям

  3. Порядок и вид фильтров в панели - заранее задан в https://api.data-xata.com/v2/filters.json (сначала назначение, потом абонплата, за ней объем памяти и т.д.), наполнение значениями - приходит от API при каждом обновлении

  4. Какому фильтру какая переменная соответствует - также указано в https://api.data-xata.com/v2/filters.json

     

     Скриншот, после которого не должно остаться вопросов 😇

  Кликаем на фильтр

  1. Допустим пользователь выбирает Основные -> Назначение -> Игровой сервер
  2. Отправляем такой запрос к API:

  curl -XPOST <https://api.data-xata.com/v1/search> -d '
  {
      "filters": {
          "eq:COMBO:cCmbPurpose": ["Игровой сервер"]
      }
  }
  '
  

  • eq:COMBO:cCmbPurpose - операция + ‘:’ + имя фильтра
    • какому фильтру какая операция соответствует - описано в https://api.data-xata.com/v2/filters.json
  • "Игровой сервер” - значение
  3. В ответ получаем, как и раньше:
  • combos - отфильтрованный список серверов
  • facets - обновленные данные для панели фильтров
  4. Перерисовка фильтров немного изменится:

  

  панель фильтров после клика на один из фильтров

  Кликаем еще раз на фильтр того же типа

  1. Допустим дальше пользователь выбирает Основные -> Назначение -> Стримминг
  2. Отправляем такой запрос к API:

  curl -XPOST <https://api.data-xata.com/v1/search> -d '
  {
      "filters": {
          "eq:COMBO:cCmbPurpose": ["Игровой сервер", "Стримминг"]
      }
  }
  '
  

  3. Ответ получаем аналогичный предыдущему

  4. Перерисовываем панель и список серверов как описано выше

  кликаем на другой фильтр

  1. Допустим после этого пользователь еще выбирает Основные -> Объем памяти -> 256GB
  2. Отправляем такой запрос к API:

  curl -XPOST <https://api.data-xata.com/v1/search> -d '
  {
      "filters": {
          "eq:COMBO:cCmbPurpose": ["Игровой сервер", "Стримминг"],
          “eq:RAM:iSize": [256]
      }
  }
  '
  

  3. Ответ получаем аналогичный предыдущему

  4. Перерисовываем панель и список серверов как описано выше