Фильтрация и поиск товаров в каталоге

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

Общая информация

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

Подробнее о каждой из этих фукнций можно узнать ниже.

Строка поиска

Строка поиска отображается на всех экранах, кроме экрана корзины, чекаута, раздела "Мои данные" в личном кабинете, истории заказов и экрана "О нас".


Изображение статьи

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

Изображение статьи

Чтобы найти товар, нужно ввести с помощью нативных кнопок как минимум один символ, а затем нажать на "Ввод"(iOS)/"Ок"(Android). После этого закрывается клавиатура, осуществляется поиск по заданному значению, Пользователь попадает на PLP с результатами поиска,а в строке поиска отображается введенный запрос.

Изображение статьи

Поиск осуществляется как по полному, так и частичному совпадению.

Если результаты не найдены, то отображается текст "По вашему запросу ничего не найдено"/"Products not found".

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

Экран с категориями каталога Copy-icon

Подробнее об отображении главного экрана каталога можно узнать здесь.

Фильтры Copy-icon

Для перехода к фильтрам тапните на иконку "Фильтр" в правом верхнем углу экрана листинга каталога.

Изображение статьи

По нажатию на иконку отображается экран доступных фильтров:

  • Цена/Price
  • Только в наличии/Only in stock

Фильтры можно скрыть и раскрыть, тапнув на кнопки "-" и "+" рядом с их названием. По умолчанию фильтр "Цены" отображается в развернутом виде.

Изображение статьи

Чтобы применить фильтр, нажмите на кнопку “Применить фильтры”/“Apply filters”.

Изображение статьи

Если фильтр применен, то на листинге каталога иконка "Фильтр" будет отображаться с соответствующим индикатором.

Изображение статьи

Если результатов, удовлетворяющих заданным критериям, нет, то на экране отобразится текст "По вашему запросу ничего не найдено"/"Products not found".

Чтобы сбросить применение фильтров, нажмите на кнопку "Сбросить фильтры"/"Reset filters" на экране выбора фильтров.

Изображение статьи

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

Закрыть экран выбора фильтров можно по тапу на иконку "Крестик" в правом верхнем углу экрана.

Изображение статьи