TYPO3 Seitensuche als Bestandteil des Webdesigns

Häufig ist eine Anforderung der Webdesigner bzw. Kunden an den TYPO3 Programmierer ein Suchfeld auf jeder Seite der Website ins Design zu integrieren. Dies stellt den Programmierer nun vor eine Reihe von Herausforderungen.

Zunächst einmal muss überhaupt ein Suchfeld per TypoScript (und eben nicht als Inhaltselement / Content-Element) integriert werden. Dann muss dieses Suchfeld den meist recht minimalistischen Anforderungen am Design angepasst werden und schlussendlich müssen die Suchergebnisse natürlich an einer sinnvollen Stelle landen.

Glücklicherweise wird von TYPO3 bereits ein Suchformular mitgeliefert. Dieses kann von tt_content.search kopiert und dann angepasst werden.

Beispiel für die Einbindung des Suchformulars per TypoScript

  temp.top_search < tt_content.search
  page.33 < temp.top_search

Nun kann das Suchformular direkt über Veränderungen an page.30 angepasst werden. Veränderungen an tt_content.search direkt dagegen würden sich auf alle Suchformulare, also auch auf solche die als Inhaltselemente eingebunden wurden, auswirken.

Die Anzeige der Suchergebnisse im Suchfeld unterdrücken

Ein Suchformular für die Seitensuche besteht in TYPO3 aus zwei teilen: Dem Suchformular selbst und der Suchergebnisanzeige, falls bereits eine Suche stattgefunden hat. Dies führt zum unschönen Ergebnis, dass nach erfolgter Suche das Suchelement, das zum Webdesign gehört versucht auch das Suchergebnis anzuzeigen. Wir wollen die Suchergebnisse jedoch im Inhaltsbereich der Webseite anzeigen.

Die TYPO3 Standartsuche ist ein Array (COA) von Objekten. an Stelle 20 liegen die Suchergebnisse und an 30 das Suchformular selbst. In dem man Punkt 20 der Suche leert kann man verhindern, dass Suchergebnisse angezeigt werden:

  temp.top_search.20 > #verhindert Anzeige der Suchergebnisse

TYPO3 Suchergebnisse im Inhaltsbereich anzeigen

Nun müssen jedoch auch die Suchergebnisse im Seitenbereich angezeigt werden. Am einfachsten geht dies, in dem man eine Seite Namens “Suche” oder ähnliches erzeugt. Auf dieser Seite fügt man ein Inhaltselement Typ “Suche” in den Inhaltsbereich ein. gehen wir einmal davon aus, das diese Suchseite die ID 16 hat. Dann muss dafür gesorgt werden, dass jede Suche als Ziel die 16 hat. Normalerweise führt eine Suche nämlich Standardmäßig zur aufrufenden Seite zurück.
Für die Zielseite der TYPO3 Suche ist der Parameter “type” Zuständig. obwohl ich diese Bezeichnung etwas unsinnig finde. Außerdem werden die Suchergebnisse standardmäßig in einem neuen Fenster angezeigt. Man kann jedoch auch einstellen, dass die Suchergebnisse im selben Fenster angezeigt werden.

temp.top_search.30 { # Optionen des Suchformulars der TYPO3 Suche
  target = _self #Suchergebnisse im selben Browserfenster anzeigen
  type > #automatische Auswahl der Zielseite der Suche löschen
  type = 16 #Seite 16 als Zielseite der Suche angeben
}

Dropdownauswahl “Überschriften und Schlagwörter” / “Seiteninhalt” ausblenden

Sehr störend in Bezug auf das Design ist auch das Drop-Down Auswahlfeld “Überschriften und Schlagwörter” / “Seiteninhalt” der TYPO3 Suche. Meist möchte man die Auswahl “Seiteninhalt” einfach standardmäßig auswählen und das Auswahlfeld ausblenden. Hierfür muss man das entsprechende Inputfeld in ein verstecktes Feld umwandeln.

temp.top_search.30 { # Optionen des Suchformulars der TYPO3 Suche
  dataArray.20.value = tt_content.header-bodytext-imagecaption #Auswahl voreinstellen
  dataArray.20.type = scols=hidden #Feld auf versteckt setzen
  dataArray.20.valueArray > #Auswahlmöglichkeit ausblenden
}

Das Design des Suchformulars anpassen

Letzen Endes muss natürlich noch das Design des Suchergebnisfeldes angepasst werden. Dies kann über die stdwrap Eigenschaften der verschiedenen Elemente des Suchelements geschehen. Die Vorliegende Designanpassung ist natürlich nur ein Beispiel:

temp.top_search.30 { # Optionen des Suchformulars der TYPO3 Suche
  # Suchformular mit DIV und nicht mit Tabelle wrappen
  stdWrap.wrap = <div>|</div>
  layout = ###LABEL### ###FIELD###
  labelWrap.wrap = # Die Beschriftungen der Inhaltselemente nicht generell wrappen
  #nur die Beschriftung des Eingabefeldes wrappen
  dataArray.10.label.wrap = <div id="top_bar_suche">|</div>
  dataArray.40.value.data > #Standartbeschriftung des Buttons ändern
  dataArray.40.value = GO #Beschriftung des Buttons auf "GO" ändern
  # dataArray.40 > Absenden Button ganz entfernen
}

Suche anpassen, Suche per TypoScript, Suchergebnisse anpassen, Suchformular anpassen, TYPO3 Suche, TYPO3 Suchergebnisse, TYPO3 Suchformular