Продолжаем улучшать наше магазин. Мы уже создали категории товаров, которые помогают находить нужное. Сегодня же добавим фильтрацию по свойствам товаров.
Так как товары в нашем магазине могут иметь произвольные свойства, то фильтрация должна давать возможность искать среди них. Но если просто выбрать все свойства товаров и создать по ним фильтры, то получится, что в категории «Книги» будет фильтр по типу грифеля, который получен из свойств карандаша. Конечно такой фильтр к книгам никакого отношения не имеет.
Фильтры должны соответствовать товарам в категории. То есть каждая категория должна иметь список классов товаров, по которым будут создаваться фильтры.
В обычных случаях объекты всегда зависят от описывающих их метаданных. В данном же случае именно объекты - категории, будут определять метаданные - классы товаров, по которым будут создаваться фильтры.
Приступаем к делу
Устанавливаем и запускаем веб-приложение «Книжный магазин», построенное на декларативном фреймворке Evado с открытым исходным кодом, который обеспечивает легковесность и производительность конечного результата.
Веб-приложение можно запустить как из Docker (в этом случае вся необходимая инфраструктура установится автоматически), так и в окружении Node.js и базы данных MongoDB.
Переходим в модуль «Студия» по адресу http://localhost:3000/studio для редактирования метаданных приложения. Добавляем в класс «Категория» атрибут «Классы для фильтра». Указываем тип JSON, потому что в нем будет храниться массив кодовых имен классов. Указываем тип представления атрибута - «Классы метаданных». Это представление обеспечивает ввод данных через список классов, а не кодовыми именами.
Экспортируем метаданные в папку metadata/app, и они автоматически будут подхвачены приложением.
Переходим в модуль «Офис» и добавляем в категории те классы товаров, по которым будут строиться фильтры.
Пользовательский интерфейс
Пользовательские интерфейсы могут быть реализованы под каждое приложение. Данные извлекаются с помощью AJAX запросов к API фреймворка.
В данном случае интерфейс сделан как отдельный модуль. На клиентской стороне используется Vue.js. Интерфейс доступен по адресу http://localhost:3000/front.
В интерфейсе уже присутствует строка поиска, через которую ищутся подходящие варианты по наименованиям товаров.
Добавляем Vue-компонент фильтра, который зависит от текущей категории и формирует условие для запроса списка товаров. Фильтр запрашивает с сервера данные классов, которые привязаны к текущей категории. На основе полученной информации отображаются элементы ввода. В данном случае - это селекторы значений дополнительных атрибутов товаров.
Заключение
Готовое веб-приложение магазина доступно в открытом хранилище исходного кода .
