PageBlocks стал ещё мощнее — теперь с пагинацией, сортировкой и фильтрацией

Пагинация

'showPagination' => 1,
'pageVar' => 'page',
'pageLink' => '?{pageVar}={page}',

• showPagination — включает или отключает пагинацию (1 — включена, 0 — выключена).
• pageVar —имя GET-параметра, обозначающего текущую страницу (по умолчанию page).
• pageLink — шаблон для генерации ссылок. Может быть классическим ?page=2 или красивым URL, вроде /page-2. По умолчанию ?{pageVar}={page}

Пример через GET-параметры:

{'!pbResources' | snippet: [
    'fieldName' => 'products',
    'tpl' => '@FILE chunks/product.tpl',
    'toPlaceholder' => 'pls.products', // Результат записываем в плейсхолдер
    'limit' => 12,
    'showPagination' => 1,
    'pageLink' => '?page={page}' // Стандартное значение можно опустить
]}

Вывод данных на странице

<span id="pb-total">
    {'pls.total' | placeholder}
</span>

• targetTotal — изменяет ID HTML-элемента
• plsTotal — задает имя плейсхолдера

<div id="pb-items">
    {'pls.products' | placeholder}
</div>

• targetItems — меняет ID контейнера

<nav id="pb-pagination" aria-label="Page navigation">
    {'pls.pagination' | placeholder}
</nav>

• targetPagination — изменяет ID навигации
• plsPagination — задает имя плейсхолдера

Реализация через ЧПУ (чистые URL)

'pageLink' => '/page-{page}'

Что для этого нужно:

Route::get('/page-{page}', 'ProductController@index');

class ProductController extends Controller
{
    public function index(int $page)
    {
        // Указываем ресурс, где отображаются продукты
        $this->modx->resource = $this->modx->getObject(\modResource::class, 1);
        
        return view('file:templates/base', [
            'page' => $page, // передаём номер страницы в шаблон, если нужен
        ]);
    }
}

Кнопка «Загрузить еще»

<div class="d-flex js-center">
    {'pls.loadmore'|placeholder}
</div>

'plsLoadmore' => 'pls.loadmore',
'clsLoadmore' => 'btn btn-lg btn-outline-secondary w-100',
'tplLoadmore' => '@INLINE <button type="button" class="{$classes}" data-pbloadmore>{"pb.btn.loadmore" | lexicon}</button>'

• plsLoadmore — имя плейсхолдера для кнопки;
• clsLoadmore — CSS-классы для стилизации;
• tplLoadmore — шаблон кнопки.

Бесконечная прокрутка (infinite scroll)

'infiniteScroll' => 1,
'infiniteOffsetScroll' => 200, // сколько пикселей от низа до подгрузки

Сортировка

'sortVar' => 'sort',
'sortLink' => '?{sortVar}={sort}',

• sortVar — имя переменной, отвечающей за текущую сортировку. По умолчанию — sort.
• sortLink — шаблон для формирования ссылок сортировки. Может быть в формате GET (?sort=...) или «чистым» URL (/sort-...).

<div class="form-floating ms-auto" data-pbsort>
    <select name="sort" class="form-select" aria-label="Sorting">
        <option value="id-asc" selected>Oldest first</option>
        <option value="id-desc">Newest first</option>
        <option value="price-asc">From cheap to expensive</option>
        <option value="price-desc">From expensive to cheap</option>
        <option value="rating-asc">Rating asc</option>
        <option value="rating-desc">Rating desc</option>
    </select>
    <label for="floatingSelect">Sort products</label>
</div>

Кастомизация значений сортировки

'sortNames' => 'expensive==price-desc,cheap==price-asc'

<div class="form-floating ms-auto" data-pbsort>
    <select name="sort" class="form-select" aria-label="Sorting">
        <option value="id-asc" selected>Oldest first</option>
        <option value="id-desc">Newest first</option>
        <option value="cheap">From cheap to expensive</option>
        <option value="expensive">From expensive to cheap</option>
        <option value="rating-asc">Rating asc</option>
        <option value="rating-desc">Rating desc</option>
    </select>
    <label for="floatingSelect">Sort products</label>
</div>

Пример через «чистый» URL

'sortLink' => '/{sortVar}={sort}',

Route::get('/sort-{sortName}', 'ProductController@sort');

public function sort(string $sortName)
    {
        $this->modx->resource = $this->modx->getObject(\modResource::class, 1);
        [$sortby, $sortdir] = $this->getSort($sortName);

        return view('file:templates/base', [
            'sortby' => $sortby,
            'sortdir' => $sortdir,
            'sortName' => $sortName
        ]);
    }

    public function getSort(string $sortName): array
    {
        [$sortby, $sortdir] = explode('-', $sortName);
        switch ($sortName) {
            case 'cheap':
                $sortby = 'price';
                $sortdir = 'asc';
                break;
            case 'expensive':
                $sortby = 'price';
                $sortdir = 'desc';
                break;
        }

        return [$sortby, $sortdir];
    }

Комбинирование пагинации и сортировки в ЧПУ

'pageLink' => '/page-{page}',
'sortLink' => '/sort-{sort}',

Route::get('/page-{page}/{sort?}', 'ProductController@index');

Фильтрация

{'!pbFilters' | snippet: [
    'fieldName' => 'products',
    'filterFields' => 'price,category,brand,size,color',

    // price — range input
    'tpl.item.price' => '@FILE chunks/filters/price.tpl',

    // brand — select
    'tpl.wrapper.brand' => '@FILE chunks/filters/select.tpl',
    'tpl.item.brand' => '@INLINE <option value="{$value}">{$name}</option>',

    // size — radio buttons
    'tpl.item.size' => '@FILE chunks/filters/radio.tpl',
]}

'filterFields' => 'price,category,brand,size,color',

'filterLink' => '?{name}={value}', // фильтр в виде ?price=100&brand=nike

• filterLink — шаблон для формирования ссылок фильтров.

Фильтры в «чистом» URL

'filterLink' => '/{name}-{value}',
'filterSeparator' => ';',

/filter/category-10002;brand-nike/

Route::get('/filter/{filters}', 'ProductController@filter');

public function filter(string $filters)
{
    $this->modx->resource = $this->modx->getObject(\modResource::class, 1);

    return view('file:templates/base');
}

Фильтры + пагинация + сортировка

/filter/category-10002;brand-nike/page-2/sort-cheap

'filterLink' => '/{name}-{value}',
'pageLink' => '/page-{page}',
'sortLink' => '/sort-{sort}',

Route::get('/filter/{filters}/{page?}', 'ProductController@filter'); // фильтры с пагинацией
Route::get('/filter/{filters}/{page?}/sort-{sortName}', 'ProductController@filter'); // фильтры + пагинация + сортировка

JavaScript API

pbPagination.next() // загружает следующую страницу
pbPagination.next('beforeend')  // подгружает следующую страницу (аналог кнопки "загрузить еще")
pbPagination.prev() // загружает предыдущую страницу
pbPagination.loadPage(2) // загружает необходимую страницу
pbPagination.sort('price', 'desc') // обновляет сортировку
pbPagination.sort('cheap') // если заполнен параметр sortNames
pbPagination.filter('brand', 'adidas') // добавляем фильтр
pbPagination.filter('brand', '') // удаляет фильтр brand
pbPagination.filter('category', [10002,10003]) // добавляет несколько значений для фильтра

События

• method — метод запроса (`GET`, `POST`)
• url — адрес запроса
• target — селектор DOM-элемента, куда вставлять ответ
• options — все переданные опции (`headers`, `body`, `form`, `expect`, и т.п.)

document.addEventListener('pb:before', (e) => {
    console.log('Запрос собирается отправиться:', e.detail.url);

    // Пример отмены запроса
    if (e.detail.url.includes('admin')) {
        e.preventDefault(); // Запрос не отправится
    }
});

• url — адрес запроса

document.addEventListener('pb:progress:start', (e) => {
    console.log('Индикатор загрузки включён для:', e.detail.url);
});

• url — адрес запроса

document.addEventListener('pb:progress:end', (e) => {
    console.log('Индикатор загрузки выключен:', e.detail.url);
});

• method
• url
• target
• response — объект Response

document.addEventListener('pb:success', (e) => {
    console.log('Успешный ответ:', e.detail.response);
});

• method
• url
• target
• response — объект Response
• data — HTML-строка или JSON-ответ

document.addEventListener('pb:after', (e) => {
    console.log('Ответ вставлен в DOM:', e.detail.target);
});

• method
• url
• target
• status
• statusText

document.addEventListener('pb:error', (e) => {
    alert(`Ошибка ${e.detail.status}: ${e.detail.statusText}`);
});

• method
• url
• target
• error — объект ошибки

document.addEventListener('pb:fail', (e) => {
    console.error('Ошибка запроса:', e.detail.error);
});

• method
• url
• target

document.addEventListener('pb:abort', (e) => {
    console.warn('Запрос отменён:', e.detail.url);
});

Производительность

• ENUM — хорошо подходит для одиночных значений, например brand.
• SET — можно использовать для множественного выбора, но: поиск по SET не использует индекс.
• Связанная таблица — самое производительное и гибкое решение для множественных связей. В PageBlocks есть поддержка таких полей через relationship.

Tab::make('Categories')
    ->position(1)
    ->fields([
        Field::make('Categories') // name = categories
            ->type('table')
            ->resource()
    ])

Field::make('Category')
    ->label('Categories')
    ->type('relationship')
    ->relationType('many_to_many')
    ->primaryTable(\pbResource::class) // наша текущая таблица
    ->relatedTable(\pbResource::class) // таблица категорий
    ->fieldName('categories') // имя поля для получения только категорий
    ->displayField('pagetitle')
    ->valueField('id'),

Поддержка

Заключение