Перейти к содержимому


Фотография
* * * * * 2 Голосов

Доработка фильтра - AJAX подгрузка количества результатов и сортировка

ajax фильтр сортировка

Сообщений в теме: 19

#1 fiction13

fiction13

Отправлено 14 June 2016 - 09:38

*
Популярное сообщение!

Привет, читатель.

 

Сегодня мы поговорим о фильтре и немного его доработаем. Дорабатывать будем фильтр в части AJAX подгрузки количества результатов, как в лучших магазинах Лондона, а также немного доработаем сортировку (уберем чексбокс обратный порядок и добавим в селекс выбор по возрастанию и убыванию).

 

Сразу скриншот, чтобы Вы поняли, о чем идет речь.

 

1.jpg

 

В обоих случаях править будем хелпер модуля фильтра, расположенный по адресу: г. Москва /modules/mod_jbzoo_search/helper.php.

 

От слов к делу.

 

AJAX подгрузка количества результатов

 

За подгрузку количества результатов будет отвечать следующий кусок кода

JFactory::getDocument()->addScriptDeclaration("
            jQuery(document).ready(function($){
                $('.jbfilter input, .jbfilter select').on('change', function (event) {
                    var el = $(event.target);
                    flQuickResult(el);
                });

                $('.jbslider').on('change.JBZooSlider', function (event) {
                    var el = $(event.target);
                    flQuickResult(el);
                });

                function flQuickResult (el) {
                    $('.flQuickResult').remove();
                    $.get(window.location.href.split('?')[0] + '?' + $('.jbfilter').serialize() + '&tmpl=component', function(data) {
                        $('.flQuickResult').remove();
                        var count = $(data).find('p').first().text().replace( /^\D+/g, '');

                        if (count) {
                            var title = flNumToStr(count, ['товар', ' товара', 'товаров']);
                            var text = 'Найдено ' + count + ' ' + title;
                            var button = '<input type=\"submit\" name=\"send-form\" value=\"Показать\" class=\"jsSubmit uk-button\">';
                        } else {
                            var text = 'Ничего не найдено';
                            var button = '<input type=\"reset\" name=\"reset-form\" value=\"Сбросить\" class=\"jsReset uk-button\">';
                        }

                        elPosition = el.position();
                        topPosition = elPosition.top - 49 + el.height()/2;

                        el.parent().append('<div class=\"flQuickResult\" style=\"top: ' + topPosition + 'px;\"><p>' + text + '</p>' + button + '</div>');
                    });
                }

                function flNumToStr(number, titles) {  
                    cases = [2, 0, 1, 1, 1, 2];  
                    return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
                }
            });
        ");

Его мы добавляем в конец функции _loadAssets(). Знающие люди смогут добавить его куда угодно, например, выцепить отсюда скрипт и добавить в свой js файл.

 

Немного CSS. Для фильтра, расположенного в левом сайдбаре

.flQuickResult {
  position: absolute;
  left: 180px;
  width: 180px;
  background: #333333;
  text-align: center;
  padding: 14px 18px;
  z-index: 100;
}
.flQuickResult:before {
    border: 7px solid;
    border-color: transparent #333 transparent transparent;
    display: block;
    left: -14px;
}
.flQuickResult:after, .flQuickResult:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
}
.flQuickResult:after {
    left: -13px;
    border: 7px solid;
    border-color: transparent #333 transparent transparent;
}

И для фильтра, расположенного в правом сайдбаре

.flQuickResult {
  position: absolute;
  left: -210px;
  width: 180px;
  background: #333333;
  text-align: center;
  padding: 14px 18px;
  z-index: 100;
  box-sizing: border-box;

}
.flQuickResult:before {
    border: 7px solid;
    border-color: transparent transparent transparent #333;
    display: block;
    left: -14px;
}
.flQuickResult:after, .flQuickResult:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
}
.flQuickResult:after {
    left: -13px;
    border: 7px solid;
    border-color: transparent transparent transparent #333;
}

Стили можно (нужно) поправить под себя, Вы уже не маленькие ;-) Да и куда добавлять стили, объяснять не буду. Я в Вас верю!

 

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

 

Очень простая магия.

 

Сортировка

 

За доработку сортировки отвечает другой код, вот такой

$optionsSorting = array();
            foreach ($options as $key => $value) {
                $optionsSorting[$key.'____asc'] = $value.' по возр.';
                $optionsSorting[$key.'____desc'] = $value.' по убыв.';
            }

            JFactory::getDocument()->addScriptDeclaration("
                jQuery(document).ready(function($){
                    $('#jbfilter-id-order').hide();
                    $('input[name=\"order[reverse]\"]').parent().hide();

                    $('#flFilterSortingSelect').on('change', function () {
                        var select = $(this);
                        var selectValue = select.val();
                        var orderOptions = selectValue.split('____');
                        var ordering = orderOptions[0];
                        var reverse = orderOptions[1];

                        console.info(ordering);
                        console.info(reverse);

                        $('#jbfilter-id-order').val(ordering);
                        if (reverse == 'desc') {
                            $('input[name=\"order[reverse]\"]').attr('checked', true);
                        } else {
                            $('input[name=\"order[reverse]\"]').attr('checked', false);
                        }

                        return false;
                    });
                });
            ");

            $html[] = $this->_jbhtml->select($optionsSorting, 'order[flSorting]', array(), $values->get('flSorting'), 'flFilterSortingSelect', true);

Его вставляем в функции getOrderings() перед

            html[] = $this->_jbhtml->select($options, 'order[field]', array(), $values->get('field'), 'jbfilter-id-order', true);

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

 

Прикрепляю измененный файл хелпера, на всякий случай.

 

Прикрепленный файл  helper.zip   2.6К   341 Количество загрузок:

 

 

*************************************

 

Все это дело тестировалось на

Joomla 3+

JBZoo 2.2.7

 

Демо


  • 16

#2 13LTD

13LTD

Отправлено 14 June 2016 - 13:26

сюда бы еще и вывод самого результата ajax)

но и так очень здорово!


  • 3

#3 CB9TOIIIA

CB9TOIIIA

Отправлено 14 June 2016 - 17:47

Супер! Порой думаешь - вот бы совместить все рецепты :) там сортировку по цене - этот фильтр и т.п. :)


  • 2

#4 shiftDELET

shiftDELET

Отправлено 14 June 2016 - 18:10

хорошая штука! обязательно пригодится))


  • 1

#5 isay777

isay777

Отправлено 15 June 2016 - 07:22

Супер! Порой думаешь - вот бы совместить все рецепты :) там сортировку по цене - этот фильтр и т.п. :)

 

И В КОРОБКУ!!! 

Рецептов уже конечно много и очень клевых. 


  • 2
ХОСТИНГ для сайтов jbzoo (все попугаи)

#6 nikolia

nikolia

Отправлено 15 June 2016 - 10:16

Круть спасибо за работу!


  • 1

#7 nikolia

nikolia

Отправлено 15 June 2016 - 14:25

У меня почему-то не работает для группы Public результаты выводятся только когда на сайт заходишь как Super Users 

Если в настройках модуля разрешить Редактирование на сайте, то все работает!

Что это может быть? http://chita-rio.ru/flat


  • 0

#8 fiction13

fiction13

Отправлено 15 June 2016 - 15:41

У меня почему-то не работает

Работает, просто результатов не видно. А если добавить, например, к лэйблу position:relative, то результаты будут видны. 


  • 0

#9 nikolia

nikolia

Отправлено 15 June 2016 - 22:55

Чего-то я понять не могу, это получается не подхватывает стили?

Вот зашёл как админ на сайт

2016-06-16_065135.jpg

вот вышел

2016-06-16_065226.jpg

position:relative меняю, но отображается пустое место, прямо в самом фильтре!


  • 0

#10 nikolia

nikolia

Отправлено 16 June 2016 - 14:04

Всё стили поправил, нормально теперь! Спасибо Дмитрий!


  • 1





Темы с аналогичным тегами ajax, фильтр, сортировка

Click to return to top of page in style!