For coders TYPO3 Tech Corner

Pagebrowser ViewHelper in TYPO3 11

Pagebrowser ViewHelper in TYPO3 11

Mit der Version 11 von TYPO3 wurden die ViewHelper f:widget.paginate und f:be.widget.paginate entfernt. Gleichzeitig gibt es nun Paginator- und Pagination-Klassen in PHP, die man nutzen kann. Wie man dennoch einen ViewHelper als Pagebrowser verwenden kann, zeigen wir euch in dem Beitrag.

Die Entscheidung von TYPO3 Widgets (also ein ViewHelper mit eigenen Controller) zu entfernen, finden wir super. Einen eigenen Controller für einen ViewHelper zu haben, fühlte sich schon immer etwas eigenartig an. Dennoch finden wir die Idee eines PageBrowser-ViewHelper in den meisten Fällen gut. Das hält die Controller weiterhin schlank (Konzept eines Slim-Controllers in Extbase).

Nachfolgend zeigen wir euch, wie ihr in TYPO3 11 (und auch bereits in 10) einen eigenen Paginate-ViewHelper für Arrays oder Queryresults (Ergebnis aus einem Extbase-Repository) bauen könnt.

In dem Beispiel befindet sich der neue ViewHelper unter Classes/ViewHelpers/Pagination/PaginateViewHelper.php:

<?php declare(strict_types = 1); namespace In2code\Lux\ViewHelpers\Pagination; use Closure; use In2code\Lux\Exception\NotPaginatableException; use TYPO3\CMS\Core\Pagination\ArrayPaginator; use TYPO3\CMS\Core\Pagination\PaginationInterface; use TYPO3\CMS\Core\Pagination\PaginatorInterface; use TYPO3\CMS\Core\Pagination\SimplePagination; use TYPO3\CMS\Core\Utility\GeneralUtility; use TYPO3\CMS\Extbase\Pagination\QueryResultPaginator; use TYPO3\CMS\Extbase\Persistence\QueryResultInterface; use TYPO3\CMS\Extbase\Service\ExtensionService; use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface; use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper; /** * PaginateViewHelper */ class PaginateViewHelper extends AbstractViewHelper { /** * @var bool */ protected $escapeOutput = false; /** * @return void */ public function initializeArguments() { parent::initializeArguments(); $this->registerArgument('objects', 'mixed', 'array or queryresult', true); $this->registerArgument('as', 'string', 'new variable name', true); $this->registerArgument('itemsPerPage', 'int', 'items per page', false, 10); $this->registerArgument('name', 'string', 'unique identification - will take "as" as fallback', false, ''); } /** * @param array $arguments * @param Closure $renderChildrenClosure * @param RenderingContextInterface $renderingContext * @return string * @throws NotPaginatableException */ public static function renderStatic( array $arguments, Closure $renderChildrenClosure, RenderingContextInterface $renderingContext ) { if ($arguments['objects'] === null) { return $renderChildrenClosure(); } $templateVariableContainer = $renderingContext->getVariableProvider(); $templateVariableContainer->add($arguments['as'], [ 'pagination' => self::getPagination($arguments, $renderingContext), 'paginator' => self::getPaginator($arguments, $renderingContext), 'name' => self::getName($arguments) ]); $output = $renderChildrenClosure(); $templateVariableContainer->remove($arguments['as']); return $output; } /** * @param array $arguments * @param RenderingContextInterface $renderingContext * @return PaginationInterface * @throws NotPaginatableException */ protected static function getPagination( array $arguments, RenderingContextInterface $renderingContext ): PaginationInterface { $paginator = self::getPaginator($arguments, $renderingContext); return GeneralUtility::makeInstance(SimplePagination::class, $paginator); } /** * @param array $arguments * @param RenderingContextInterface $renderingContext * @return PaginatorInterface * @throws NotPaginatableException */ protected static function getPaginator( array $arguments, RenderingContextInterface $renderingContext ): PaginatorInterface { if (is_array($arguments['objects'])) { $paginatorClass = ArrayPaginator::class; } elseif (is_a($arguments['objects'], QueryResultInterface::class)) { $paginatorClass = QueryResultPaginator::class; } else { throw new NotPaginatableException('Given object is not supported for pagination', 1634132847); } return GeneralUtility::makeInstance( $paginatorClass, $arguments['objects'], self::getPageNumber($arguments, $renderingContext), $arguments['itemsPerPage'] ); } /** * @param array $arguments * @param RenderingContextInterface $renderingContext * @return int */ protected static function getPageNumber(array $arguments, RenderingContextInterface $renderingContext): int { $extensionName = $renderingContext->getControllerContext()->getRequest()->getControllerExtensionName(); $pluginName = $renderingContext->getControllerContext()->getRequest()->getPluginName(); $extensionService = GeneralUtility::makeInstance(ExtensionService::class); $pluginNamespace = $extensionService->getPluginNamespace($extensionName, $pluginName); $variables = GeneralUtility::_GP($pluginNamespace); if ($variables !== null) { if (!empty($variables[self::getName($arguments)]['currentPage'])) { return (int)$variables[self::getName($arguments)]['currentPage']; } } return 1; } /** * @param array $arguments * @return string */ protected static function getName(array $arguments): string { return $arguments['name'] ?: $arguments['as']; } }

Zum Bauen der Links im Fluid verwenden wir einen zweiten ViewHelper Classes/ViewHelpers/Pagination/UriViewHelper.php:

<?php declare(strict_types = 1); namespace In2code\Lux\ViewHelpers\Pagination; use TYPO3\CMS\Core\Utility\GeneralUtility; use TYPO3\CMS\Extbase\Service\ExtensionService; use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper; /** * UriViewHelper */ class UriViewHelper extends AbstractTagBasedViewHelper { /** * Initialize arguments */ public function initializeArguments() { parent::initializeArguments(); $this->registerArgument('name', 'string', 'identifier important if more widgets on same page', false, 'widget'); $this->registerArgument('arguments', 'array', 'Arguments', false, []); } /** * Build an uri to current action with &tx_ext_plugin[currentPage]=2 * * @return string The rendered uri */ public function render(): string { $uriBuilder = $this->renderingContext->getControllerContext()->getUriBuilder(); $extensionName = $this->renderingContext->getControllerContext()->getRequest()->getControllerExtensionName(); $pluginName = $this->renderingContext->getControllerContext()->getRequest()->getPluginName(); $extensionService = GeneralUtility::makeInstance(ExtensionService::class); $pluginNamespace = $extensionService->getPluginNamespace($extensionName, $pluginName); $argumentPrefix = $pluginNamespace . '[' . $this->arguments['name'] . ']'; $arguments = $this->hasArgument('arguments') ? $this->arguments['arguments'] : []; if ($this->hasArgument('action')) { $arguments['action'] = $this->arguments['action']; } if ($this->hasArgument('format') && $this->arguments['format'] !== '') { $arguments['format'] = $this->arguments['format']; } $uriBuilder->reset() ->setArguments([$argumentPrefix => $arguments]) ->setAddQueryString(true) ->setArgumentsToBeExcludedFromQueryString([$argumentPrefix, 'cHash']); $addQueryStringMethod = $this->arguments['addQueryStringMethod'] ?? null; if (is_string($addQueryStringMethod)) { $uriBuilder->setAddQueryStringMethod($addQueryStringMethod); } return $uriBuilder->build(); } }

Damit kann man diesen fast wie gewohnt im Fluid einsetzen:

<lux:pagination.paginate objects="{downloads}" as="downloadsPaginator" itemsPerPage="15"> <f:for each="{downloadsPaginator.paginator.paginatedItems}" as="download"> <p>{download.title}</p> </f:for> <f:alias map="{pagination:downloadsPaginator.pagination, paginator:downloadsPaginator.paginator, name:downloadsPaginator.name}"> <f:render partial="Miscellaneous/Pagination" arguments="{_all}" /> </f:alias> </lux:pagination.paginate>

Das Partial mit dem eigentlichen Pagebrowser könnte dann so oder so ähnlich aussehen:

<f:if condition="{paginator.numberOfPages} > 1"> <nav aria-label="pagebrowser"> <ul class="f3-widget-paginator pagination"> <f:if condition="{pagination.previousPageNumber} && {pagination.previousPageNumber} >= {pagination.firstPageNumber}"> <li class="previous"> <a href="{lux:pagination.uri(arguments:'{currentPage:pagination.previousPageNumber}',name:name)}" title="previous" class="page-link"> &lt; </a> </li> </f:if> <f:if condition="{pagination.hasLessPages}"> <li class="page-item"></li> </f:if> <f:for each="{pagination.allPageNumbers}" as="page"> <f:if condition="{page} == {paginator.currentPageNumber}"> <f:then> <li class="page-item current active"> <span class="page-link">{page}</span> </li> </f:then> <f:else> <li class="page-item"> <a href="{lux:pagination.uri(arguments:'{currentPage:page}',name:name)}" class="page-link">{page}</a> </li> </f:else> </f:if> </f:for> <f:if condition="{pagination.hasMorePages}"> <li class="page-item"></li> </f:if> <f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}"> <li class="next"> <a href="{lux:pagination.uri(arguments:'{currentPage:pagination.nextPageNumber}',name:name)}" title="next" class="page-link"> &gt; </a> </li> </f:if> </ul> </nav> </f:if>

Tipp: Alle Infos zu den neuen Paginator und Pagination Klassen in TYPO3 finden sich in der Dokumentation

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns

SQL: Zeige alle Tabellen absteigend nach Größe sortiert

Ich brauche in letzter Zeit häufiger den SQL-Befehl, um herauszufinden, welche Tabellen in der TYPO3-Datenbank am größten sind. Ich habe das Snippet einmal veröffentlicht.

Zum Beitrag

TYPO3 12 mit CKEditor 5: Stile als Einfachauswahl

Wenn man im RTE in TYPO3 einen Link setzt, kann es sein, dass man zwischen verschiedenen Link-Klassen auswählen muss, um beispielsweise Buttons im Frontend zu erzeugen. Neu ist in TYPO3 12 dass man...

Zum Beitrag

Null-Safe Operator im TYPO3-Bereich

Spätestens mit dem Einzug von PHP8 kann es an vielen Stellen zu Problemen mit undefinierten Arrays oder Variablen im Allgemeinen kommen. Hier ein paar Beispiele und einfache Lösung dafür.

Zum Beitrag

Die ersten/letzten Zeilen einer (SQL)-Datei löschen

Zu den nachfolgenden Befehlen gibt es eigentlich nicht viel zu sagen. Manchmal kann es nützlich sein, die ersten (bzw. letzten) X Zeilen aus einer Datei zu löschen. Und wenn die Datei zu groß zum...

Zum Beitrag

b13/container: Kindelemente in der Bearbeitungsansicht hinzufügen und ändern

Anders als in gridelements kann man in der Extension Container von B13 die Kindelemente nicht verwalten, wenn man den Container in der Bearbeitungsansicht öffnet. Wie man das schnell selber einbauen...

Zum Beitrag

Menü-Vergleich: Zahlen, Zahlen, Zahlen

Zum Beitrag