Выбор диапазона цен в каталоге товаров (фильтр)

yunoshev

Moderator
1271
179 / 1

Выбор диапазона цен в каталоге товаров (фильтр)

« : 23.06.2013, 16:25:55 »

Всем добрый день!
Во время работы над очередным заказом возникло желание добавить визуализацию выбора диапазона цен для фильтрации товаров, т.е. сделать т.н. селектор цен (Price Range).
jQuery UI показался мне хоть и весьма функциональным, но громоздким для таких целей, даже с учетом компиляции исключительно виджета Slider.
Потому мой взгляд остановился на более простом решении: noUISlider
В нем я нашел все необходимые мне функции и опции:

указание граничных значений диапазона (range);
указание начальных значений (start);
шаг ползунка (step);
точность единиц (resolution);
считывание значений;
привязка инпутов (полей ввода).

Однако в нем не хватало одной важной функции -- выполнение пользовательской функции по окончании перемещения ползунка. Функция, вызываемая во время перемещения ползунка есть (slide), а по окончании действия нет. Данная функция очень полезна, когда нужно обновить значения фильтров и списка товаров после выбора цены с помощью ползунка.

Но разочарование было недолгим, т.к. я расширил исходный скрипт. Если кто-то решит воспользоваться этим плагином для jQuery, то вот вам решение.
Все описанное ниже верно для noUiSlider 3.2.1.

1) Открываем исходный файл jquery.nouislider.js. Переходим к строке №162 и добавляем после нее следующий код:

Код: js

						case 'stop':
							e = typeof b != "function";
							break;

Спойлер

[свернуть]

2) Переходим к строке №260 (нумерация после добавления кода сверху) и после нее добавляем одну строку кода

Код: js

call(settings.stop, slider);

Спойлер

[свернуть]

3) Теперь в коде вашего фильтра вы можете добавить выполнение нужных действий, которые произойдут после перемещения ползунка слайдера, например:

Спойлер

[свернуть]

Вот и все, дорогие мои!
"Удачной всем охоты!"

jquery.nouislider.zip (3.34 КБ - загружено 352 раз.)

Записан

С чего начать? | Новый каталог квартир посуточно | Каталог товаров Joomla! 2.5
За труд: R241481671015 / U341976031007 / Z117030684701

bnet

Осваиваюсь на форуме
42
2 / 0

Re: Выбор диапазона цен в каталоге товаров (фильтр)

« Ответ #1 : 26.08.2013, 22:44:04 »

изображений невидно

Записан

yunoshev

Moderator
1271
179 / 1

Re: Выбор диапазона цен в каталоге товаров (фильтр)

« Ответ #2 : 27.08.2013, 12:46:30 »

Цитата: bnet от 26.08.2013, 22:44:04

изображений невидно

Завтра перезалью.

Записан

С чего начать? | Новый каталог квартир посуточно | Каталог товаров Joomla! 2.5
За труд: R241481671015 / U341976031007 / Z117030684701

Каталог товаров yvCommodity Native для Joomla 1.5 бесплатно Автор yunoshev	Ответов: 6 Просмотров: 6469	25.09.2016, 10:49:35 от yunoshev
Обсуждение каталога товаров yvCommodity для Joomla 1.5.x Автор yunoshev	Ответов: 116 Просмотров: 49156	07.10.2015, 11:58:39 от passkal
Обсуждение каталога товаров yvCommodity для Joomla 2.5 Автор yunoshev	Ответов: 55 Просмотров: 27408	10.02.2014, 18:03:48 от yunoshev
Характеристика товара - выбор нескольких значений из списка Автор yunoshev	Ответов: 6 Просмотров: 6400	24.12.2013, 22:14:09 от yunoshev
Результат поиска Joomla с показом фото товаров Автор yunoshev	Ответов: 1 Просмотров: 16877	04.04.2013, 18:21:23 от yunoshev

Выбор диапазона цен в каталоге товаров (фильтр) - yvCommodity

Новости Joomla

👩‍💻 CMS Joomla победила в премии CMS Critics Awards - People's Choice Awards 2025.

👩‍💻 Плагин микроразметки Schema.org в в пункте меню Joomla.

‼️👩‍💻 Релиз безопасности Astroid 3.3.11 - шаблона-конструктора для Joomla.

yunoshev

Выбор диапазона цен в каталоге товаров (фильтр)

bnet

Re: Выбор диапазона цен в каталоге товаров (фильтр)

yunoshev

Re: Выбор диапазона цен в каталоге товаров (фильтр)

Похожие темы