Typo3: Kategorie-Filter für tt_news bauen – Teil 3

Heute folgt das große Finale (Teil 1, Teil 2) … uns fehlt bisher nur noch der JavaScript-Code, der das Formular abschickt und die GET-Parameter generiert. Wir nutzen nicht den normalen “submit”-Button, denn dann würde für jedes Feld eine eigene GET-Variable abgesendet werden, stattdessen generieren wir mit JavaScript eine einzige, die dann von Typo3 interpretiert wird.

Am besten legen wir eine separate Datei namens news_filter.js an, die wir dann wie folgt im HMTL-Kopf einfügen können (diese Zeile muss im “Header-Teile”-Bereich bei TemplaVoila aktiviert werden, wenn man das Formular mittels eines Flexiblem Content Element umsetzt):

Der Code der JavaScript-Methode:

function filter_news()
{
	var categories = '';
	var subject = document.getElementById('thema');
	// nun weitere Felder auslesen, z.B. Medientyp
	var mediaType = document.getElementById('medienTyp');
	var author = document.getElementById('author');

	categories = subject + ',' + mediaType + ',' + author;

	// neue URL mit Variable 'categories' zusammen setzen
	window.location = document.getElementById('filter-formular').action +
		'?no_cache=1&categories=' + categories;
}

Die Variable ‘categories’ wird zusammen gesetzt aus den Selektionsfeldern mit den Id’s ‘thema’, ‘medienTyp’ und ‘author’. Das Abschicken geschieht durch das Verändern der eigenen URL (window.location). Wichtig ist an der Stelle, dass das action-Attribut des Formulars eine gültige URL in der Form ‘http://www.domain.org/’ enthält.

Damit ist das Tutorial komplett und der Filter funktionsfähig, wenn du alles richtig zusammen gebaut hast :-) Es gibt natürlich noch viel Platz zum Verbessern. Beispielsweise wäre es eleganter die JavaScript-Methode durch eine php-Funktion auf der Server-Seite auszutauschen, um dort die übergebenden Variablen auszuwerten.