Вывод ресурсов при помощи pdoPage с разбивкой на страницы
Автор Алексей На чтение 5 мин. Опубликовано
Приветствую Вас уважаемые читатели. В прошлый раз мы выводили ресурсы при помощи pdoResources, если у вас ресурсов не более десятка то этого достаточно, а вот если сотни, не выводить же их все. Сегодня разберемся с выводом ресурсов при помощи pdoPage и с разбивкой их на страницы и сделаем свое оформление постраничной навигации (PdoPage + PageNav + Bootstrap 4).
Документация по PdoPage: docs.modx.pro/components/pdotools/snippets/pdopage
Возьмем туже аналогию что и с pdoResources, к примеру есть страница примерно с таким содержимым:
На нее выводятся категории или отдельные страницы, которых более 10 (на рисунке всего 6, но не суть), если все это добро вывести на одну страницу, то как минимум получится бесконечная простыня и в добавок скорость загрузки страницы упадет в разы. Так вот чтобы такого не случалось, желательно делить контент на отдельные страницы, ну или подгружать по аякс при нажатии об этом тоже будет урок)
Все делается по аналогии, по сути вывод через pdoPage особо не отличается от вывода через pdoResources, так что я не буду сейчас особо что то разъяснять, сейчас мы просто переделаем вывод через pdoResources из прошлого урока под вывод через pdoPage (весь статический код блока и его динамический код с чанком представлен здесь: Вывод ресурсов при помощи pdoResources. Если вы не читали эту статью, то вам желательно сначала посетить ее.
Итак наш вывод был таким:
<div> [[pdoResources? &parents=`7` &depth=`0` &tpl=`home` &includeTVs=`image` &sortdir=`ASC` ]] </div>
Переделаем его под pdoPage
<div> [[!pdoPage? &parents=`7` &depth=`0` &tpl=`home` &includeTVs=`image` &sortdir=`ASC` ]] </div>
Сейчас он выполняет точно такую же функцию, что и pdoResources.
А теперь давайте разобьем это все на страницы:
<div> [[!pdoPage? &parents=`7` &depth=`0` &tpl=`home` &includeTVs=`image` &sortdir=`ASC` &limit=`3` ]] </div> [[!+page.nav]]
Здесь мы добавили limit=3 — то есть выводить по 3 ресурса, а дальше [[!+page.nav]] выводим пагинацию.
В данном случае шаблон на bootstrap 3 и пагинация имеет нормальный вид. Если же ваш шаблон не на bootstrap 3, то скорее всего будет выводиться не оформленный список.
Делается это достаточно просто, на странице документации, вы найдете все стандартные шаблоны оформления pdopage.
Которые вам нужно будет подключить к выводу pdopage ну и соотвсетственно изменить под себя, вот пример оформления пагинации под bootstrap 4:
<div> [[!pdoPage? &parents=`3` &depth=`0` &tpl=`tpl-podcat` &includeTVs=`image` &sortdir=`ASC` &limit=`4` &tplPageWrapper=`@INLINE <nav aria-label="pagination"><ul>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></nav>` &tplPageFirst=`@INLINE <li><a href="[[+href]]">Первая</a></li>` &tplPageLast=`@INLINE <li><a href="[[+href]]">Последняя</a></li>` &tplPage=`@INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li>` &tplPageActive=`@INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li>` &tplPagePrev=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">«</span><span>Previous</span></a></li>` &tplPageNext=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">»</span><span>Next</span></a></li>` &tplPagePrevEmpty=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">«</span><span>Previous</span></a></li>` &tplPageNextEmpty=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">»</span><span>Next</span></a></li>` &tplPageFirstEmpty=`` &tplPageLastEmpty=`` ]] </div> [[!+page.nav]]
C первого взгляда выглядит довольно громозко и сложно, но это не так. Посмотрите видео как это все делается и вам станет все понятнее.
А если остались вопросы, задавайте в комментариях.
Пагинация pdoPage / Русскоязычное сообщество MODX
Добрый день!Делаю пагинацию на главной.
Вставляю код
[[!pdoPage?
&parents=`0`
&ajaxMode=`button`
&limit=`5`
]]
[[!+page.nav]]И это только начало. Остальную часть кода ошибки не буду приводить.Array ( [plPrefix] => [maxLimit] => 100 [page] => 1 [pageVarKey] => page [pageLimit] => 5 [element] => pdoResources [pageNavVar] => page.nav [pageCountVar] => pageCount [tplPage] => @INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li> [tplPageWrapper] => @INLINE <div><ul>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></div> [tplPageActive] => @INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li> [tplPageFirst] => @INLINE <li><a href="[[+href]]">[[%pdopage_first]]</a></li> [tplPageLast] => @INLINE <li><a href="[[+href]]">[[%pdopage_last]]</a></li> [tplPagePrev] => @INLINE <li><a href="[[+href]]">«</a></li> [tplPageNext] => @INLINE <li><a href="[[+href]]">»</a></li> [tplPageSkip] => @INLINE <li><span>...</span></li> [tplPageFirstEmpty] => @INLINE <li><span>[[%pdopage_first]]</span></li> [tplPageLastEmpty] => @INLINE <li><span>[[%pdopage_last]]</span></li> [tplPagePrevEmpty] => @INLINE <li><span>«</span></li> [tplPageNextEmpty] => @INLINE <li><span>»</span></li> [cache] => [cacheTime] => 3600 [cacheAnonymous] => [ajax] => 1 [ajaxMode] => button [ajaxElemWrapper] => #pdopage [ajaxElemRows] => #pdopage .rows [ajaxElemPagination] => #pdopage .pagination [ajaxElemLink] => #pdopage .pagination a [ajaxElemMore] => #pdopage .btn-more [ajaxTplMore] => @INLINE <button>[[%pdopage_more]]</button> [setMeta] => 1 [request] => Array
Если меняю
&parents=`0`&parents=`1`Подскажите, в чем ошибка, и что исправить. Только доступным языком для начинающего. Спасибо!
pdoPage как замена getPage / Сниппеты / Modx Revolution / Технический блог веб-разработчика
pdoPage как замена getPage
getPage
Сниппет getPage используется для создания пагинации. Используется совместно со сниппетом getResources и как бы является его обёрткой.Параметры сниппета:
&element=`getResources` — имя сниппета для вывода ресурсов. Поскольку, getPage работает с getResources, то обычно в качестве значения параметра передаётся — getResources.
&limit=`3` — здесь указывается сколько элементов будет показано на странице. Другими словами, исходя из этого значения, будет зависеть то, из скольких страниц будет зависеть пагинация.
&pageNavOuterTpl=`wrapper_p` — чанк-обёртка для вывода всех страниц. Пример чанка:
<ul>[[+pages]]</ul>
&pageActiveTpl=`active_p` — чанк для вывода текущей страницы. Пример чанка:
<span>[[+pageNo]]</span>
&pageNavTpl=`page_p` — чанк ссылки на страницу. Пример чанка:
<a href="[[+href]]">[[+pageNo]]</a>
Напоминаю, что сниппет является обёрткой для getResources, поэтому в нём доступны параметры getResources. Например:
[[!getPage?
&element=`getResources`
&tpl=`blog_item`
&includeContent=`1`
&includeTVs=`image, gallery, video`
&limit=`3`
&pageNavOuterTpl=`wrapper_p`
&pageActiveTpl=`active_p`
&pageNavTpl=`page_p`
]]
После вывода сниппета, становится доступен плэйсхолдер [[!+page.nav]], в котором собственно и находится вся пагинация.
pdoPage
Как и в случае с остальными сниппетами pdoTools, pdoPage отличается от своего предшественника большей функциональностью, а именно: возможность создания пагинации с пропуском страниц и поддержка ajax из коробки. Ну и кроме того, возможность более гибко настраивать сниппет, задавая дополнительные параметры. Сниппет является обёрткой для pdoResources.
Отличия от getPage:
tplPageWrapper используется вместо pageNavOuterTpl
tplPageActive используется вместо pageActiveTpl
tplPage используется вместо pageNavTpl
Пример использования:
[[!getPage?
&element=`getResources`
&tpl=`blog_item`
&includeContent=`1`
&includeTVs=`image, gallery, video`
&limit=`3`
&tplPageWrapper=`@INLINE [[+pages]]`
&tplPageActive=`@INLINE <span>[[+pageNo]]</span>`
&tplPage=`@INLINE <a href=»[[+href]]»>[[+pageNo]]</a>`
]]
Если на странице указано 2 или более вызова данного сниппета, следующие параметры должны отличаться :
&pageVarKey=`page_all` — имя переменной, через которую будет передаваться номер страницы.
&pageNavVar=`all_pages` — имя плейсхолдера для вывода пагинации.
Если сниппет указан только один раз, то указывать их не обязательно, поскольку их значение задано по умолчанию.
pdoPage не выводит content / Русскоязычное сообщество MODX
Вызываю pdoPage так:[[!pdoPage?
&parents=`[[*id]]`
&includeContent=`1`
&tpl=`testimonialsPage`
]]0.0002260: pdoTools loaded
0.0000489: xPDO query object created
0.0005970: Added selection of modResource: SQL_CALC_FOUND_ROWS `id`, `type`, `contentType`, `pagetitle`, `longtitle`, `description`, `alias`, `link_attributes`, `published`, `pub_date`, `unpub_date`, `parent`, `isfolder`, `introtext`, `content`, `richtext`, `template`, `menuindex`, `searchable`, `cacheable`, `createdby`, `createdon`, `editedby`, `editedon`, `deleted`, `deletedon`, `deletedby`, `publishedon`, `publishedby`, `menutitle`, `donthit`, `privateweb`, `privatemgr`, `content_dispo`, `hidemenu`, `class_key`, `context_key`, `content_type`, `uri`, `uri_override`, `hide_children_in_tree`, `show_in_tree`, `properties`
0.0007119: Processed additional conditions
0.0011549: Added where condition: modResource.parent:IN(49,50,51), modResource.published=1, modResource.deleted=0
0.0001681: Sorted by modResource.publishedon, DESC
0.0000041: Limited to 10, offset 0
0.0004070: SQL prepared "SELECT SQL_CALC_FOUND_ROWS `modResource`.`id`, `modResource`.`type`, `modResource`.`contentType`, `modResource`.`pagetitle`, `modResource`.`longtitle`, `modResource`.`description`, `modResource`.`alias`, `modResource`.`link_attributes`, `modResource`.`published`, `modResource`.`pub_date`, `modResource`.`unpub_date`, `modResource`.`parent`, `modResource`.`isfolder`, `modResource`.`introtext`, `modResource`.`content`, `modResource`.`richtext`, `modResource`.`template`, `modResource`.`menuindex`, `modResource`.`searchable`, `modResource`.`cacheable`, `modResource`.`createdby`, `modResource`.`createdon`, `modResource`.`editedby`, `modResource`.`editedon`, `modResource`.`deleted`, `modResource`.`deletedon`, `modResource`.`deletedby`, `modResource`.`publishedon`, `modResource`.`publishedby`, `modResource`.`menutitle`, `modResource`.`donthit`, `modResource`.`privateweb`, `modResource`.`privatemgr`, `modResource`.`content_dispo`, `modResource`.`hidemenu`, `modResource`.`class_key`, `modResource`.`context_key`, `modResource`.`content_type`, `modResource`.`uri`, `modResource`.`uri_override`, `modResource`.`hide_children_in_tree`, `modResource`.`show_in_tree`, `modResource`.`properties` FROM `modx_site_content` AS `modResource` WHERE ( `modResource`.`parent` IN (49,50,51) AND `modResource`.`published` = 1 AND `modResource`.`deleted` = 0 ) ORDER BY modResource.publishedon DESC LIMIT 10 "
0.0000949: SQL executed
0.0001969: Total rows: 2
0.0000350: Rows fetched
0.0034840: Loaded "modChunk" with name "testimonialsPage"
0.0065081: Returning processed chunks
0.0097132: Total time
9 437 184: Memory usageModx Revolution pdoPage и Bootstrap 4
На текущий момент компоненты pdoTools для MODX Revolution и в том числе pdoPage работают из коробки со старой версией Bootstrap, а для нового Bootstrap 4 есть такое решение, для корректного отображения пагинации (разбивка статей на страницы).
[[!pdoPage?
&tpl=`tpl_usluga`
&limit=`10`
&parents=`[[*id]]`
&tplPageWrapper=`@INLINE <nav aria-label="pagination"><ul>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></nav>`
&tplPageFirst=`@INLINE <li><a href="[[+href]]">Первая</a></li>`
&tplPageLast=`@INLINE <li><a href="[[+href]]">Последняя</a></li>`
&tplPage=`@INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li>`
&tplPageActive=`@INLINE <li><a href="[[+href]]">[[+pageNo]]</a></li>`
&tplPagePrev=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">«</span><span>Previous</span></a></li>`
&tplPageNext=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">»</span><span>Next</span></a></li>`
&tplPagePrevEmpty=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">«</span><span>Previous</span></a></li>`
&tplPageNextEmpty=`@INLINE <li><a href="[[+href]]"><span aria-hidden="true">»</span><span>Next</span></a></li>`
]]
<div>
[[!+page.nav]]
</div>
Или на Fenom
{$_modx->runSnippet('!pdoPage', [
'parents' => $_modx->resource.id,
'tpl' => 'one_article',
'limit' => 4,
'includeTVs' => 'image',
'tplPageWrapper' => '@INLINE <nav aria-label="pagination"><ul>{$first}{$prev}{$pages}{$next}{$last}</ul></nav>'
'tplPageFirst' => '@INLINE <li><a href="{$href}">1Первая1</a></li>'
'tplPageLast' => '@INLINE <li><a href="{$href}">Последняя</a></li>'
'tplPage' => '@INLINE <li><a href="{$href}">{$pageNo}</a></li>'
'tplPageActive' => '@INLINE <li><a href="{$href}">{$pageNo}</a></li>'
'tplPagePrev' => '@INLINE <li><a href="{$href}"><span aria-hidden="true">«</span><span>Previous</span></a></li>'
'tplPageNext' => '@INLINE <li><a href="{$href}"><span aria-hidden="true">»</span><span>Next</span></a></li>'
'tplPagePrevEmpty' => '@INLINE <li><a href="{$href}"><span aria-hidden="true">«</span><span>Previous</span></a></li>'
'tplPageNextEmpty' => '@INLINE <li><a href="{$href}"><span aria-hidden="true">»</span><span>Next</span></a></li>'
])}
{$_modx->getPlaceholder('page.nav')}
Как фильтровать данные tv в modx через pdoPage
На modx можно делать интересные вещи. Не зря много веб-компаний делают порталы, интернет-магазины, мощные сервисы бронирования и другие сайты. Кроме того, modx входит в ТОП бесплатных CMS.
Но что-то я далеко зашел. Одним из нужных функционалов есть фильтрацией данных по определенному критерию. И в этой статье я хочу написать вам несколько примеров как фильтровать и выводить данные на modx с помощью pdoPage, в том числе и с дополнительных полей (tv).
Выводим данные с дополнительного поля с фильтрацией where
Не забываем, что при использовании дополнительных полей в pdoPage их нужно прописать в includeTVs:
[[!pdoPage? &parents=`76` &includeTVs=`status, start, minimum` &where=`{«status»:»Заявка»}` &tpl=`@INLINE <a href=»[[+uri]]»>[[+pagetitle]]</a>: [[+tv.status]]; от [[+tv.start]]; минимум [[+tv.minimum]] ` &limit=`10` ]]
[[!pdoPage? &parents=`76` &includeTVs=`status, start, minimum` &where=`{«status»:»Заявка»}` &tpl=`@INLINE <a href=»[[+uri]]»>[[+pagetitle]]</a>: [[+tv.status]]; от [[+tv.start]]; минимум [[+tv.minimum]] ` &limit=`10` ]] |
По коду:
!pdoPage = вызов сниппета, не кешируемый (знак восклицания).
parents = родительский элемент (если документы у вас в корне, то ставьте 0)
includeTVs = включает дополнительные поля для вывода
where = фильтрация запроса (в моем примере поле «статус» должно быть «Заявка»). Кстати, есть нюанс если стоит «поле по умолчанию» в настройке ввода дополнительного поля. Об этом позже.
tpl = шаблон вывода. В примере идет название статьи с активной ссылкой, дальше статус и еще два дополнительных поля.
limit = максимальное количество пунктов для вывода.
Примеры использования where в pdoPage modx revolution
Несколько примеров самого where:
&where = `{«start:>» : «10.01.2018»}` &where=`{«minimum:>» : «100$»}` &where = `{«status» : «Выполнено»}` &where = `{«minimum:>=» : «1000»}` &where = `{«status:!=» : «Архив»}` &where = `{«minimum:!=» : «100»}` &where=`{«pagetitle:LIKE»:»%rent%», «AND:minimum:LIKE»:»%$%»}` &where=`{«pagetitle:LIKE»:»%rent%», «OR:status:=»:»Заявка»}` &where=`{«minimum:=»:»100$», «OR:status:=»:»Оплачено»}` &where=`{«minimum:=»:»100$», «OR:status:=»:»Оплачено», «OR:start:=»:»20.03.2018″}`
&where = `{«start:>» : «10.01.2018»}` &where=`{«minimum:>» : «100$»}` &where = `{«status» : «Выполнено»}` &where = `{«minimum:>=» : «1000»}` &where = `{«status:!=» : «Архив»}` &where = `{«minimum:!=» : «100»}` &where=`{«pagetitle:LIKE»:»%rent%», «AND:minimum:LIKE»:»%$%»}` &where=`{«pagetitle:LIKE»:»%rent%», «OR:status:=»:»Заявка»}` &where=`{«minimum:=»:»100$», «OR:status:=»:»Оплачено»}` &where=`{«minimum:=»:»100$», «OR:status:=»:»Оплачено», «OR:start:=»:»20.03.2018″}` |
Обратите внимание на комбинированные запросы (AND, OR). В них для значений «равно» нужно писать := . Для неизвестной части значения знаки процентов %. Запросы могут быть и длиннее. Также обращайте внимание на формат дат, особенно в Дополнительных полях с Параметров ввода Дата.
Фильтр данных в pdoMenu modx
Все примеры выше также подойдут и для pdoMenu.
[[pdoMenu? &parents=`76` &level=`1` &includeTVs=`status, start, minimum` &where=`{«minimum:=»:»1$», «OR:status:=»:»Заявка»}` &tpl=`sideall` &limit=`10` &sortdir=`DESC` &sortby=`publishedon` ]]
[[pdoMenu? &parents=`76` &level=`1` &includeTVs=`status, start, minimum` &where=`{«minimum:=»:»1$», «OR:status:=»:»Заявка»}` &tpl=`sideall` &limit=`10` &sortdir=`DESC` &sortby=`publishedon` ]] |
Не выводит дополнительное поле в where через pdoPage modx
Это может быть из-за того, что забыли указать includeTVs. Также я столкнулся с такой проблемой в modx revolution 2.5.7-pl, версия pdoTools 2.9.2-pl1. Не выводило данные, которые в Параметрах ввода дополнительного поля стояли По умолчанию. Хотя в некоторых других частях кода все работало. Как только я убрал данные (заменил по умолчанию на пробел) сразу все заработало.
Фильтр данных на modx с помощью pdoPage[pdoPage] MIGX getImageList изменяет image url / Русскоязычное сообщество MODX
Всем добра.Ситуация такая, на странице вывожу элементы «мнения» из MIGX через сниппет getImageList. Все хорошо выводит. Довольный. Понятное дело если ввести таких элементов 50 штук, то как-то не красиво будет, нужна пагинация! Взял pdoPage и прикрутил к нему вызов getImageList, как это получилось:
<div>
<div>
<div>
<h3>[[getResourceField? &id=`57`]]</h3>
</div>
<div>
[[!+page.nav]]
</div>
</div>
<div>
[[!pdoPage?
&element=`getImageList`
&docid=`57`
&tvname=`opinion-partner`
&limit=`2`
&tpl=`tpl_opinion_item`
&where=`{"active:=":"1"}`
&totalVar=`opinionTotal`
&ajaxMode=`default`
&tplPageWrapper=`@INLINE <div><ul>[[+prev]]<li><span>Ещё мнения</span></li>[[+next]]</ul></div>`
&tplPagePrev=`@INLINE <li><a href="[[+href]]">← </a></li>`
&tplPageNext=`@INLINE <li><a href="[[+href]]"> →</a><li>`
&tplPagePrevEmpty=`@INLINE <li><span>← </span></li>`
&tplPageNextEmpty=`@INLINE <li><span> →</span></li>`
]]
</div>
</div>Теперь открываю я TV, тот который MIGX, opinion-partner и меняю в закладке «Источники файлов» с Filesystem на «Изображения», ну и понятное дело захожу в ресурс к которому привязан TV и пересохраняю изображения. Обновляю страничку на сайте, все отлично все показывает. НО!
Клацаю я на «сюдом» и… как вы думаете?
— правильно! без перезагрузки страницы подгружаются следующие 2 мнения, но с одним нюансом!
А теперь, собственно, НЮАНС:
— ссылки на изображения
были ссылки такого вида: assets/img/img-1.jpg
стали ссылки такого вида: img-1.jpg
Что самое интересное, если обновить страницу (F5) то изображения загружаются с правильными путями.
Куда копать?
P.S. Если исключить &ajaxMode=`default`то с перезагрузкой все отлично работает. но нужен то АЯКС! 🙂