tx_news Kategorienliste als Dropdown

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;
  });
});

Link

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.