Views является очень мощным модулем, расширяющий базовые возможности Drupal. Любой список нод можно вывести в любом виде, если есть небольшие познания в php.
У меня появилась задача темизировать вывод exposed filters таким образом, чтобы сначала показывались несколько полей, затем ссылка «расширенный поиск» — при нажатии показывать остальные поля для фильтрации.
Логика действий понятна:
- сначала выводим первые поля
- ссылка «расширенный поиск».
- При нажатии на ссылку показываем дополнительные фильтры через JQuery
Итак, у нас есть представление, еxposed filters вынесены в блок, начинаем работу.
Представление имеет название automarket. Шаблон для вывода — views-view-table—automarket—page.tpl
По-умолчанию фильтры отобразятся следующим образом:
Колонка становится очень длинной, и большинству пользователей могут не понадобиться дополнительные настройки фильтрации, к тому же два поля Цена от и Цена до можно уместить в одну строку.
Для перекрытия стандартного отображения фильтров, в папке с нашей темой создаем папку views, все шаблоны представлений необходимо хранить в ней.
Теперь создаем файл php по следующей схеме:
views-exposed-form—automarket—page.tpl.php
Жирным я выделил имя нужного представления. Открываем этот файл и пишем следующее:
<label for="<?php print $widgets['filter-field_myfield']->id; ?>"> <!--?php print $widgets['filter-field_myfield']--->label; ?> </label> <!--?php print $widgets['filter-field_myfield']--->widget; ?> |
$widgets[‘filter-field_myfield’]->id — id нашего фильтра
$widgets[‘filter-field_myfield’]->label — заголовок
$widgets[‘filter-field_myfield’]->widget — и сам фильтр
Название полей можно узнать в редактировании представления. Главное не забыть ставить «filter-» перед каждым из них.
Теперь можно выводить фильтры в любом месте, последовательности, обернуть в нужные блоки.
Дополнительные фильтры я обернул в блок:
<!--В самом конце нашего файла не забываем вставить кнопку для фильтрации--> <!--?php print $button; ?--> |
В нужном месте вставляем ссылку для открытия/скрытия доп.фильтров:
<a id="openaddfilter" href="#">Расширенный поиск</a> |
Создаем js-файл, который подключаем к нашей теме и пишем в нем:
$(document).ready( function(){ $('a#openaddfilter').click(function(){ if($('div#addoptions').css('display') == 'none'){ $('div#addoptions').show(); } else{ $('div#addoptions').hide(); } return false; }); }); |
Скрипт можно дополнить, чтобы он сохранял, выбранное пользователем, состояние фильтра. Для этого необходимо подключить плагин jquery.cookie, подробнее в этой статье.
Дополнение (25.07.2013)
Для Drupal7, как было замечено в комментариях, способ немного отличается. Чтобы узнать id выводимых фильтров в нашем переопределенном файле пишем:
<?php print_r($widgets);?> |
Выводится список. Например у меня поле с select выводится
<?php print $widgets['filter-price']->widget; ?> |
Идем далее к js. Не всем понятно, как оно работает. Для корректной работы скрипта не важна версия Drupal. Скрипт получает команду: при клике по ссылке с id «pushme» проверить показан ли блок с id «showme»; если не показан — показать, показан — скрыть. Все. Тут есть небольшая заминка. Нужно подгрузить более свежую версию JQuery и чтобы не было конфликта версий, использовать noconflict.
Подгружаем jquery
<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
И теперь верхний кусок js изменится на:
var $jq = jQuery.noConflict(); $jq(document).ready(function(){ $jq('a#openaddfilter').click(function(){ if($('div#addoptions').css('display') == 'none'){ $jq('div#addoptions').show(); } else{ $jq('div#addoptions').hide(); } }); }); |
Дополнение (31.07.2013)
Благодаря Максиму нашлось решение, как запустить этот js без noconflict. Статья на хабре.
<script type="text/javascript"> (function ($) { $(function () { $('a#openaddfilter').click(function(){ if ($('div#addoptions').css('display') == 'none'){ $('div#addoptions').show(); } else{ $('div#addoptions').hide(); } }); }); }) (jQuery); </script> |
Позновательно 🙂
Можешь написать еще статью, как
[img]http://img-fotki.yandex.ru/get/25/77677229.1e/0_5fde2_9cec25b7_orig.png[/img] на JS прокрутку блоков со стрелками сделать, пример:
http://img-fotki.yandex.ru/get/4407/77677229.1e/0_5fde3_77a63b95_orig.png
_edinstvo-news.ru
Это не сложно. Плагин jquery carousel подключаешь и вперед. На joomdesign он как раз и стоит.
Очень познавательно и полезно.
А вы случайно не подскажете как первый скрытый (display: none;) с помощью модуля Views Dependent Filters фильтр отобразить в форме не скрытым, а с опцией select disabled=disabled, т.е. из скрытого сделать неактивным до момента когда сработает зависимость?
Просто необходимо чтобы поле под зависимый фильтр не скрывалось постоянно, а отображалось как неактивное.
Здравствуйте. Очень просто, думаю. Делаете кнопку (ссылку) с классом уникальным, вешаете на него событие onclick (как в моем примере выше), дальше с помощью JQuery:
$(‘#x’).attr(‘disabled’, true);
где x — id нужного селекта.
А модуль Views Dependent Filters даже не смотрел.
не работает
<label for="id; ?>»>
label; ?>
widget; ?>
проект на drupal 7
Для 7-го пока не пробовал.
а не подскажете как программно вывести виджет для 7
В данный момент — нет. Когда у меня возникает задача и нахожу решение — делюсь в блоге, если не лень. Но пока таких задач не было.
спасибо за отзыв если найду решение обязательно отпишусь
Буду очень рад.
после долгих опытов устоновил разницу надо дописать всего лишь » _value»
drupal 6
filter-field_myfield
drupal 7
filter-field_myfield_value
Здравствуйте.А как вы темизировали ваш пример «цена от и цена до». Там ведь один виджет
widget; ?>
У типа содержимого есть поле цена. В настройках фильтра я вывел это поле два раза. В одном указал значение >= (это «цена от»). В другом <= (цена до). А фактически это одно поле.
Такая конструкция не совсем правильно работает вы тестировали ее?
не выводится нужный диапазон решение было просто оператором выбрать «между»
только перед этим при создание cck поля надо выбрать не текстовое поля а поле «с числовым значением» а для «года» можно так же выбрать «с числовым значением» или установить модуль что то вроде «data» этот тип поля так же поддерживает оператор «между»
далее в label(описание) при раскрытие фильтра дописываем цена от до
а сами «от» и «до» оборачиваем в в обертку дописываем class=»»
и по средствам css придаем нужный нам вид
теперь такая конструкция визуально не чем не отличается от данной в этой НО показывает весь диапазон цен лет
Тестировал. Поле цена — integer. Все работало. Сайт этот правда так и не запустился, но точно помню, что делал именно так.
Вот оператор «между» и не могу темизировать… При одном фильтре выводятся две формы ввода и операции с файлом —-tpl.php не проходят. Нашел в инете выход сделать два фильтра и темизировать их… буду пробовать.
Это актуально для D7. Данная статья автора актуальна и для D7, views 3 кстати, все получится.
Стать хорошая, но есть главный косяк этого примера, который заключается в отсутствии зависимых фильтров Views в (Drupal 6), не выскакивает поле по модели как на Avito,выбрал марку и листай сотню объявлений ищи нужную модель..
Не понял в чем проблема: в отсутствии зависимых фильтров или в описанном примере?
Для D6 таких фильтров не надо было, а для 7-ой версии есть модули. Например вот здесь http://amag16.ru/autoservice использовал.
У меня проблема в том, что у меня D6ка и как раз такой случай, и мне зависимые фильтры ой как нужны!, а почему для D6 таких фильтров не надо было?
А статья хорошая!!!
Мне для 6-ой версии они не понадобились, потому что после начала работы в друпалом, решил переходить на 7-ую версию.
http://serho.ru/cust-modules/filtr-dlya-views-s-ierarhicheskim-vyborom-terminov — попробуйте к нему обратится, может сделает для 6-ки вариант модуля.
Спасибо
Demetr — А как сделать чтобы раскрывающееся фильтры отъезжали от низа страница при отображении(то есть раскрывались не заграницу экрана монитора)
Граница блока наверное имелось ввиду?
Тогда это на css все через position:absolute настраивать надо.
Что-то js скрипт (для открытия/скрытия доп.фильтров) конфликтует с js добавлением удалением из закладок…
Возможно надо перевести jquery в noconflict.
Прошу прощения, это я что-то намудрил по видимому, рабочий и без глюков js код для D7 будет выглядеть так (если где-то ошибся — поправьте):
(function ($) {
$(document).ready(
function(){
$(‘a#openaddfilter’).click(function(){
if($(‘div#addoptions’).css(‘display’) == ‘none’){
$(‘div#addoptions’).show();
} else{
$(‘div#addoptions’).hide();
}
return false;
});
});
}) (jQuery);
Jquery без разницы какая версия друпала, он работает с указанными элементами. Код остается такой же.
Сегодня попробую потестировать на 7-ом, отпишусь.
Дополнил материал.
Не, друг, я конечно не спец, но по моему noconflict и уж тем более загрузка более новых версий jQuery не лучший вариант — 1. с новыми версиями jquery некоторые модули имеют свойство глючить или не работать (сейчас список не приведу, но с отдельными экземплярами я сталкивался не раз); 2) noconflict — вообще не нужен т.к. и без него все прекрасно работает — нужно лишь «обернуть» твой код в стандартную так сказать «обертку» для D7: http://habrahabr.ru/post/161039/
P.S.: Если мой вклад достоин — можешь поставить ссылку на мою «записную книжку» (maksis.ru)
Привет. В пнд проверю. Спасибо за ссылку, надеюсь заработает.
Работает. Век живи — век учись, спасибо.
А как уместить поля Цена от и Цена в одну строку?
Как обернуть 2 поля в див?
В статье написано как выводить виджеты фильтрации. Берете необходимые и оборачиваете/оформляете как угодно.
Также для темизации views exposed form вы можете попробовать модуль Views exposed form layout
Спасибо. Обязательно посмотрю ваш модуль.