При заходе в каталог товаров пользователь видит кнопку “Фильтры”, по нажатию которой открывается панель формирования фильтра, которая основана на данных из 1С об этих товарах. На панели пользователь видит блоки возможных значений каждого из свойств. Пользователь имеет возможность:
- скрыть или показать каждое свойство,
- быстро очистить все фильтры по определенному свойству, нажав на иконку рядом с названием свойства,
- произвести поиск необходимого значения свойства для фильтра в списке значений,
- отметить одно или несколько значений определенного свойства для дальнейшей фильтрации товаров по выбранным значениям.
Рядом с каждым свойством динамически показывается количество значений, выбранных пользователем. Если количество значений у определенного свойства очень большое, то блок ограничивается по высоте с включенным скроллингом внутри списка возможных значений выбранного свойства для удобства пользователя.
У пользователя есть возможность нажать кнопку “Очистить все”, для того чтобы снять все фильтры в текущей группе товаров, выбранной пользователем на панели в древовидном каталоге, который находится слева от списка товаров. По мере того как пользователь отмечает необходимые свойства для их фильтрации, интерфейс периодически делает запросы на сервер с целью расчета общего количества активных товаров, подходящих под выбранный пользователем фильтр. Таким образом, пользователь на кнопке “Показать” видит количество товаров, которые он получит в списке после того, как нажмет кнопку “Показать”.
По мере того, как пользователь на панели фильтрации идет по свойствам, система периодически делает запросы на сервер с целью вычисления количества возможных значений в каждом свойстве, в зависимости от выбранных текущих значений фильтра. Таким образом, интерфейс помогает пользователю сужать воронку фильтра, не допуская выбора им заведомо не сопоставимых значений свойств товаров, по которым невозможно найти товар. Например, при выборе пользователем определенной модели товара в фильтре, система среди всех возможных значений цвета товара выделяет и показывает возможные цвета только выбранной модели.
По нажатию кнопки “Показать” на панели фильтра показываются те значения свойств товаров, которые пользователь выбрал в фильтре. Каждое из значений представляет собой интерактивный блок, при клике по которому свойство удаляется из фильтрации. Товары фильтруются по следующему принципу: перечисленные значения внутри каждого свойства действуют по принципу “ИЛИ”, фильтрация товаров между свойствами действует по принципу “И”, то есть логическому перемножению.
В административной части сайта добавляется раздел “Свойства товаров”, при заходе на который пользователь видит таблицу “Свойства товаров”, которая заданы для товаров в системе. Таблица состоит из колонок:
- “Идентификатор свойства”;
- “Сортировка”. Данное поле определяет последовательность появления свойств товаров в фильтре списка товаров;
- Флажок “Активность”. Данный флажок определяет участие свойства в фильтрации товаров, а также отображение данного свойства на карточке товара;
- “Наименование”. Значение свойства, пришедшее из 1С. Значение этого поля может изменить администратор в 1С и последующим импортом товаров на сайт;
- “Краткое наименование”. Данное поле задается администратором при желании наличия другого названия свойства. Если данное поле задано, то на сайте всё, что касается имени свойства для любого товара или блока в фильтре, будет именоваться этим значением ;
- “В фильтре”. Флажок, при установке которого, система добавляет свойство товаров на панель фильтра. Таким образом, в системе определяются свойства товаров, которые отображаются в карточке товара и присутствуют в фильтре товаров;
- “В тегах”. Данный флажок, установленный для свойства, при импорте товаров из 1С автоматически прикрепляет к товару тег (метку) со значением, равным значению свойства товара. Например, если у товара свойство “Цвет” равно “аляска”, и свойство “Цвет” участвует в тегах, при импорте товара ему автоматически прикрепится метка “аляска”;
- “Цвет”. Данное поле необходимо для задания администратором цвета для данного свойства;
- “Тип свойства”. Приходит из 1С. Тип служит для правильной сортировки товаров по определенному свойству, когда система сравнивает, например, целые числа, а не строковое значение этих чисел;
Пользователь может кликнуть по наименованию свойства для перехода в форму редактирования данного свойства. Формы редактирования пользователь видит поля для изменения значений полей редактируемого свойства товара:
- “Имя кратко”;
- “Сортировка”;
- “Цвет”;
- “Свойства для тегов”;
- “Участвует в фильтрах”;
Пользователь в форме редактирование свойства может нажать одну из трёх кнопок:
- “Сохранить”. Сохранить значения полей и остаться в форме редактирования данного свойства;
- “Сохранить и закрыть”. Сохранить значения полей и перейти в список свойств товаров;
- “Отмена”. Вернуться в список свойств товаров без сохранения полей.