Пробуем и тестируем

Рецепты на все случаи жизни

Произвольная сортировка с фронта ZOO JBZoo (Хак)

Разберемся как сделать произвольную быструю сортировку для каталога. Примерно такую как на картинках. (Стили и вывод можно настроить самому). 

Прежде всего определяемся какие сортировки будут нужны

в нашем случае:

по возрастанию цены
по убыванию цены
по популярности
по дате добавления (сначала новые)
по дате добавления (сначала старые)
 
Первым делом будем править файлы в темплейте JBZoo (В моем случае это темплейт по умолчанию Default (Catalog))
 
media\zoo\applications\jbuniversal\templates\catalog\category.php - для вывода сортировки каталога
media\zoo\applications\jbuniversal\templates\catalog\filter.php - для вывода сортировки результатов поиска
 
media\zoo\applications\jbuniversal\templates\catalog\category.php 
 
В место, где надо вывести сортировку вставляем блок:
//Шаблон для сортировок в каталоге ======================================================================
if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся
 
// Получаем URL где находимся
 
$myuri = JFactory::getURI();
$myurl = $myuri->toString(array('path', '', 'fragment'));
 
$currentorder = $_SESSION['orderkit'];
if (!$currentorder) {$currentorder = 'price_asc';} //устанавливаем значение сортировки по умолчанию.
 
//Вывод сортировки
?>
    
    

У меня это 55 строчка. 

Сразу же после строк:

    // category items render
    if ($this->params->get('config.items_show', 1) && count($this->items)) {

Далее правим media\zoo\applications\jbuniversal\templates\catalog\filter.php

В место где необходимо вывести сортировку вставляем этот блок:

  //Шаблон для сортировок в фильтре ======================================================================
 
        if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся
 
        // Получаем URL где находимся
        $myuri = JFactory::getURI();
        $myurl = $myuri->toString(array('path', 'query', 'fragment'));
        
        $currentorder = $_SESSION['orderkit'];
        if (!$currentorder) {$currentorder = 'price_asc';} //устанавливаем значение сортировки по умолчанию.
        
        //Вывод сортировки      
        ?>
    
    

У меня по условиям дизайна блок выводится над заголовком (24 строка).

заголовок:

?>

Эти блоки отличаются друг от друга. Они не взаимозаменяемые. Основное отличие в формировании ссылок и изначального адреса ссылки.

В первом случае ?orderkit=price_asc для категории и &orderkit=price_asc для поиска. 

Данные правки позволят вывести необходимые наборы сортировок в нужных нам местах с уникальными значениями ссылок.

    

Данные блоки надо редактировать под себя перечисляя в них свои сортировки. Я делал через ul li список. Вы форматируйте как вам угодно.

Так выглядит строка:

  • >c начала дешевые
  • Я выделил цветом ключевые переменные. В данном случае price_asc

    Эта переменная будет передана в адресе при клике на соответствующий пункт сортировки c начала дешевые

    Вы создаете любой набор сортировок со своими переменными. У меня:

    по возрастанию цены - price_asc
    по убыванию цены - price_desc
    по популярности - popular_desc
    по дате добавления (сначала новые) - date_desc
    по дате добавления (сначала старые) - date_asc

    Стили внешнего вида пока не настраиваем. Для начала запустим, чтобы все это дело заработало.

    Переходим к правке файлов отвечающих за сортировку. Это:

    components\com_zoo\controllers\default.php - отвечает за сортировку категории

    media\zoo\applications\jbuniversal\framework\controllers\search.php - сортировка результатов поиска

    components\com_zoo\controllers\default.php открываем данный файл.

    ищем строку:

    $this->item_order = $params->get('config.item_order');

    У меня это оказалась 228 строка. После нее вставляем следующий код:

              //Блок сортировок для каталога---------------------------------------------
                    if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся
                    //jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
                    //echo '
    ';print_r ($this->item_order);echo '
    '; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки //print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки if ($_SESSION['orderkit'] == "") {$_SESSION['orderkit'] = 'price_asc';} //устанавливаем значение сортировки по умолчанию. //Получаем переменную для направления сортировки if (isset($_GET['orderkit'])) { $_SESSION['orderkit'] = $_GET['orderkit'];} //Меняем сортировку, если есть ключ в URL if (isset($_SESSION['orderkit'])) { switch ($_SESSION['orderkit']) { case 'price_asc': $this->item_order = array( '_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value', '_jbzoo_0_mode_n', '_jbzoo_0_order_asc' ); break; case 'price_desc': $this->item_order = array( '_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value', '_jbzoo_0_mode_n', '_jbzoo_0_order_desc' ); break; case 'popular_desc': $this->item_order = array( '_jbzoo_0_field_corehits', '_jbzoo_0_mode_n', '_jbzoo_0_order_desc' ); break; case 'date_asc': $this->item_order = array( '_jbzoo_0_field_corecreated', '_jbzoo_0_mode_d', '_jbzoo_0_order_asc' ); break; case 'date_desc': $this->item_order = array( '_jbzoo_0_field_corecreated', '_jbzoo_0_mode_d', '_jbzoo_0_order_desc' ); break; } } } //jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump //echo '
    ';print_r ($this->item_order);echo '
    '; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки //Блок сортировок для каталога---------------------------------------------

    Здесь видим следующие блоки:

    case 'price_asc':
            $this->item_order = array(
            '_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value',
            '_jbzoo_0_mode_n',
            '_jbzoo_0_order_asc'
            );      
    break;

    Именно они отвечают за обработку созданных нами переменных в шаблонах. Разберу по частям что за что отвечает.

    case 'price_asc': - Определяет какую переменную будет обрабатывать данный блок. В нашем случае price_asc то есть по возрастанию цены

    Следовательно нам нвдо заставить каталог сортироваться по нужному элементу цены в нужном порядке. Как его найти?

    Для этого в блоке я сделал несколько строчек. Они по умолчанию закомментированы.

    //jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
    //echo '
    ';print_r ($this->item_order);echo '
    '; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки //print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки

    Будем считать, что JBdump нам не доступен. Раскомментируем вторую строку убрав // перед ней 

    //jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
    echo '
    ';print_r ($this->item_order);echo '
    '; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки //print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки

    сохраняем все это дело

    Идем в административную панель и в настройках каталога выбираем элемент соответствующий нужной нм сортировке.

    Если в данном случае идет речь о цене по возрастанию то  ищем нужный нам элемент цены выбираем сортировку по умолчанию по нему. 

    Сохраняем. Обновляем страницу каталога и получаем нечто такое:

     

    Это сортировка выбранная нами в админке. Мы видим ID элемента, тип сортировки и ее направление:

    [0] => _jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value
    [1] => _jbzoo_0_mode_n
    [2] => _jbzoo_0_order_asc

    переносим значения сортировкив наш блок

    case 'price_asc':
        $this->item_order = array(
            '_jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value',
            '_jbzoo_0_mode_n',
            '_jbzoo_0_order_asc'
    );
    break;

    Таким образом создаем все блоки обработки наших сортировок. 

    То есть столько блоков сколько мы создали в шаблонах столько делаем в данном месте и настраиваем их изменяя сортировки в админке для каталога для вывода необходимых нам данных для блоков.

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

    После настройки фильтра в категориях каталога комментируем снова строчку для вывода переменных сортировок и переходим к настройке фильтра для результатов поиска.

    Открываем файл media\zoo\applications\jbuniversal\framework\controllers\search.php

    находим строку:

    $appId    = $this->_jbrequest->get('app_id');

    и после нее вставляем следующий блок:

              //Блок сортировок для фильтра---------------------------------------------
                    //jbdump ($order,0); //Используйте эту строку, если у вас подключен JBdump
                    //echo '
    ';print_r ($order);echo '
    '; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки //print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся if ($_SESSION['orderkit'] == "") {$_SESSION['orderkit'] = 'price_asc';} //устанавливаем значение сортировки по умолчанию. //Получаем переменную для направления сортировки if (isset($_GET['orderkit'])) { $_SESSION['orderkit'] = $_GET['orderkit'];} //Меняем сортировку, если есть ключ в URL if (isset($_SESSION['orderkit'])) { switch ($_SESSION['orderkit']) { case 'price_asc': $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value'; $order[mode] = 'n'; $order[order] = 'asc'; break; case 'price_desc': $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value'; $order[mode] = 'n'; $order[order] = 'desc'; break; case 'popular_desc': $order[field] = '_jbzoo_0_field_corehits'; $order[mode] = 'n'; $order[order] = 'desc'; break; case 'date_asc': $order[field] = 'corecreated'; $order[mode] = 'd'; $order[order] = 'asc'; break; case 'date_desc': $order[field] = 'corecreated'; $order[mode] = 'd'; $order[order] = 'desc'; break; } } }

     Здесь блоки обработки сортировок выглядят иначе:

    case 'price_asc':
         $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value'; 
         $order[mode] = 'n'; 
         $order[order] = 'asc'; 
    break;

    если сравнить их с уже настроенными блоками то мы увидим, что разница не так и велика.

    для каталога:
    case 'price_asc':
        $this->item_order = array(
            '_jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value',
            '_jbzoo_0_mode_n',
            '_jbzoo_0_order_asc'
    );
    break;

    Для поиска

    case 'price_asc':
            $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value';
            $order[mode] = 'n';
            $order[order] = 'asc';
    break;

    То есть здесь просто иначе формируется массив и обрезаны префиксы для элементов.

    Можно изменить уже готовые блоки.

    После этого можно настроить стили для фильтра. На картинках стили представлены ниже:

    .orderblock {
        border-top: 1px solid #c7c7c7;
        float: left;
        width: 100%;
        padding: 10px 0;
            text-align:right;
    }
    .orderblock .searchsel {
        display: inline-block;
        float: right;
        margin: 0;
        padding: 5px 15px;
        border: 1px solid #c7c7c7;
        height: 35px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
            text-align:left;
            background: url("../images/drop.png") no-repeat right;  
            width: 200px;
    }
    .orderblock .searchsel:hover {
        overflow: visible;
            border-radius:20px 20px 0 0;    
    }
    span.searchsel ul {
        position: absolute;
        top: 33px;
        right: -1px;
        left: -1px;
        border: 1px solid #c7c7c7;
        border-top: none;
        z-index: 50;
        background: #fff;
        padding: 15px;
        border-radius: 0 0 20px 20px;
    }
    .orderblock ul li {
        list-style: none;
        padding: 5px;
    }
    .orderblock ul li:hover a {
        color: #999;
    }
    .orderblock li.active {
            position:absolute;
        top: -34px;
    }
    .orderblock li a {
            color:#000;
    }
    span.ordertitle {
        display: inline-block;
        padding: 5px 20px;
    }
    #yoo-zoo > div.category {
        margin: 0;
        padding: 0;
    }

    Обратите внимание на следующие строки в коде: 

    if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся

    Этим условием обернут весь код блоков сортировок и определяет в каком приложении выводится работает это все дело. Иначе сортировки будут выводится везде и работать например в блоге если он отдельным приложением сделан.

    Так же в данном месте можно поставить условие по категориям или иные условия для ограничения работы сортировок.. 

    По хорошему то для работы с сессией и переменными GET надо бы использовать саму joomla

    Как пример:

    JFactory::getApplication()->input->getString('order', '');

    Берем значение из сессии 

    JFactory::getSession()->get('order');

    Запихиваем значение в сессию

    JFactory::getSession()->set('order', 'ЗНАЧЕНИЕ');

    К материалу прикрепил файлик с измененными файлами. Может кого наведет на мысли.

    Комментарии (2)

    • Идет ошибка в сессии

      29 октября 2018 at 09:30 |
      Уже в самом начале начинает ругаться на сессии
      $currentorder = $_SESSION['orderkit'];
      https://prnt.sc/lbpoag

      Отзыв

    • Дмитрий

      18 октября 2019 at 07:40 |
      Уже давным давно не актуально для новых версий JBzoo

      Отзыв

    Оставить комментарий

    Пожалуйста, войдите, чтобы комментировать.

    Статус материала

    • 2016-11-05
    • 23720
    • Требования: ZOO, JbZOO, Joomla
    • Версия JBZoo: 2.2.x
    • Раздел: Песочница
    • Метки: JBZoo, ZOO, Сортировка, Хак
    • Скачать
    • Размер: 12.22 KB
    • Обновлён: 2016-11-06
    • Скачали: 156
    • jomla
    • jbzoo
    • css3
    • html5
    • Java script
    • jquery
    • bootstrap
    Мы находимся в Минске
    работаем по всей РБ