tx_news verwendet die Standard TYPO3 Kategorien und bietet die schöne Option, die News anhand der zugeordneten Kategorien filtern zu lassen.
Möchte man diese Funktion nutzen, so bindet man auf einer Seite zwei news-Datensätze ein, einen im Modus Listenansicht
den anderen im Modus Kategorien
. Wenn die weiteren Einstellungen in der Flexform korrekt gesetzt sind, funktioniert das bereits. Allerdings kommt der Filter in Form einer simplen Liste daher und wir möchten lieber eine schicke Dropdown Auswahl.
Sie sieht es aus:
<div class="news"> <ul> <li><a title="Kategorie 1" href="seite/kategorie-1/">Kategorie 1</a></li> <li><a title="Kategorie 2" href="seite/kategorie-2/">Kategorie 2</a></li> <li><a title="Kategorie 3" href="seite/kategorie-3/">Kategorie 3</a></li> <li><a title="Kategorie 4" href="seite/kategorie-4/">Kategorie 4</a></li> </ul> </div> |
So soll es aussehen:
<div class="news"> <select id="selectoptions" class="form-control"> <option value="seite/"> - alle anzeigen - </option> <option value='seite/kategorie-1/'>Kategorie 1</option> <option value='seite/kategorie-2/'>Kategorie 2</option> <option value='seite/kategorie-3/'>Kategorie 3</option> <option value='seite/kategorie-4/'>Kategorie 4</option> </select> </div> |
Dazu braucht man dann noch folgendes JavaScript (jQuery):
$(function(){ // bind change event to select $('#selectoptions').on('change', function () { var url = $(this).val(); // get selected value if (url) { // require a URL window.location = url; // redirect } return false; }); }); |
Die Datei, die bearbeitet werden muss, ist folgende:
EXT:news/Resources/Private/Templates/Category/List.html |
Mit folgendem TypoScript (Setup) holt man sich den Ordner „Templates“ ins fileadmin Verzeichnis:
view.templateRootPaths.10 = fileadmin/templates/erweiterungen/news/Templates |
Da die 10
verwendet wird, Dateien und Verzeichnisse also rekursiv eingebunden werden, benötigt man tatsächlich nur die Datei List.html
, die sich in einem Verzeichnis Category
befinden muss (und dieses wiederum im Verzeichnis Templates
).
Die Section <f:section name="categoryTree">
wird nun folgendermaßen umgebaut:
<f:section name="categoryTree"> <select id="selectoptions" class="form-control"> <option value="seite/"> - alle anzeigen - </option> <f:for each="{categories}" as="category"> <f:if condition="{category.item.uid} == {overwriteDemand.categories}"> <f:then> <option selected="selected" value='<f:uri.action action="show" pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}"></f:uri.action>'>{category.item.title}</option> </f:then> <f:else> <option value='<f:uri.action action="show" pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}"></f:uri.action>'>{category.item.title}</option> </f:else> </f:if> </f:for> </select> </f:section> |
Der eigentliche Trick ist der Viewhelper <f:uri.action>
der es ermöglicht, eine URL zu generieren, die wiederum in das value des option Tags geschrieben wird. Schön ist auch das selected="selected"
, das nach der Filterung die ausgewählte Kategorie in der Selectbox anzeigt. Und, ebenfalls schön bzw. brauchbar, die oben „händisch“ hinzugefügte option
mit der URL der List-Seite als value, die es ermöglicht die Filterung wieder rückgängig zu machen und alle anzuzeigen.