Ajax фильтр на MODx Revolution
Вставка
- Опубліковано 2 тра 2016
- Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: wd-m.ru/createsite
Приветствую, друзья! Сегодня мы научимся создавать фильтр ресурсов в MODx Revolution с возможностью сортировки по любому TV полю и подгрузкой результатов по клику "Загрузить еще". Для вывода результатов будем использовать сниппет pdoResources.
Страница урока: webdesign-master.ru/blog/cms/...
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb
💥 Все курсы в одном комплекте 👇👇👇
webdesign-master.ru/bundle_courses
Спасибо за то, что делитесь такими мега полезными знаниями! Все очень круто!
Большое спасибо за видео!
Реально выручили этой информацией.
Огромное спасибо еще раз!
Огромное спасибо вам за труды!
О отлично , спасибо вам Алексей с праздниками вас крепкого здоровья и клиентов побольше =)
+Дмитрий Бережной Спасибо и вам :-)
Блин, шикарно просто!!!! Спасибо огромное!!!
Спасибо! как всегда интересно и полезно )
Спасибо, как раз то что искал, будем разбираться...
Для чекбоксов с множественным выбором:
$tags = $_GET['tags'];
if($tags){
$idx = 0;
foreach ($tags as $tag){
if($idx == 0){$idx= 1;$comma='';}else{$comma=' OR ';}
$filter_tags .= $comma."tags LIKE '%".$tag."%'";
}
$filter[] = $filter_tags;
}
Работает, спасибо тебе друг!
Спасибо! Да хранит тебя господь!
Алексей, огромное спасибо за Вашу работу! И за то что делитесь с миром такими удобными и универсальными инструментами, понятно и толково объясняя!
Фильтр круть. Поймал проблему с несовместимостью моего ajax-фильтра с ajaxMode pdoPage. Решение нашёл в твоём уроке. Скрипты немного подправил - вместо pdoResources применил msProducts, вместо area подставил Data.price и немного подправил классы разметки. Заработало всё за 5 минут после подключения.
Respect. Сам бы не справился - пЛОХ в php)))
Спасибо большое ! Все получилось !
Для тех кто пытается сделать вывод SELECT:
В сниппете:
if($_GET['color']) {
$filter[] = 'color='.$_GET['color'];
}
Front-end часть решения:
Выберите цвет
Красный
Синий
Желтый
JS:
var color = document.getElementById('color');
color.addEventListener("change", ()=>{
let val = 'color_'+color.value;
let radio = document.getElementById(val);
$(radio).trigger('click');
});
супер урок! ничего лишнего
Ты просто бесподобен! 4 дня убил на решение проблемы, а потом наткнулся на твоё видео. Спасибо огроменное
Большое человеческое спасибо!
Спасибо большое!
Блестяще!
Спасибо тебе большое!
Спасибо за фильтр
Молодец. Автор очень хорошо объясняет, прекрасная дикция, магический голос, так надоели эти картавые шепелявые евреи, которые записывают скринкасты.
Автор, я думаю, у тебя дар преподавания. Я очень хочу с тобой подружиться!
Полезный урок. Алексей, у Вас в js есть элементы верстки наподобие var sortDownText = 'По убыванию', как Вы внедряете многоязычность в js в таких случаях?
Для строковых значений, в сниппете :
if($_GET['target']) {
$filter[] = 'target="'.$_GET['target'].'"';
}
Чувак добра тебе !))
+ в карму!
Большое спасибо!
Большое спасибо! Вопрос: а когда выйдет следующий выпуск "Создание сайта под ключ на заказ" ?
Большое спасибо за уроки! В уроках по ModX не хватает примера работы с Collections. А в этом видео об этом только упоминается с отсылом на предыдущие уроки, но в предыдущих уроках только сам плагин Collections устанавливали, примера работы с ним не было.
Посмотрите создание типовой секции лп и создание сайта под ключ.
Спасибо за видео, очень полезная информация
Будет ли работать данный способ с товарами miniShop2?
Подскажите плиз как заставить работать select одиночный выбор? вот код который я использовал. Результат: Во фронтэнд выводится числовое значение (как я понимаю порядковый номер выбранного пункта) и фильтрация не работает при выборе элементов из select.
вот код
Сам select
Район
Все
Центр
Автовокзал
Профессорский уголок
Код снипета
if($_GET['raion']) {
$filter[] = 'raion='.$_GET['raion'];
}
Формат полей
Центр==1||Автовокзал==2||Профессорский уголок==3
Вывод в чанке
Район: [[+tv.raion]]
Урок супер. Спасибо за труд. Есть небольшой вопрос - есть ли сложности в использовании вашего стартового шаблона OptimizedHtml при посадке верстки на Modx?
Спасибо. Нет, сложностей нет.
Очень классная штука ! Вопрос. будет ли работать данный фильтр если тип TV в админке не радио кнопки или чекбокс а Список множественный или одиночный выбор ?
Хотелось бы еще видео по фильтрации по категориям. Ни как не могу реализовать в своём проекте
привет. Когда передаю более 60 tv параметров в pdoResorces он ругается и перестает работать. Можно ли как-нибудь поменять это значение поставить не 60 tv а более или как-нибудь обойти ограничение?
Ребята, кому нужна фильтрация чекбоксов в одном TV я нашел решение. Это подойдет вам, если фильтрация будет только по одному TV, ну если нужно что-то сложнее, то думаю допилить тут можно будет. Я не программист, поэтому за качество кода и его работу не отвечаю :D
Итак, в сниппете до настройки фильтрации объявите строковую переменную $f = '';
Далее по каждому инпуту пишете условие и добавляете значение к переменной:
if($_GET['c-spec-1']) {
$f = $f.'c-spec==%Значение 1%||';
}
if($_GET['c-spec-2']) {
$f = $f.'c-spec==%Значение 2%||';
}
if($_GET['c-spec-3']) {
$f = $f.'c-spec==%Значение 3%||';
}
Далее нужно удалить из финальной строки последние символы ||
$f = substr($f,0,-2);
И в вызове pdoResources фильтруем не по where, а по tvFilters:
$params = array(
'parents' => $parents,
'limit' => $limit,
'offset' => $offset,
'tpl' => $tpl,
'select' => 'id,pagetitle,introtext,content',
'includeTVs' => $fields,
'showHidden' => '1',
'sortby' => $sortby,
'sortdir' => $sortdir,
'processTVs' => '1',
//'where' => $where
'tvFilters' => $f
);
Эта херня работает для меня
Подскажите, пожалуйста, как сделать чтобы при фильтрации сохранялся шаблон вывода товара (например, плитка - список), а не сбрасывался на дефолтный?
Работает ли фильтр с tv полями созданными в MIGX?
при вызове сниппета в шаблон категории как подрубить вот такую конструкцию? (where не работает с catalogFilter)
&fields=`color`
&where=`{"color":"white"}`
иными словами: по тв полю нужно вывести товары при вызове, а потом еще фильтровать.
Если можно вопрос, при попытке передать значение к примеру "ball" в атрибуте "value" не находит его.
В TV с названием "subject" в параметрах (допустим radio) ввожу возможные значения, например: Мяч==ball||Стул==chair||Стол==table
В форме:
В сниппете:
if($_GET['subject']) {
$filter[] = 'subject='.$_GET['subject'];
}
Что я делаю не так? Подскажите пожалуйста
Присоединяюсь к вопросу. Работает только если указать значения: Мяч==1||Стул==2||Стол==3. В таком случае мы получаем на странице пункты с названиями 1,2,3. Как заменить цифры на строки?
Сделай так:
if($_GET['subject']) {
$filter[subject] = $_GET['subject'];
}
Я сделал все как по видео и по странице, где более описано все. У меня все работает, но только в том случае, если я вывод элементов так же засуну внутрь тега form
В чем может быть проблема?
Заранее спасибо!
Картина теперь такая:
Фильтр
Вывод элементов
Сортировка - при чем сортировка работает только вне тега form
Если вывод элементов вытягиваю из тега form, то ajax визуально перезагружает элементы, но они остаются так же как и были.
В общем пару часов разбирал код жыквери, вникал в пхп(который не знаю) в итоге плюнул на всё и просто объеденил все в один контейнер(div). Усё заработало.
И еще маленькое замечание =) , Вы сказали что вернетесь к чанку который оформляет один айтем и похоже забыли =). А так огромнейшее спасибо за ваш труд, очень и очень классный контент.
+Дмитрий Бережной он есть в статье к уроку :)
+Дмитрий Бережной получается? :)
+WebDesign Master в целом да , только кнопку загрузить еще не могу как у вас на видео сделать чтобы под item была все время улетает вверх
Алексей, вопросик еще а в этом фильтре вашем, можно ли сделать фильтрацию по двум чекбоксам. Например есть гараж и есть например сад и фильтр тебе отфильтровывает только те позиции у кого сад и гараж. Пытаюсь два чекбокса прикрутить не получается.
+Дмитрий Бережной просто добавляете 2 чекбокса и привязываете каждый к TV
Соответственно, в сниппете также.
+WebDesign Master Щас попробую спасибо
+WebDesign Master момент , а как в админке их вывести и запретить менеджеру выбрать и сад и гараж. Ну допустим дом или с гаражом или с садом. Одновременно и того и другого допустим не может быть
+Дмитрий Бережной что-то усложняете.
Очень крутой скрипт, вот только один момент не ясен. Я использую на своем сайте расширение minishop2 которое использует свой сниппет msProducts через pdoPage, для вывода ресурсов(товаров). Как я могу объединить сниппет catalogFilter со сниппетом msProducts, чтобы фильтрация ресрсов через Ajax фильтр, не мешала работе minishop2?
когда уже будет ответы на вопросы?)жду не дождусь,ответы на вопросы по php языку
Подскажите пожалуйста, как правильно оформить такой фильтр для списка с множественным выбором?
Посмотрите, какой формируется GET запрос у multiple элемента и сделайте соответствующую обработку в сниппете.
Если требуется поиск например по заголовку::
if($_GET['pagetitle']) {
$filter[] = 'pagetitle LIKE "%'.$_GET['pagetitle'].'%"';
}
Огромное спасибо!
Алексей. а еще момент подскажите пожалуйста. Покуда грузится Ajax ом запрос, можо ли как то преоладер загрузить. Чтобы крутился какой то
+Дмитрий Бережной думаю, да, можно.
Прелоадер подцепляется в целом легко. В момент запроса вешаете функцию, которая показывает прелоадер. В момент получения данных с сервера функция соответственно убирает прелоадер. Придется ковырнуть немного сам сниппет и js файл.
чтобы работал &resources
добавьте в catalogFilter >
в массив
$params
'resources' => $resources
Добрый день. Очень крутой урок, но хотелось бы узнать, как можно сделать такую фильтрацию если у меня не один чекбокс, а штук 5, допустим:
Фильтрация по производителю:
Samsung +
Sony +
Nokia -
Applle -
HTC +
Получается это одна категория производитель и одно поле, но с множественной выборкой, можно ли как-то это реализовать?
получилось сделать такой фильтр путем создания доп. поля типа checkbox под каждый параметр
в сниппете
if($_GET['estetMed']) {
$filter[] = 'estetMed=1';
}
if($_GET['plasticHirur']) {
$filter[] = 'plasticHirur=1';
}
и т.д.
Спасибо за урок. Только никак не получается, чтобы работал по текстовому значению tv, например: Audi==Audi||Mersedes==Mersedes||Volvo==Volvo. Когда стоят цифры то работает. Подскажите как решить.
Нужно писать только название, Audi||Mersedes||BMW и тд
Спасибо , а можно его с pdoPage использовать?
Подскажите пожалуйста, как сделать вывод по умолчанию с заданной сортировкой? Сейчас при открытии сайта материалы сортируются по алфавиту, а как сделать чтобы они сортировались по выбранному TV ?
А как сделать чтобы все это работало только после нажатия на кнопку подобрать??? Спасибо за полезное видео.
А как сделать пагинацию вместо кнопки загрузить еще?
Спасибо.Очень полезная штука.Только вот не могу разобраться, можно ли сделать чтобы фильтр был не только по значениям вида Первый==1||Второй==2||Третий==3. А фильтровать по текстовому значению tv
Да, конечно можно.
А не подскажите в какую сторону копать.А то сегодня уже голову сломал. Понимаю что это просто. И где то не получается из за мелочи какой то. =)
Нужно упростить код диапазона цен из примера до одного поля.
Завтра буду искать) спасибо
Добрый день! Не подскажите, как сделать фильтр через select (список) и 2 вопрос в чанке который мы выводим через ваш сниппет пишу он по почему то не выводит ссылку
смогли вы решить проблему с [[+uri]]?
@@osdby такая же проблема была. Надо в сниппете добавить uri в строку 'select' => 'id,pagetitle,introtext,content,uri', (у него в примере это строка номер 69).
Подскажите пожалуйста, как сделать сортировку по нескольким параметрам. У вас идёт сортировка по pagetitle. - Ok. Но как мне сделать, чтобы сначала выводились позиции по одному tv полю, а далее шло всё остальное отсортированное по id скажем?
Фильтр понравился.Только у itemов никак не выводятся даты, типа [[+publishedon]] Как решить данную проблему?
Спасибо вам большой за Фильтр, пригодился, но можете подсказать ещё такие вещи:
1 - Подскажите как вывести сообщение, если ничего не найдено?
2 - Можно как-то в случайном порядке их вывести?
+Тони Тони sortby RAND()
catalogFilter:default=`не найдено элементов с данными параметрами`? и т.д.
Ребята подскажите пожалуйста как можно сделать так, например мы добавляем через MIGX картинки в одном место, но чтоб эти картинки были на всех страницах или на определенных страницах
Не подскажете, почему может не отрабатывать фильтр по радио кнопкам, если в качестве их значения использовать текстовую строку? Заранее спасибо
В сниппете строку оберните в кавычки
Ромео Шекспир попробуйте вместо filter использовать where, в JSON
Доброго времени суток! Спасибо за урок! Я новичок! В уроке все "понятно" за исключением самой верстки страницы с фильтром. То есть понятно что тут описывается сам принцип работы фильтра. Но, все же - где взять html код самой страницы с фильтром?
На гитхабе всё выложил, посмотрите на странице урока.
привет, автор. пожалуйста порекомендуй фрилансера для создания сайта-аффилиейта.
Есть "категория товаров (id2)" в ней куча товаров, каждый из товаров имеет tv поля по которым осуществляется фильтрация. В самом каталоге все работает как надо. Выводим так:
[[!tb_msCatalogFilter:default=`Не найдено товаров с данными параметрами [[$smile]]`?
&tpl=`tb_tpl.msProducts.row` - шаблон
&limit=`9` - лимит
&parents=`2` - id категории, т.е. нашего каталога товаров
&fields=`tb_bike_brake, tb_bike_brand, tb_bike_sex, tb_bike_speed, tb_bike_type, tb_bike_wheel` - tv поля по которым осуществляется фильтрация
]]
Однако есть страница брендов например, у меня создана категория "бренды (id3)" и в ней созданы ресурсы, т.е. какие то бренды. В каждом из товаров в каталоге есть tv поле бренд, в котором осуществляется выборка из списка ресурсов в моём случае это ресурс (id3). Ну и как бы создан шаблон для брендов в котором на данный момент следующий вызов:
[[msProducts?
&tpl=`tb_tpl.msProducts.row`
&sortby=`RAND()`
&limit=`0`
&parents=`2`
&includeTVs=`tb_bike_brake, tb_bike_brand, tb_bike_sex, tb_bike_speed, tb_bike_type, tb_bike_wheel`
&tvFilters=`tb_bike_brand==[[*id]]` - данный параметр отвечает за вывод товаров только определенного бренда.
]]
Но хотелось бы на эту страницу прикрутить этот же фильтр, только с предустановленным фильтром по tv полю.
[[!tb_msBrandFilter:default=`Не найдено товаров с данными параметрами [[$smile]]`?
&tpl=`tb_tpl.msProducts.row`
&limit=`9`
&parents=`2`
&fields=`tb_bike_brake, tb_bike_brand, tb_bike_sex, tb_bike_speed, tb_bike_type, tb_bike_wheel`
&tvFilters=`tb_bike_brand==[[*id]]` - чтобы как то работала эта строчка
]]
Заранее спасибо, если кто то наведёт на мысль!
[[!tb_msBrandFilter:default=`Не найдено товаров с данными параметрами [[$smile]]`?
&tpl=`tb_tpl.msProducts.row`
&limit=`9`
&parents=`2`
&fields=`tb_bike_brake, tb_bike_brand, tb_bike_sex, tb_bike_speed, tb_bike_type, tb_bike_wheel`
&msFilter=`tb_bike_brand==[[*id]]`
]]
- если заменить tvFilters на любую другую переменную (например msFilter), и в сниппете перед $tvFilters = implode(',', $tvFilter); добавить $tvFilter[] = $msFilter; то все работает, кроме фильтрации по цене.
Может кто-нибудь знает как сделать с пагинацией, подскажите пожалуйста
Интересный способ, а главное простой! Всё работает, НО есть вопрос, как быть со скриптами после отработки ajax? Например у меня для блоков вызывается js скрипт ( $(".card").matchHeight(); )на выравнивание их по высоте, и он перестает работать после отдачи контента аяксом. Как его проинициализировать заново?
$('.pjax-container').on('pjax:success', function () {
setTimeout(function() {
$(".card").matchHeight();
}, 400);
});
Спасибо за решение! С нескольких попыток сработало в варианте прописав в файле вызова ajax.js: в конце вызова function ajaxMainFunction
$.ajax({
success: function(){
setTimeout(function() {
$(".card").matchHeight();
}, 400);
}
срабатывает, но продолжу ковырять код дальше, т.к. неуверенна, что я делаю все правильно.
Добрый день, у меня этот фильтер при использовании select ломает и слайдер и модальные окна как быть в таком случае?
Алексей, было бы неплохо чтобы еще был поиск например по названию. Или я многого хочу ?
+Дмитрий Бережной вы имеете ввиду поиск по сайту?
+WebDesign Master поиск по сайту, тоже хотелось бы в вашем исполнении увидеть. Есть решения в интернете, но хотелось бы на ваше глянуть. Касательно поиска по названию , то вот например там где фильтр показан в уроке например еще 1 input и когда пользователь например вводит или начинает вводить Одноэтажный домик, ему ajax подгружает уже все что есть со словом одноэтажный. Как то так. Надеюсь вы поняли, может я сумбурно обьяснил
+Дмитрий Бережной понял. Рассмотрю вариант.
Здравствуйте, а как сделать чтоб на странице товаров не выводились подкатегории. У меня категория1-подкатегория1.1-товар1, товар2.
На странице категория1 выводяться товар1, товар2 и в то же время подкатегория1.1
Пробовал &where=`{"templates": ID шаблон}` не работает
Ответ был в комментариях, добавил в catalogFilter >
в массив
$params
'templates' => $templates
А в чанке
изменил &where=`{"templates": ID шаблона}` на &templates=` ID шаблона`
Сработал
Что делать если фильтрация отрабатывает по первому нажатию, а по второму фильтрует? По нажатию на ajax-item
Я так понимаю, это все работает только с числовыми значениями, да?
Нет, со строковыми также работает.
Вот например:
Скажем есть TV артикул.
if($_GET['articul']) {
$filter[] = 'articul='.$_GET['articul'];
Ввожу цифры и если TV артикул совпадает, то он мне выдает, а если ввожу с буквами нет(
Всем привет! Всю ночь не мог разобраться где я затупил. у меня почему то выводится все вот так не знаю как решить проблему. Помогите разобраться
Сортировать по цене: По возрастанию
Array ( [id] => 14 [pagetitle] => «СЕВЕРНАЯ КОРОНА» [introtext] => [content] => [tv.area] => 45 [tv.floor] => 1 [tv.garage] => [tv.price] => 165000 [idx] => 1 [link] => ) Array ( [id] => 12 [pagetitle] => «СТРИЖИ НА КИРОВА» [introtext] => [content] => [tv.area] => 68 [tv.floor] => 2 [tv.garage] => [tv.price] => 52000 [idx] => 2 [link] => ) Array ( [id] => 11 [pagetitle] => «СТРИЖИ НА РОДНИКАХ» [introtext] => [content] => [tv.area] => 85 [tv.floor] => 3 [tv.garage] => [tv.price] => 32000 [idx] => 3 [link] => )
Загрузить еще 2 из 2
Пример чанка tplCatItem
Этаж
Гараж Нет
Цена:
чанк отсутствует
Ну так что за шаблончик у firefox, хочу сделать себе такой же вид как у тебя!
Simple White Compact
Помогите: как вывести дату публикации ресурса на странице фильтрации?
publishedon как обычно. Можно с фильтром для формата даты.
Пробую [[+publishedon:strtotime:date=`%d %b %Y`]] - вообще не выводит
[[*publishedon:strtotime:date=`%d %b %Y`]] - выводит дату публикации страницы с фильтром, а не ресурса.
Как правильно вывести?
Попробуйте добавить publishedon в обработчик сниппета.
Обратила внимание, что в скрипте отслеживается только изменение input но не select
$(''+ajaxFormSelector+' input').change(function() {
ajaxMainFunction();
})
$(''+ajaxFormSelector+' select').change(function() {
ajaxMainFunction();
})
добавьте
Если вы разобрались как подключить select не могли бы мне подсказать? Уже перепробовал кучу всего и работает только вывод из админки идо в виде порядкового номера а не самого значения. фильтрация на select не работает совсем.
вот код
Сам select
Район
Все
Центр
Автовокзал
Профессорский уголок
Код снипета
if($_GET['raion']) {
$filter[] = 'raion='.$_GET['raion'];
}
Формат полей
Центр==1||Автовокзал==2||Профессорский уголок==3
Вывод в чанке
Район: [[+tv.raion]]
Попробуйте вот так:
if($_GET['raion']) {
$filter[] = 'raion="'.$_GET['raion'].'"';
}
Кнопка ломает верстку появляясь после каждых 3х элементов