Eigene Suchbox mit Typoscript für Indexed Search (tx_indexedsearch)

Bei vielen Seiten vorallem neuen Responsive-Seiten, wünscht man sich eine Suchbox die man komplett selber gestalten kann. Die Plugins die man findet, sind leider nicht immer passend und selber schreiben geht, aber wie….

Hier im Artikel, zeige ich euch wie es mit kurzen TypoScript anweisungen dies zu realisieren ist.


Beispiel für die Suchbox findet ihr auf dieser Seite: » Link

Typoscript (Konstanten)

# system
###############################
search_root         = 1
search_result       = 37

Typoscript (Setup)

# Searchbox
###############################
lib.suche = COA
lib.suche {
    10 = COA
    10 {
        10 = TEXT
        10 {
            typolink.parameter = {$search_result}
            typolink.returnLast = url
            wrap = <div class="container mm_search"><form action="|" method="post" id="indexedsearch_mmenu">
        }

        20 = COA
        20 {
            10 = COA
            10 {
                10 = TEXT
                10.value = <input type="hidden" name="tx_indexedsearch[sections]" value="0" />
                20 = TEXT
                20.value = <input name="tx_indexedsearch[submit_button]" value="Search" type="hidden" />

                30 = TEXT
                30 {
                    value = <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                }
                wrap = <span class="input-group-btn">|</span>
            }
            20 = TEXT
            20 {
                value = <input name="tx_indexedsearch[sword]" value="" placeholder="{$suche_placeholder}" class="form-control searchbox-sword" type="text" />
            }
            wrap =  <div class="input-group">|</div>
        }
        wrap = | </form></div>
    }
    wrap = <div class="header-search">|</div>
}

Styling (CSS)

/* ==========================================================================
   Search
   ========================================================================== */
.header-search {position: absolute;left: 0;top:-100px;width: 100%;padding: 20px 50px;background-color: rgba(255,255,255,0.7);opacity: 0}
.header-search {-webkit-transition: all 300ms;-moz-transition: all 300ms;-ms-transition: all 300ms;-o-transition: all 300ms;transition: all 300ms;}
.header-search.in {top:100%;z-index: 99;opacity: 1}
.header-search .mm_search {padding: 0}
.header-search #indexedsearch_mmenu {max-width: 400px;margin: 0 auto;}
.header-search #indexedsearch_mmenu .btn,
.header-search #indexedsearch_mmenu .form-control {background: none transparent;border:0 none;box-shadow: none;}
.header-search #indexedsearch_mmenu .btn {border-right: 1px solid #000;}
.header-search #indexedsearch_mmenu .form-control {font-size: 16px;color:#005BAA;}

Template (Fluid)

<header id="header">
    <f:cObject typoscriptObjectPath="lib.suche" />
</header>

viel Spaß damit.
Alles zum Code zusammen in der .ZIP-Datei
Download: eigene-suchbox-mit-typoscript-fuer-indexed-search-tx_indexedsearch

7 Antworten auf „Eigene Suchbox mit Typoscript für Indexed Search (tx_indexedsearch)“

  1. Hallo,
    also das Beispiel unter dem Link sieht ja recht schön aus, aber mich würde es freuen, wenn Du etwas mehr schreiben könntes, wie ich das dort einbinde.
    Also mir fehlen folgende Angaben:
    1. html-Code der Navbar im Template und somit die genaue Positionierung des Fluidhelper-Aufrufes
    2. wie wird die Lupe der Awesome-Schriftart platziert und wie wird der Aufruf der Searchbox verknüpft
    3. wofür sind die TypoScript-Konstanten?

    Also eine etwas erhellendere Beschreibung des Codes wäre schön. Danke.

  2. Danke, der Code ist jetzt schön lesbar.

    Aber könntest Du erklären, wofür die Contanten “search_root” und “search_result” mit ihren Werten stehen?!

    Und super wäre für diesen Codeschnippsel noch, wie Du die Searchbox aktivierst, also dass diese erst eingeblendet wird beim Drücken des Lupensymbols. Über die TS-Einbindung wird ja nur die Funktion der Searchbox selbst generiert, aber doch nicht das Einblenden selbst. Könntest Du das noch ergänzen? Danke.

  3. Hi Marc & Danke für den Beitrag, den du hier teilst 🙂

    Ich habe das Suchformular in meine Seite übernommen und es wird mir auch angezeigt. Wenn ich einen Suchbegriff eingebe und das Formular absende, werde ich auch auf die Seite weitergeschickt, auf dem ich den Indexed Search-Plugin eingebunden habe.

    Leider wird der eingegebene Suchbegriff aber nicht verarbeitet / übergeben.

    Hast du eine Idee woran das liegen könnte?

    Danke für deine Antwort & LG
    Kai

  4. Ich könnte mir vorstellen, dass vielleicht das Template nicht geladen wird.
    Ein anderer Fall könnte sein, dass vielleicht die eigene Suchbox die Ausgabe von IndexSearch blockiert. Frage wäre hier, ob es ein Ergebnis kommt, wenn die Suchbox nicht eingebaut ist.

Schreibe einen Kommentar

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