[pdoTools] 1.10.0 с ajax пагинацией из коробки
Еще один предпраздничный сюрприз — новая версия pdoTools, который добавляет любимую многими ajax пагинацию сразу в комплект дополнения.
Основы можно почитать в анонсе предыдущей версии, а я вам расскажу, что нового.
Все изменения касаются только одного сниппета pdoPage, у которого появилась масса новых параметров.
Первым делом это:
Для этого все рабочие элементы нужно оформить в определённом виде, чтобы скрипты могли ими оперировать.
Вызов стандартной пагинации выглядит так:
Новые параметры, использующиеся для работы:
Параметр &ajax=`1` указывать необязательно. Не пустой &ajaxMode активирует его самостоятельно.
Так что, логично его размещать вверху:
Плавающий блок навигации показывает текущую страницу и позволяет быстро перейти куда нужно. Здесь клик уже не обрабатывается через ajax, потому что и так выходит довольно сложно.
Если вывод плавающего блока в пагинацией не нужен, то просто сделайте ему display:none в вашем css.
Это бета версия, возможны ошибки и недоработки. Правда, касаться они могут только нового функционала, потому что старый я совсем не трогал.
Все новые параметры прописаны в сниппете, советую посмотреть:

Мастером javascript я себя назвать не могу, так что, если увидите недоработки в pdopage.js — присылайте исправления, буду рад.
За всю эту радость можно благодарить Wassi Wassinen, который заказал и оплатил эту доработку.
Основы можно почитать в анонсе предыдущей версии, а я вам расскажу, что нового.
Все изменения касаются только одного сниппета pdoPage, у которого появилась масса новых параметров.
Первым делом это:
- frontend_js — Ссылка на javascript для подключения сниппетом.
- frontend_css — Ссылка на css стили оформления для подключения сниппетом.
- default — стандартная ajax-пагинация, как на главной modx.pro.
- button — загрузка новой страницы при нажатии на кнопку.
- scroll — загрузка новой страницы при прокрутке.
Стандартная пагинация
Этот тип никак не меняет содержимое страницы, просто загружает нажимаемые ссылки через ajax.Для этого все рабочие элементы нужно оформить в определённом виде, чтобы скрипты могли ими оперировать.
Вызов стандартной пагинации выглядит так:
<div id="pdopage">
<div class="rows">
[[!pdoPage?
&parents=`0`
&ajaxMode=`default`
]]
</div>
[[!+page.nav]]
</div>Новые параметры, использующиеся для работы:
- ajaxElemWrapper — jQuery селектор элемента-обёртки с результатами и пагинацией. По умолчанию #pdopage.
- ajaxElemRows — jQuery селектор элемента с результатами. По умолчанию #pdopage .rows
- ajaxElemPagination — jQuery селектор элемента с пагинацией. По умолчанию #pdopage .pagination
- ajaxElemLink — jQuery селектор ссылки на страницу. По умолчанию #pdopage .pagination a
Параметр &ajax=`1` указывать необязательно. Не пустой &ajaxMode активирует его самостоятельно.
Загрузка кнопкой
В отличии от стандартной пагинации, этот тип работы предполагает, что пользователь будет двигаться только вниз, загружая новые элементы, и поэтому сдвигает блок пагинации при прокрутке.Так что, логично его размещать вверху:
<div id="pdopage">
[[!+page.nav]]
<div class="rows">
[[!pdoPage?
&parents=`0`
&ajaxMode=`button`
&limit=`5`
]]
</div>
</div>Используются всё те же селекторы, плюс:- ajaxElemMore — jQuery селектор кнопки загрузки результатов при ajaxMode = button. По умолчанию #pdopage .btn-more.
- ajaxTplMore — Шаблон кнопки для загрузки новых результатов при ajaxMode = button. Должен включать селектор, указанный в ajaxElemMore. По умолчанию
@INLINE <button class="btn btn-default btn-more">[[%pdopage_more]]</button>
Плавающий блок навигации показывает текущую страницу и позволяет быстро перейти куда нужно. Здесь клик уже не обрабатывается через ajax, потому что и так выходит довольно сложно.
Если вывод плавающего блока в пагинацией не нужен, то просто сделайте ему display:none в вашем css.
Загрузка при прокрутке
Этот способ очень похож на предыдущий, только нет кнопки и её не нужно нажимать — всё делается автоматически при прокрутке страницы.<div id="pdopage">
[[!+page.nav]]
<div class="rows">
[[!pdoPage?
&parents=`0`
&ajaxMode=`scroll`
]]
</div>
</div>Скажу честно, что этот тип пагинации на мой взгляд сыроват, так что можете предлагать свои варианты улучшений. Я его добавил просто для компании.Функции обратного вызова
Вы можете указать функции, которые будут вызываться до и после загрузки страницы вот так:pdoPage.callbacks['before'] = function(config) {
console.log('Конфиг перед загрузкой!', config);
};
pdoPage.callbacks['after'] = function(config) {
console.log('Конфиг после загрузки!', config);
}Проверка данных в config позволит вам различить разные вызовы pdoPage на одной странице и сделать с ними что-то. Я, например, использую колбеки для вывода маски при загрузке.Заключение
Это бета версия, возможны ошибки и недоработки. Правда, касаться они могут только нового функционала, потому что старый я совсем не трогал.
Все новые параметры прописаны в сниппете, советую посмотреть:

Мастером javascript я себя назвать не могу, так что, если увидите недоработки в pdopage.js — присылайте исправления, буду рад.
За всю эту радость можно благодарить Wassi Wassinen, который заказал и оплатил эту доработку.
Комментарии: 108
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Пока что не пробовал следующую модель: если я использую mFilter2 и pdoPage в качестве пагинатора, будет ли работать новый вид пагинации? Я бегло посмотрел разметку, которую генерит мсёрч2 и сопоставил с требованиями, которые ты озвучил в описании (идентификаторы). Как я понимаю, нужно поменять обертку для фильтра и т.д., но будет ли тогда работать сам мФильтр2? :)
Еще раз благодарю за обновку!
Стандартная пагинация не должна работать, а кнопкой и скролом — могут. Проверяй.
Все как у взрослых:
Не всегда остается подгрузить число равное лимиту для страницы.
В этом году — всё, отдыхаю.
При этом правда на странице еще два вызова pdoPage, поэтому я этому &pageVarKey=`apage` поставил другой… но вот кнопка не появляется…
Подскажите)
Сделал тоже самое, только вынес этот код в контент страницы. До этого он вызывался прямо из шаблона. И после этого, все заработало…
Кто-нибудь знает почему?)
Он поймет, что от него хотят?
И должен ли input быть в form?
— Возможно я не верно понял смысл параметра.
Button генерирует кнопку, которая загрузит следующую страницу при клике. Никаких форм и инпутов не нужно.
2. Вызови mFilter2
3. Допиши javascript для скрытия кнопки на странице, когда больше нечего показывать:
4. По желанию можно добавить функцию setMore, которая будет писать сколько загрузится результатов на кнопке:
Вызов этой функции нужно раскомментировать в конце первой функции и добавить при загрузке страницы:
Вот так у меня на тесте всё работает, даже пагинация кнопками. Вот вся тестовая страница.
Мне не нужна пагинация. Просто кнопка.
Отображение оставшихся для загрузки товаров отображается, только если я применяю фильтры. При обычной пагинации — не показывает.
Если я подгружаю с помощью кнопки последнюю страницу (например, третью из трех) и обновляю страницу — мне показываются только результаты с последней страницы. То же самое происходит при обновлении второй страницы.
Наверное, у тебя не выводится на странице общее количество результатов, или оно не доступно по этому селектору:
У нас по-прежнему есть разбивка на страницы и по-прежнему результаты выдаёт pdoPage. При запросе 58й страницы тебе никто не будет грузить все 58 страниц сразу. Будет показана только запрошенная — так работает pdoPage.
Именно поэтому не нужно отключать пагинацию — чтобы юзер мог отмотать обратно.
Не совсем понимаю, что ты имеешь в виду, но поправил еще несколько ошибок в скриптах pdoPage и выложил новую версию.
У меня сейчас работает вот так minishop2.com/test.
Поясню: когда мы скроллим товары на странице (картинки, что угодно), мы запоминаем понравившиеся и отмечаем в памяти, что выше есть интересный товар (один или несколько). И вот мы добираемся до товара, на который хотим перейти. Переходим на его страницу, смотрим и возвращаемся кнопкой назад, к списку. Потому что помним, что где-то там, выше по этому списку, есть еще несколько товаров, которые нам понравились. А вместо этого видим последние десять позиций.
Вообще, мне уже жалко твоего покупателя — кажется, он и дорогу-то перейти не способен, не то что товар в магазине заказать.
Листает, листает, и случайно обновляет. А потом не помнит, что ему понравилось и найти не может, бедолага…
Здесь скорее вопрос не «способностей покупателя», а удобства и его терпеливости. :)
Что же до посетителей — они такие, какие есть. И за каждого идет борьба. Отказы, конверсия и прочая лабуда в метриках. Деньги, Василий, деньги. :)
Спасибо, что помог с разработкой. Перейдем к странице пользователя? Мне для нескольких, скажем так, бесплатных проектов — очень нужно.
В общем, не получается сделать как ты хочешь без серьёзного изменения mFilter2 или его скриптов.
Единственный нормальный вариант: кнопка + плавающая пагинация, как я предложил изначально, чтобы юзер мог свободно мотать страницы.
Вконтакте, например, по ссылке тоже загружается только указанная страница и листается вниз. Хочешь посмотреть предыдущие — кликай на пагинацию.
ругается на
надо
заменить на
только у меня на coffeescript написано
Заранее благодарен.
''Ничего криминального. Вместе с getPage все заработало моментом. Для pdoPage оказалось нужно в вызове указать &offset=`0`, и тоже все заработало как нужно. Включаю аякс, и часть страниц отдаются пустые…
cs.groza.ru/site/index.php?id=4&page=3
Вот эта пустая (если на нее перейти из пагинации)
JSON который я получаю от сервера:
Укажи свои селекторы в параметрах ajaxElemWrapper, ajaxElemRows и т.д. По-русски же вроде написано.
У всех разные сайты, разные offset и разное отношение к анимации. Всем не угодишь, поэтому есть возможность указывать свой файл со скриптами в параметре &frontend_js.
Как перезапустить pdoPage после обновления страницы Ajax.
Простая пагинация срабатывает, не срабатывает именно аяксовая пагинация.
В примере кода есть еще #project__holder по которому обновляется весь код (это нужно для того, что бы значения в сниппете [[!urlFilter]] поменять и отобразить результаты по нему) в нем соответственно и ajax pdoPage не грузит результаты. Как перезапустить ajax pdoPage?
С обычной пагинацией (без ajax) все нормально работает, результаты загружаются, т.е. вызов pdoPage нормально обновляется с ajax по #project__holder.
Василий подскажи, а где к пагинатору дописываются стили (не могу найти)? Например у меня вот это дописывается:
Верстку портит.
Там же подключается и sticky.
modx.pro/help/4653/
пробовал заново при аякс обновлении вызывать
Не помогло
изначально пагинация работает по кнопке, но стоит кликнуть что ни будь в фильтрах сверху она слетает (к примеру если в брендах выбрать Philips)
Фильтры аяксовые
Я не могу тебе подсказать, как связать одно с другим. Это надо лезть на твой сайт, разбираться как там что сделано и менять.
У меня, извини, желания нет.
У тебя при выборе фильтра возвращаются пустые блоки, разбирайся с этим.
А вот как при аякс обновлении перезапустить pdoPage который аяксовый не пойму.
И не нашел в системных настройках pdoTools где можно переопределить этот js-файл, а то постоянно при обновлении перезаписывается.
Можно ли ещё как-то отключить этот sticky не лезя в код компонента?
А у pdoTools такой сниппет всего один, так что логично было вынести это прямо ему в настройки.
Без использования класса pdoFetch, tv-параметр ресурсов можно получить следующим образом(методом getTVValue())
$resources = $modx->getCollection('modResource', array('parent' => $parent));
foreach ($resources as $resource) {
$tv=$resource->getTVValue('code'); }
так работает, но получается довольно медленно.
Как сделать тоже самое используя pdoFetch?
Делаю так:
// Подключаю класс
$pdo = $modx->getService('pdoFetch');
//Подключаю нужный tv
$pdo->setConfig(array(
'includeTVs' => 'code'
));
// Выбираю ресурсы
$resources = $pdo->getCollection('modResource', array('parent' => 58));
foreach ($resources as $resource) {
$tv=$resource->getTVValue('code');
}
и нифига… Что делаю не так?
2. pdoFetch нужен, чтобы выбрать всё сразу, за один запрос. Там нет объектов, getTVValue и прочего. Ты получаешь готовый массив с данными:
Вывод массива и лога выборки.
Я в шаблоне одной страницы выполняю вот такой код:
При этом ajax не работает и в консоли 2 ошибки. Скрипт и таблицу стилей подключить не может… На картинке видно.
Если я не использую frontend_js и frontend_css, то ajax срабатывает…
Подключаю теперь как:
Но при этом, у самого ms2Gallery есть такие же параметры, и получается, что подключается вот такой скрипт внизу страницы:
и вот такой:
То есть ms2gallery пытаеся по тому же пути подрубить свой скрипт. Получается, что я не смогу в параметрах сниппета подключить и свой скрипт для галереи и скрипт для pdoPage
Два подряд таких вызова не хотят работать…
docs.modx.pro/components/pdotools/snippets/pdopage
ajaxElemWrapper — jQuery селектор элемента-обёртки с результатами и пагинацией. По умолчанию #pdopage.
ajaxElemRows — jQuery селектор элемента с результатами. По умолчанию #pdopage .rows
ajaxElemPagination — jQuery селектор элемента с пагинацией. По умолчанию #pdopage .pagination
ajaxElemLink — jQuery селектор ссылки на страницу. По умолчанию #pdopage .pagination a
Как бы вроде все работает, вот только в браузере каждое нажатие «Показать еще» Меняет /page.
Т.е, в первом вызове нажимаем показать еще, и получаем user-profile.html?page=2
Во втором нажимаем и получаем user-profile.html?page=3
Вот только Материалы во втором идут как статья 1 2 3 4 5 6 13 14 15 16 17 18
А в первом 1 2 3 4 5 6 7 8 9 10 11 12
А если я еще раз нажму на первом Показать еще, то у него будет
1 2 3 4 5 6 7 8 9 10 11 12 19 20 21 22 23 ит…
Т.е каждый pdopage ориентируется на GET['page']…
Блин, вы бы сначала нормальную пагинацию настроили и проверили, а потом уже ajax включали, честное слово!
Не помню, как с кнопкой, но несколько вызовов default пагинации 100% работает на одной странице — проверял.
blog.ruyou-show.ru/user-profile.html?user=4 Вот тут можно потыкать кнопочки…
У любого из двух сниппетов, у второго пропадает кнопка «Показать еще»
1. Все так же как при 2. После первого нажатия кнопки «показать еще» включается режим На сколько это сложно? и как реализовать?)
Если при выводе mFilter2 включен параметр При первом открытии страницы неправильно выводит результат.
Он отображает кол-во всех категорий + кол-во всех товаров в них.
При переключении страницы или любой сортировке начинает выводить правильные результаты.
Так же При первом открытии страницы не отображает лог, при любой сортировке или переключении страницы, выводит.
А то выходит, что эти плейсхолдерам хочу префиксы, а те должны сами как-то работать.
Стоит об этом написать в мануалах docs.modx.pro/components/msearch2/snippets/mfilter2 в пункте про toSeparatePlaceholders.
Если есть желание — ты можешь сам добавить что-то в документацию, она открыта и доступна на GitHub.
Извините за вопрос не по теме, но мне никто не отвечает…
modx.pro/help/6173/
Может быть вы поможете на коммерческой основе или посоветуете исполнителя?
При заходе в карточку товара с подгруженной через ajax страницы и нажатии на кнопку «Назад» в браузере получаю:
т.е. получаю JSON массива подгруженной страницы на экране а не страницу /?page=2
Подскажите как это можно поправить?
Как сделать так, что бы кнопка не генерилась за счет шаблона — ajaxTplMore, а просто указать id/class этой кнопки которая уже сущестует?
Пример: подгрузка слайдов в слайдер через нажатие существующей кнопки — button next
Но можно написать свой javascript, используя возможности &ajax=`1`.
[[!pdoPage?
&element = `pdoResources`
&limit = `8`
&tvPrefix = `tv.`
&showHidden = `1`
&includeTVs = `news_img`
&tpl = `news_slider_section_tpl`
&ajaxMode = `button`
&ajaxElemMore = `.owl-next`
&ajaxElemRows = `#pdopage .rows .4-col-slider .owl-wrapper`
]]
вот такой вызов сниппета
правда кнопка ajaxTplMore генерируя но я ее убрал.
итак подружка новых ресурсов через ajax будет осуществляться через кастовую кнопку .owl-next и конечно же штатная btn-more.
Могу предоставить работоспособный вариант.
а как его перекинуть на первую страницу автоматом?
Заранее благодарен за помощь!
вывожу след:
и как только и поворачиваю колёсико на 1 щелчок. пропадают первые 8 новостей, и появляются след… Далее не чего не пропадает, а просто добавляются по 8. Такое же у меня и при баттон, нажимаю загрузить еще, первые 8 пропадают вторые 8 подгружаются, и после тоже самое что и со скролл.
И еще вопрос, должно ли так работать, что при каждом щелчке колеса мышки добавляются, в моём случаи, по 8 новостей. То есть я не до листываю до конца, а потом след 8 появляются, а именно 1 щелчок = 8 новостей
Копать я так понимаю надо в pdopage.min.js, но где именно?
Все равно, заворачивает блок навигации в еще один после клика на кнопке след. страницы и подгрузки результата
Если не использовать параметр ajaxMode, то такого эффекта нет
использую дефолтный код для вызова pdoPage
если нажать на переход на страницу в пагинации, то после Ajax загрузки пагинация оборачивается в еще один ul (хотя в документации сказано:
, также в документации неверный дефолтный чанк &tplPageWrapper
)
только при Ajax такое происходит, подскажите как правильно настроить?
Использую:
MODX Revolution 2.7.3-pl
PdoTools 2.12.7-pl