Универсальный AJAX фильтр товаров для JoomShopping

_JSHOP_DESCRIPTION

Удобный фильтр товаров – неотъемлемый атрибут любого современного интернет-магазина. С его помощью пользователь может быстро подобрать интересующий его товар, используя понятные параметры и не особо разбираясь в структуре сайта. Особенно, если каталог магазина имеет большую и разветвленную структуру и большое количество товаров. Именно для упрощения подбора товаров в каталоге магазина предназначен данный модуль. С точки зрения администратора сайта модуль предоставляет большой набор параметров конфигурации и простоту в изменении внешнего вида, что позволит быстро адаптировать данный модуль для сайта с любым дизайном.

AJAX

Фильтр может работать как с обычными запросами при нажатии на кнопку Применить или Сбросить, так и с использованием AJAX. При выборе AJAX все запросы отправляются без перезагрузки страницы. Также динамически обновляются результаты фильтрации (список товаров). При этом можно выбрать параметры для немедленной отправки запроса после изменения какого-либо параметра фильтра, а не при нажатии на кнопку. Этот параметр будет работать как с обычным режимом отправки запросов, так и при использовании AJAX.

Внешний вид

При разработке модуля использовались: uikit, jQuery UI, jQuery Form. Это позволило сделать модуль с простым и удобным интерфейсом, а также с поддержкой адаптивности. В качестве элементов управления модуль использует только флажки и диапазон цифр. В фильтрах с диапазоном цифр (например, цена) может выводиться либо два поля ввода со значениями от и до, либо jQuery UI slider с выбором диапазона, либо оба элемента вместе. В остальных фильтрах флажки используют jQuery UI checkboxradio. Это позволяет весьма просто и быстро изменить внешний вид модуля под любой дизайн сайта. Кроме этого модуль имеет два режима отображения: вертикальный и горизонтальный. Для горизонтального расположения можно настроить количество столбцов, по которым будут распределяться параметры фильтрации.

Показ на страницах магазина

Наиболее часто показывать фильтр нужно именно на страницах магазина, которые являются частью JoomShopping. Но никто не запрещает опубликовать модуль на любых других страницах сайта, если это необходимо. Если же опубликовать модуль для пункта меню, к которому привязан магазин, то фильтр товаров будет показан на всех его страницах. Это не всегда удобно, поскольку не всегда нужно показывать фильтрацию в корзине, при оформлении заказа или на странице товара. С данным модулем фильтрации администратор сайта может настроить его показ на любых страницах магазина, исключив показ на страницах, где отображение фильтров не уместно. При этом в настройках есть все типы отображаемых в JoomShopping страниц.

Фильтры

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

Особенности работы

В большинстве случаев поведение фильтра товаров стандартно и интуитивно понятно. При нажатии на какой-либо параметр фильтрации или вводе численного промежутка, фильтр отобразит только те товары на странице, которые соответствуют введенным значениям. При выборке товаров между разными параметрами фильтрации используется логическое И, а для разных значений одного фильтра используется логическое ИЛИ. Например, в фильтре выбран один из производителей товаров, а его товары показаны на странице. Если выбрать еще одного производителя, то это дополнит результаты его товарами (Производитель 1 ИЛИ Производитель 2). Если же выбрать промежуток цен, то это сократит выборку товаров (Производитель 1 И Цена от ... до ....).

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

С текстовыми характеристиками не все также очевидно. В них можно вводить как какие-либо численные параметры (например, объем батареи мобильного телефона - 1100 мАч), так и текстовые значения (например, модель батареи мобильного телефона - BP-6M). При этом было бы удобно для текстовых характеристик в фильтре выбрать, как именно нужно выводить конкретную характеристику, а соответственно и как фильтровать товары по этой характеристике. Именно такая возможность была предусмотрена при настройке характеристик в данном AJAX фильтре товаров. Администратор сайта в настройках модуля может выбрать для каждой отдельной текстовой характеристики один из вариантов отображения (тип характеристики): флажок, один флажок или число от и до. Выбор повлияет не только на внешний вид характеристики в фильтре, но и на запрос для фильтрации товаров по данной характеристике. Например, при отображении характеристики как промежутка чисел и фильтрации по ней, в результаты выборки попадут только товары со значениями этой характеристики в указанных промежутках.