TYPO3 7.6 – indexed_search Template auslagern und erweitern

Bis vor ein paar Monaten waren die TYPO3 6.2 indexed_search Fluid Version noch etwas am kränkeln und lief noch nicht perfekt. Sollte sich aber mit den neuen TYPO3 7.6 Versionen geändert haben…
Nun möchte ich Euch erst einmal erklären, wie Ihr das HTML Template auslagern und somit auch bearbeiten könnt!
Danach erkläre ich noch, wie Ihr die Search-Box auslagern und in Eurer Template integrieren könnt und die Suchwörter auch an die Such-Seite übergeben werden!

Dazu kopiert von der Ext. indexed_search den Resources Ordner und legt den in Eurer fileadmin-System ab.
Nun trag Ihr in Eurer „Setup“ folgende Werte ein:

# Plugin configuration
plugin {
  tx_indexedsearch {
    view {
      templateRootPaths {
        0 = EXT:indexed_search/Resources/Private/Templates/
        999 = {$plugin.tx_indexedsearch.view.templateRootPath}
      }
      partialRootPaths {
        0 = EXT:indexed_search/Resources/Private/Partials/
        999 = {$plugin.tx_indexedsearch.view.partialRootPath}
      }
      layoutRootPaths {
        0 = EXT:indexed_search/Resources/Private/Layouts/
        999 = {$plugin.tx_indexedsearch.view.layoutRootPath}
      }
    }
  }
}

Allgemeine Einstellungen könnt Ihr der Anleitung entnehmen:
https://docs.typo3.org/typo3cms/extensions/indexed_search/latest/Configuration/TypoScript/Index.html

Und dazu die passenden Konstanten (Pfade natürlich anpassen):

plugin {
  tx_indexedsearch {
    view {
      # cat=plugin.tx_indexedsearch/file; type=string; label=Path to template root (FE)
      templateRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Templates/
      # cat=plugin.tx_indexedsearch/file; type=string; label=Path to template partials (FE)
      partialRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Partials/
      # cat=plugin.tx_indexedsearch/file; type=string; label=Path to template layouts (FE)
      layoutRootPath = fileadmin/Templates/Plugin/IndexedSearch/Resources/Private/Layouts/
    }
  }
}

Nun könnt Ihr in dem Search Template alles anpassen und die Extension kann weiterhin geupdated werden.
Als nächstes zeige ich Euch, wie Ihr z.B. nur ein Suchfeld auf Eure Webseite einbaut und die Suchwörter an die Such-Seite übermittelt.
Bitte schaut Euch auch mal TYPO3 FLUID FORM einmal genauer an:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Form.html
Dort sind soweit alle Begriffe erklärt, die wir nun in den FORM-Tag einbauen.

Search-Formular mit FLUID nachbauen:

<f:form class="main-search" pageUid="14" method="post" id="tx_indexedsearch" noCacheHash="true" absolute="0"  action="search" extensionName="IndexedSearch" pluginName="pi2" controller="Search">

<div class="hidden tx-indexedsearch-hidden-fields">
<input name="tx_indexedsearch_pi2[search][_sections]" value="0" type="hidden">
<input id="tx_indexedsearch_freeIndexUid" name="tx_indexedsearch_pi2[search][_freeIndexUid]" value="_" type="hidden">
<input id="tx_indexedsearch_pointer" name="tx_indexedsearch_pi2[search][pointer]" value="0" type="hidden">
<input name="tx_indexedsearch_pi2[search][ext]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][searchType]" value="1" type="hidden">
<input name="tx_indexedsearch_pi2[search][defaultOperand]" value="0" type="hidden">
<input name="tx_indexedsearch_pi2[search][mediaType]" value="-1" type="hidden">
<input name="tx_indexedsearch_pi2[search][sortOrder]" value="rank_flag" type="hidden">
<input name="tx_indexedsearch_pi2[search][group]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][languageUid]" value="-1" type="hidden">
<input name="tx_indexedsearch_pi2[search][desc]" value="" type="hidden">
<input name="tx_indexedsearch_pi2[search][numberOfResults]" value="10" type="hidden">
<input name="tx_indexedsearch_pi2[search][extendedSearch]" value="" type="hidden">
</div>

                    <div class="input-row">
                        <div class="form-group tx-indexedsearch-form">
                            <f:form.textfield name="search[sword]" value="" id="tx-indexedsearch-searchbox-sword" class="form-control tx-indexedsearch-searchbox-sword" placeholder="Webseite durchsuchen..." />
                        </div><!-- /.form-group -->
                        <div class="form-group tx-indexedsearch-search-submit">
                            <f:form.button type="submit" class="btn btn-default tx-indexedsearch-searchbox-button" name="search[submitButton]" value="" id="tx-indexedsearch-searchbox-button-submit"><i class="fa fa-search"></i></f:form.button>
                        </div>
                    </div>
                </f:form>

Ändert noch die „pageUid“ in Eure ID ab, wo das eigentliche indexed_search PlugIn eingebunden ist. (im meinen Fall die ID=14).
Die „hidden“ Fields müsst Ihr an Eure PlugIn Einstellungen anpassen.
Mein Markup habe ich nun mit Bootstrap aufgebaut, dass könnt Ihr natürlich auch anpassen.

Wichtig: Im Backend unter den PlugIn-Einstellungen auch das Indexed-Search FLUID Template auswählen!

Soweit sollte nun alles passen und das Suchwort, sollte dann an die Suchseite übergeben werden.
Gerne in den Kommentaren Infos, Tips oder Fragen schreiben.