From c66f3eed7b2cbae5ee127130e9967253d52ac54b Mon Sep 17 00:00:00 2001 From: ShevArtV Date: Wed, 8 Jan 2025 17:42:25 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=A3=D1=82=D0=BE=D1=87=D0=BD=D0=B8=D0=BB?= =?UTF-8?q?=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5=D1=82=D1=80=D1=8B=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B5=D1=81=D0=B5=D1=82=D0=B0=20=D0=B8=20=D0=B8?= =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=20=D0=B4=D0=BB=D1=8F?= =?UTF-8?q?=20=D0=BF=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=D1=86=D0=B8=D0=B8=20?= =?UTF-8?q?=D1=81=20=D0=B4=D0=B8=D0=BD=D0=B0=D0=BC=D0=B8=D1=87=D0=B5=D1=81?= =?UTF-8?q?=D0=BA=D0=B8=D0=BC=D0=B8=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/sendit/pagination.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/components/sendit/pagination.md b/docs/components/sendit/pagination.md index 6b19e5a9..f40c471a 100644 --- a/docs/components/sendit/pagination.md +++ b/docs/components/sendit/pagination.md @@ -133,7 +133,8 @@ 'setTotal' => 1, 'pagination' => 'three', 'resultBlockSelector' => '[data-pn-result="three"]', - 'resultShowMethod' => 'insert' + 'resultShowMethod' => 'insert', + 'hashParams' => 'pagination,limit,presetName,query' ]} @@ -165,6 +166,7 @@ ```php:line-numbers switch($modx->event->name) { case 'OnBeforePageRender': + $SendIt->params['query'] = $_REQUEST['query'] ?? ''; if($_REQUEST['query']){ $SendIt->params['where']['pagetitle:LIKE'] = '%' . $_REQUEST['query'] . '%'; } From 369df782db93c6cf4b8b3666372ad7f4541db127 Mon Sep 17 00:00:00 2001 From: ShevArtV Date: Wed, 8 Jan 2025 18:06:07 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=A3=D1=82=D0=BE=D1=87=D0=BD=D0=B8=D0=BB?= =?UTF-8?q?=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5=D1=82=D1=80=D1=8B=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B5=D1=81=D0=B5=D1=82=D0=B0=20=D0=B8=20=D0=B8?= =?UTF-8?q?=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=B4=20?= =?UTF-8?q?=D0=BF=D0=BB=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=20=D0=B4=D0=BB=D1=8F?= =?UTF-8?q?=20=D0=BF=D0=B0=D0=B3=D0=B8=D0=BD=D0=B0=D1=86=D0=B8=D0=B8=20?= =?UTF-8?q?=D1=81=20=D0=B4=D0=B8=D0=BD=D0=B0=D0=BC=D0=B8=D1=87=D0=B5=D1=81?= =?UTF-8?q?=D0=BA=D0=B8=D0=BC=D0=B8=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/sendit/pagination.md | 164 ++++++++++++++++++++------- 1 file changed, 123 insertions(+), 41 deletions(-) diff --git a/docs/components/sendit/pagination.md b/docs/components/sendit/pagination.md index f40c471a..135a1345 100644 --- a/docs/components/sendit/pagination.md +++ b/docs/components/sendit/pagination.md @@ -7,13 +7,14 @@ :::tip Вы можете вызывать сниппет **Pagination** на одной странице столько раз сколько вам нужно. ::: + ## Базовое использование -Пагинация работает почти так же как и pdoPage, только не требует подключения jQuery и не имеет списка страниц. Разметка должна быть такой +Пагинация работает почти так же как и pdoPage, только не требует подключения jQuery. Разметка должна быть такой -```html:line-numbers +```fenom:line-numbers
- {'!Pagination' | snippet: [ + {'!Pagination' | snippet: [ 'parents' => 7, 'query' => '', 'snippet' => '!Pagination', @@ -27,24 +28,26 @@ 'pagination' => 'one', 'resultBlockSelector' => '[data-pn-result="one"]', 'resultShowMethod' => 'insert' - ]} + ]}
+ {set $totalPages = 'one.totalPages' | placeholder} {set $currentPage = 'one.currentPage' | placeholder} {set $limit = 'one.limit' | placeholder} +
- -
- - - -

из {$totalPages?:1}

- - -
+ +
+ + + +

из {$totalPages?:1}

+ + +
-

Показывать по

+

Показывать по

``` @@ -77,12 +80,85 @@ Поля для ввода номера страницы и лимита ОБЯЗАТЕЛЬНО должны существовать. ::: +## Пагинация со списком страниц + +Это классический вариант постраничной навигации, при котором выводится список ссылок на другие доступные страницы. + +```fenom:line-numbers +
+ {'!Pagination' | snippet: [ + 'parents' => 7, + 'query' => '', + 'snippet' => '!Pagination', + 'render' => '!pdoResources', + 'presetName' => 'pagination-classic', + 'tpl' => '@FILE chunks/pdoresources/item.tpl', + 'tplEmpty' => '@FILE chunks/pdoresources/empty.tpl', + 'limit' => 6, + 'includeContent' => 1, + 'setTotal' => 1, + 'pagination' => 'four', + 'resultBlockSelector' => '[data-pn-result="four"]', + 'resultShowMethod' => 'insert', + 'maxPageListItems' => 6, + 'tplPageListItem' => 'siPageListItem', + 'tplPageListWrapper' => 'siPageListWrapper', + ]} +
+ + +{set $totalPages = 'four.totalPages' | placeholder} +{set $currentPage = 'four.currentPage' | placeholder} +{set $limit = 'four.limit' | placeholder} +{set $pageList = 'four.pageList' | placeholder} + +
+ +
    + {$pageList} +
+ +

Показывать по

+
+``` + +:::tip +Для того, чтобы выводился список страниц, обязательно нужно указать значение для параметра *maxPageListItems*. И добавить в шаблон html-элемент с атрибутом *data-pn-list* +::: + +Чанк по умолчанию для обёртки списка выглядит так + +```html:line-numbers +
  • <<
    • +
  • <
    • +{$items} +
  • >
    • +
  • >>
    • +``` + +Чанк по умолчанию для элемента списка выглядит так + +```html:line-numbers +
  • {$page}
    • +``` + +:::warning +Атрибут *data-pn-page* обязательный. +::: + +В обоих чанках доступны плейсхолдеры + +* **currentPage** - номер текущей страницы. +* **totalPages** - общее число страниц. +* **pageKey** - значение параметра *pagination*. + ## Загрузка страниц при прокрутке + Для отслеживания прокрутки используется Intersection Observer API. Разметка для этого способа гораздо проще. В форме есть только два обязательных поля, сама форма скрыта и содержит атрибут **data-pn-type="scroll"** -```html:line-numbers +```fenom:line-numbers
    - {'!Pagination' | snippet: [ + {'!Pagination' | snippet: [ 'parents' => 7, 'snippet' => '!Pagination', 'render' => '!pdoResources', @@ -95,32 +171,35 @@ 'pagination' => 'two', 'resultBlockSelector' => '[data-pn-result="two"]', 'resultShowMethod' => 'append' - ]} + ]}
    + {set $twoTotalPages = 'two.totalPages' | placeholder} {set $twoCurrentPage = 'two.currentPage' | placeholder} {set $twoLimit = 'two.limit' | placeholder} +
    - - + +
    ``` ## Пагинация с динамическими параметрами -С pdoPage было крайне хлопотно сделать так, чтобы можно было динамически менять параметры вызова сниппета и сохранить пагинацию. -Данный функционал может понадобиться, если вы хотите сделать поиск не на отдельной странице, а прямо в каталоге. +С pdoPage было крайне хлопотно сделать так, чтобы можно было динамически менять параметры вызова сниппета и сохранить пагинацию. + +Данный функционал может понадобиться, если вы хотите сделать поиск не на отдельной странице, а прямо в каталоге. Ниже я приведу пример самого простого варианта решения данной задачи. -```html:line-numbers +```fenom:line-numbers
    - +
    - {'!Pagination' | snippet: [ + {'!Pagination' | snippet: [ 'parents' => 7, 'query' => '', 'snippet' => '!Pagination', @@ -135,22 +214,24 @@ 'resultBlockSelector' => '[data-pn-result="three"]', 'resultShowMethod' => 'insert', 'hashParams' => 'pagination,limit,presetName,query' - ]} + ]}
    + {set $totalPages = 'three.totalPages' | placeholder} {set $currentPage = 'three.currentPage' | placeholder} {set $limit = 'three.limit' | placeholder} +
    - - - -

    из {$totalPages?:1} -

    - - + + + +

    из {$totalPages?:1} +

    + +

    Показывать по

    @@ -163,21 +244,22 @@ ::: Для того, чтобы работал поиск нужно написать плагин, который добавит в вызов сниппета **pdoResources** параметр **where** + ```php:line-numbers -switch($modx->event->name) { - case 'OnBeforePageRender': - $SendIt->params['query'] = $_REQUEST['query'] ?? ''; - if($_REQUEST['query']){ - $SendIt->params['where']['pagetitle:LIKE'] = '%' . $_REQUEST['query'] . '%'; - } - break; +switch ($modx->event->name) { + case 'OnBeforePageRender': + $SendIt->params['query'] = $_REQUEST['query'] ?? ''; + if ($_REQUEST['query']){ + $SendIt->params['where']['pagetitle:LIKE'] = '%' . $_REQUEST['query'] . '%'; + } + break; } ``` -Теперь будет работать поиск ресурсов по заголовку и вывод результатов с постраничной навигацией. +Теперь будет работать поиск ресурсов по заголовку и вывод результатов с постраничной навигацией. :::warning -Если вы захотите сделать фильтрацию результатов по нескольким свойствам, то нужно в вызове сниппета **Pagination** указать параметр **hashParams**, +Если вы захотите сделать фильтрацию результатов по нескольким свойствам, то нужно в вызове сниппета **Pagination** указать параметр **hashParams**, где через запятую нужно перечислить ключи параметров фильтрации. Это нужно для того, чтобы при смене значения любого из параметров отображение страниц начиналось с первой. :::