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
View Comments (6)
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.
Ich habe die Formatierung in meinem Blog noch mal angepasst, nun sollte alles sichtbar sein ;)
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.
Schau mal, vielleicht hilft dir der neue Beitrag ein wenig. https://www.marc-finnern.de/2018/01/indexed-search-in-typo3-einrichten/ - Da habe ich schon mal die Constants erklärt.
Wie ich das direkt bei SolidPower gemacht habe, habe ich für alle mal an den Beitrag gehangen.
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
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.