Contao (Teil 18): Die individuelle Suchfunktion

Tutorials 21. August 2013 – 0 Kommentare

Wem die Standardsuche von Contao nicht gefällt/genügt, der kann diese selbst erstellen. Verwendet wird dafür der Formulargenerator, den ihr bereits kennengelernt habt. Vorteil dieser Variante: Die Suchfunktion lässt sich deutlich komfortabler gestalten, als das bei der standardmäßig angebotenen Variante möglich ist. Für den Formulargenerator spricht außerdem: Endlich lassen sich die Suchergebnisse in einem anderen Bereich anzeigen. Möglich ist beispielsweise deren Anzeige im Hauptbereich der Seite. In diesem Tutorial werdet ihr Schritt für Schritt eine entsprechende Anwendung aufbauen. Im zweiten Teil wird gezeigt, wie sich das Formular mit einem grafischen Button ausstatten lässt.

Wir empfehlen:
Contao CMS-Training

Bevor man mit dem Formulargenerator arbeitet, müssen einige Dinge erledigt werden, damit das Suchformular später wie gewünscht arbeitet. Legt zunächst ein neues Modul vom Typ Suchmaschine an. Das geschieht unter Layout/Themes/Die Frontend-Module des Themes ID xx bearbeiten/Neues Modul. Als Modultyp wird unter Anwendungen der Eintrag Suchmaschine gewählt. Weist dem Modul der Übersichtlichkeit halber den Titel Die Suchfunktion zu.

Nachdem das Modul gespeichert wurde, muss es in einen Artikel eingefügt werden. Ich gehe an dieser Stelle davon aus, dass ihr im vorherigen Tutorial bereits eine Suche-Seite angelegt und diese im Menü versteckt habt. (Wenn nicht, müsst ihr das jetzt nachholen.)

Ruft nun Inhalte/Artikel auf und klickt bei der Suche-Seite auf das Stiftsymbol. Folgt dem Link Neues Element, gebt als Elementtyp den Eintrag Modul und als Modul den Wert Die Suchfunktion an.

Mit Speichern und schließen werden die Einstellungen übernommen.

Das Suchformular erstellen
Um ein Suchformular manuell anzulegen, muss man auf den Formulargenerator zurückgreifen. Aufgerufen wird dieser über den gleichnamigen Link unter Inhalte.

Folgt in dem sich öffnenden Dialogfenster dem Link Neues Formular. Aus diesem Formular wird letztendlich das Suchformular, das im Frontend zu sehen ist.

Als Titel könnte Sucheingabe eingetragen werden.

In das Feld Formular-ID schreibt man tl_search. Aktiviert außerdem Tabellenloses Layout und stellt bei Übertragungsmethode den Wert GET ein. Über Auswahl ändern unter Weiterleitungsseite wird die Suche-Seite eingestellt.

Anschließend kann das Ganze mit Speichern und schließen bestätigt werden.

Damit ist schon mal das Formular vorhanden, das jetzt aber natürlich noch mit Inhalten gefüllt werden muss. Klickt dazu in der Formularübersicht auf das Stiftsymbol bei Sucheingabe und anschließend auf Neues Element.

Nachdem ihr die Position des neuen Elements festgelegt habt, kann dieses genauer beschrieben werden. Als Feldtyp wird Textfeld angegeben. (Das ist im Fall eines Suchfeldes eigentlich die einzig plausible Variante. Denn durch Textfeld wird ein einzeiliges Eingabefeld zur Verfügung gestellt, in welches der Suchbegriff eingetragen werden kann.

Weiter geht es mit dem Feldnamen.

Bei einem normalen Formularfeld kann dieser frei gewählt werden. Handelt es sich allerdings um ein Suchfeld, sieht die Sache anders aus. Hier müsst ihr unbedingt keywords eintragen. Nur so weiß Contao, dass es sich tatsächlich um ein Suchfeld handelt. Würde man hier beispielsweise  search, suche usw. angeben, bekäme man zwar ebenfalls ein Eingabefeld präsentiert, das stellt dann allerdings keine Suchfunktion zur Verfügung.

Ob Ihr eine Feldbeschriftung angebt, bleibt letztendlich euch überlassen. Angezeigt wird der hier eingetragene Wert vor dem Suchfeld. Ihr könntet also beispielsweise Suche angeben. Üblicherweise lässt man Feldbeschriftung allerdings  leer.

Über den Bereich Feldkonfiguration kann man festlegen, was für Zeichen alles in das Suchfeld eintragen werden dürfen. Mit Erweiterte alphanumerische Zeichen seid ihr in jedem Fall auf der richtigen Seite.

Weitere Angaben sind für das Suchfeld normalerweise nicht nötig. Übernehmt die Angaben also mit Speichern und schließen.

Die Senden-Schaltfläche anlegen
Das Suchfeld allein ist nur die halbe Miete, wenn es um die Integration einer Suchfunktion in die Webseite geht. Denn natürlich muss die Suchfunktion – nachdem die Besucher einen Suchbegriff eingetragen haben – auch ausgelöst werden können. Und genau für diesen Zweck braucht man eine Schaltfläche. Contao bietet euch auch auf diesem Gebiet wieder unterschiedliche Möglichkeiten:

  • Ihr erstellt einen klassischen Formular-Button.
  • Ihr gestaltet eine Grafik und nehmt diese als Basis für die Schaltfläche.

Beide Varianten werden im weiteren Verlauf dieses Tutorials vorgestellt. Zunächst zum Klassiker, also einem herkömmlichen Formular-Button. Ruft wieder Inhalt/Forrmulargenerator auf. Öffnet das Suchformular und klickt auf Neues Feld.

Legt anschließend die Position des neuen Feldes fest.

Als Feldtyp stellt man Absendefeld ein.

Die Bezeichnung kann beispielsweise auf Suche gesetzt werden. Weitere  Einstellungen muss man tatsächlich nicht vornehmen. Mit Speichern und schließend übernimmt man die Einstellungen.

Um die Suchfunktion testen zu können, solltet ihr das Suchformular natürlich an der gewünschten Stelle einfügen. Das geschieht unter Themes/Die Frontend-Module des Themes ID xx bearbeiten. Klickt dort auf Neues Modul.

Die allgemeinen Einstellungen auf dieser Seite kennt ihr bereits. Entscheidend ist das Feld Modultyp. Stellt hier Formular ein. Daraufhin kann unter Include-Einstellungen über das Formular-Feld das entsprechende Suchformular ausgewählt werden.

Ruft nun Themes/Die Seitenlayouts des Themes ID xx bearbeiten auf. Klickt anschließend bei dem entsprechenden Layout auf das Stiftsymbol. Entscheidend ist in dem sich öffnenden Dialogfenster der Bereich Eingebundene Module. Fügt hier eine neue Zeile ein und gebt Sucheingabe und Kopfzeile an.

Nachdem die Einstellungen gespeichert wurden, kann man sich im Frontend das Ergebnis ansehen.

So einfach könnt ihr also ein individuelles Suchfeld anlegen.

Ein grafischer Senden-Button geht auch
Wer es noch individueller mag, kann den Senden-Button auch grafisch gestalten. Prinzipiell geht man dabei so wie bei einer herkömmlichen Senden-Schaltfläche vor. Zunächst müsst ihr die Suchen-Schaltfläche allerdings erstellen bzw. besorgen. Anschließend ladet ihr diese über die Dateiverwaltung auf den Server. Erst jetzt kann man die grafische Schaltfläche anlegen.

Geht dabei so vor, wie das im Zusammenhang mit einer klassischen Schaltfläche beschrieben wurde. Öffnet in den Feldeinstellungen dieses Mal aber den Bereich Bildschaltfläche.

Sobald man hier Bildschaltfläche erstellen aktiviert, blendet Contao eine weitere Schaltfläche ein. Über Auswahl ändern öffnet sich die Dateiverwaltung. Und über diese Dateiverwaltung stellt man die zuvor hochgeladene Suchen-Grafik ein. Sobald die Grafik ausgewählt wurde, ist deren Dateipfad unter Quelldatei zu sehen.

Die Einstellungen müssen noch gespeichert werden. Die Grafik wird dann tatsächlich im Frontend beim Suchformular angezeigt.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>