Фильтр на ajax и pdoPage

▶️ В этом уроке мы рассмотрим способ построения произвольных фильтров для выводимых списков товаров/элементов/блоков при помощи pdoPage и дополнительной javascript-логики
📚 Большой курс по интернет-магазинам на MODX: lectoria.pro/catalog/modx-bol...
📚 Курс по быстрому погружению в MODX: lectoria.pro/catalog/modx-soz...
🔗 Скрипты из урока: github.com/azernov/openmodxyo...
#ajax #pdotools #pdopage #фильтртоваров #modx #modxrevolution #modxrevo #урокиmodx #видеоурокиmodx #обучениеmodx #созданиесайтов #вебразработка
OpenModx - канал, посвященный изучению популярной системы (CMS) и фреймворка (CMF) MODx Revolution. Ведущий канала, Артем Зернов - специалист в области веб-разработки. Создатель веб-студии OpenColour. Занимается веб-разработкой более 15 лет. Среди известных клиентов - Сколково, киностудия Федора Бондарчука.
🖥 Канал OpenModx: / openmodx
📚 Курсы по Modx Revolution: lectoria.pro

Пікірлер: 31

  • @user-pk8gk1nl8k
    @user-pk8gk1nl8k3 жыл бұрын

    Вот вы продуктивный какой) Почти каждый день видео. Это очень хорошо, спасибо.

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Жалко, что такая продуктивность у меня раз в полгода )))

  • @user-sg9pp1fw1h
    @user-sg9pp1fw1h3 жыл бұрын

    Артем спасибо за урок! Можно ли сделать фильтр обычных ресурсов по TV вашим методом?

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Конечно можно. Вся логика поиска зашита в сниппете searchProducts, который является оберткой для msProducts. Для вашего случая нужно создать аналогичный сниппет searchResources, который будет будет являться оберткой для сниппета pdoResources. Чтобы pdoResources отфильтровать ресурсы по критериям tv, в него нужно передать параметр tvFilters. Например tvFilters => 'myTv==1' Вот выдержка из документации pdoResources: &tvFilters - Список фильтров по ТВ, с разделителями AND и OR. Разделитель, указанный в параметре &tvFiltersOrDelimiter представляет логическое условие OR и по нему условия группируются в первую очередь. Внутри каждой группы вы можете задать список значений, разделив их &tvFiltersAndDelimiter. Поиск значений может проводиться в каком-то конкретном ТВ, если он указан «myTV==value», или в любом «value». Пример вызова: &tvFilters=`filter2==one,filter1==bar%||filter1==foo`. Обратите внимание: фильтрация использует оператор LIKE и знак «%» является метасимволом. И еще: Поиск идёт по значениям, которые физически находятся в БД, то есть, сюда не подставляются значения по умолчанию из настроек ТВ. &tvFiltersAndDelimiter - (по-умолчанию ",") - Разделитель для условий AND в параметре &tvFilters. &tvFiltersOrDelimiter - (по-умолчанию "||") - Разделитель для условий OR в параметре &tvFilters. То есть вам нужно в сниппете searchResources (вашем самописном) сделать разбор GET-параметра и на его основе сформировать параметр tvFilters и затем вызывать сниппет pdoResources.

  • @user-sg9pp1fw1h

    @user-sg9pp1fw1h

    3 жыл бұрын

    @@OpenModx Спасибо за ответ! Буду пробовать! Думаю фильтр по TV интересен не только мне)

  • @user-sh1is5zt7c
    @user-sh1is5zt7c3 жыл бұрын

    Артем, подскажи, а чем собираешь значения для фильтров слева?

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Да все той же функцией collectParams [8:37]. Навешиваем в нее произвольную логику обработки полей формы и сбор их в объект, который потом улетает на сервер.

  • @grigodoes
    @grigodoes2 жыл бұрын

    Нашел интересную возможность вывести данные из сниппета в консоль бразуера, мне помогло, когда писал фильтрацию по цене Нужно добавить в конце сниппета: print_r("{ignore}console.log(". $scriptProperties['where'] ."){/ignore}"); *конструкция с {ignore} нужна, чтобы fenom (если включен) не выдавал ошибок После этого данные которые попадают в where будут удобно отображены в консоле

  • @OpenModx

    @OpenModx

    2 жыл бұрын

    Я обычно использую вывод в лог ошибок modx. Если вдруг я забуду где-то убрать такой вывод, то на внешней стороне это нигде не будет отображаться. А вообще, для отладки, вывод в консоль - тоже неплохо. Только не забывайте потом такие выводы удалять.

  • @ThePirateHistory
    @ThePirateHistory3 жыл бұрын

    Я делаю фильтр через плагин и postom, передаю хэш pdopage, и там конфигурирую строку where, и потом просто добовляю в сесию where с хэшой, и возвращяюэту лабудень.

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Ну тоже вариант. Но я стараюсь избегать работы с сессиями там, где это возможно. Я для себя решил, что с сессиями работаю только тогда, когда нужно на протяжении долгого времени хранить какую-то информацию пользователя. А поиск и фильтрация того не требуют.

  • @grigodoes
    @grigodoes3 жыл бұрын

    Спасибо за урок! Не понял момент с сортировкой, как сделать сортировку например по pagetitle Пробовал делать такой инпут но ничего не сработало

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Для сортировки нужно передать параметр с именем "sort", а в значении должна лежать строка "pagetitle:asc" или "pagetitle:desc"

  • @grigodoes

    @grigodoes

    3 жыл бұрын

    @@OpenModx делаю вот такой чекбокс , но не работает В консоль вывел "newParams" из productfilter.js, там в таком виде приходят данные {sort: ["pagetitle:asc"]}, но ничего не отрабатывает

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    @@grigodoes Обратите внимание, что параметр sort передается как массив (потому что у вас он в виде чекбокса). А предполагается, что этот параметр будет передан как строка (если его сделать как radio). Сделайте его radio вместо checkbox и тогда все заработает. Либо доработайте фильтрующий сниппет, в котором происходит разбор параметров и предусмотрите вариант, когда параметр sort может прилететь в виде массива, а не строки.

  • @grigodoes

    @grigodoes

    3 жыл бұрын

    @@OpenModx Спасибо за ответ, да с radio все работает

  • @roma8413
    @roma84133 жыл бұрын

    Здравствуйте! Можно ссылку на searchproducts.php ?

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Добавил в репозиторий, проходите по ссылке на github в описании

  • @roma8413

    @roma8413

    3 жыл бұрын

    @@OpenModx спасибо!

  • @iqmaxima
    @iqmaxima3 жыл бұрын

    Дайте ссылку на сайт где это реализовано. Спасибо

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Боюсь, вряд ли получится, так как это сайт 4-летней давности, там уже заказчик все переиграл 20 раз.

  • @szed8135
    @szed81353 жыл бұрын

    Не увидел, а где в примере фильтр по цене? только сортировка? И как его туда можно добавить?

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    Разбор фильтрации по цене начинается с 6:18. Единственное, чего не реализовано в этом уроке - это само поле, куда эта цена вводится, чтобы отфильтровать товары. Но, я думаю, принцип должен быть понятен: нам нужно в блоке фильтра добавить два input-элемента типа text или number с именами price_from и price_to. Данные из этих полей будут отправляться на сервер, а там уже сниппет searchProducts разберет эти параметры (начиная с 6:18) и сформирует параметр where для передачи в сниппет msProducts.

  • @szed8135

    @szed8135

    3 жыл бұрын

    ​@@OpenModx Ясно, спасибо, как раз это поле и не нашел и поэтому не понял, вроде и в коде прописано, а на странице его нет.

  • @grigodoes

    @grigodoes

    3 жыл бұрын

    ​@@OpenModx Добрый день, пытаюсь реализовать фильтр по ценам, добавляю 2 инпута с именами price_from и price_to, но при их изменении товары просто по новой загружаются, а фильтрация не происходит. В чем может быть проблема, куда копать?

  • @OpenModx

    @OpenModx

    3 жыл бұрын

    @@grigodoes На 7:40 я объясняю суть, как сделать так, чтобы pdoPage делал фильтрацию и сортировку с нужными параметрами. Там идет речь о файле pdofilter.js, который пишется самостоятельно. Проверьте, срабатывает ли у вас функция collectParams - собирает ли она параметры price_from и price_to. Если не собирает, то проверьте, лежат ли ваши инпуты внутри формы с классом pdoFilterForm

  • @grigodoes

    @grigodoes

    3 жыл бұрын

    @@OpenModx проверял, параметры собирает, но почему то фильтрация не происходит

  • @mavldr
    @mavldr9 ай бұрын

    Не понимаю, почему написано ajax и pdoPage, а требуется msProducts? Получается обманываешь ты меня)

  • @Mayanktaker
    @Mayanktaker3 жыл бұрын

    English version please

Келесі