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.

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

3 Kommentare

  1. Igor

    Thanks a lot for your article, really helpful.
    Just 1 question that I have is…
    How actually get the description of the searched result?

    As I see from Partials/Searchresult.html the {row.description} should work.
    But that variable contains some text, not really the description…

    Any ideas ?

  2. Hallo, ich versuche mal nach und nach die Fragen abzuerarbeiten!
    Ich habe auch mal die HTML/CSS und TYPOSCRIPT Daten bearbeitet.
    Die „hidden“ Felder werden von TYPO3 FORM automatisch gestellt.

    Richtig, in den TypoScript Ordner auf jeden Fall reinschauen und ggf. die Einstellungen kopieren.

  3. Johannes C. Laxander

    Ich habe mich gerade auch durch die erste 7.6er-Verison gewühlt. Insoweit kommt dein Artikel für mich etwas zu spät. Dafür werde ich meine Erfahrungen noch mit einfließen lassen, und habe auch noch ein paar Fragen dazu.

    Im Suchformular das auf der Suchergebnisseite ausgegeben wird sind noch weitere hidden-fileds angegeben. Welche Fuktion haben diese Felder bzw. muss man die auch bei einem eingen Suchfeld auf jeder Seite mit einbinden?

    tx_indexedsearch_pi2[__referrer][@extension] value=&amp;quot;IndexedSearch&amp;quot;
    tx_indexedsearch_pi2[__referrer][@vendor]&amp;quot; value=&amp;quot;TYPO3\CMS&amp;quot;
    tx_indexedsearch_pi2[__referrer][@controller]&amp;quot; value=&amp;quot;Search&amp;quot;
    tx_indexedsearch_pi2[__referrer][@action]&amp;quot; value=&amp;quot;search&amp;quot;
    tx_indexedsearch_pi2[__referrer][arguments]&amp;quot; value=&amp;quot;YTozOntzOj...&amp;quot;
    tx_indexedsearch_pi2[__trustedProperties]&amp;quot; value=&amp;quot;a:1:{s:6:&amp;quot;search&amp;quot;...&amp;quot;
    

    Das TypoScript Setup der Extension hat sich auch geändert. Die meisten Einstellungen werden nun im Abschnitt „Settings“ gemacht. Auch findet ihr hier neue Eigenschaften. Ein Blick in die Datei Configuration\TypoScript\setup.txt lohnt sich hier. Führt man die Template-Analyse durch ist man allerdings etwas verwirrt, denn da werden 2 Setup-Datien geladen, was ich noch nicht nachvollziehen kann:

    1) EXT:indexed_search/Configuration/TypoScript
    2) indexed_search

    Vielleicht kann hier jemand aufklären.

    Bisher haben sich bei mir zwei Probleme in den Weg gestellt:

    1) Suchfeld nach Ausführung der Suche leeren
    Mit plugin.tx_indexedsearch.settings.clearSearchBox = 1 soll erreicht werden, dass der Suchbegriff nach der Suche im Suchfeld gelöscht ist. Das funktioniert bei mir aber nicht. Auch nicht „in der alten Version“ mit plugin.tx_indexedsearch.show.clearSearchBox = 1. Dafür habe ich noch keine Lösung.

    2) Pagebrowser an Bootstrap anpassen
    Der Pagebrowser wird in der Extbase/Fluid-Version über einen ViewHelper generiert:

    So weit so gut. Problem dabei ist, dass ich keine Möglichkeit gefunden habe, die CSS-Klassen der Extension über Typoscript oder einer Argumentliste beim Aufruf des ViewHelpers zu ändern. Und der ViewHelper gibt diesen HTML-Code aus:

    Anzeige der Ergebnisse …

    		
    			&amp;lt;strong&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot;&amp;gt;Seite 1&amp;lt;/a&amp;gt;&amp;lt;/strong&amp;gt;
    		

    Um daraus eine horizontale Linkliste analog zu den Bootstrap Nav-Pills zu bekommen, habe ich entsprechendes CSS codiert:

    /* 
      ul.tx-indexedsearch-browsebox = ul.nav.nav-pills
      ul.tx-indexedsearch-browsebox li = li.nav-item
      ul.tx-indexedsearch-browsebox li+li = li.nav-item+li.nav-item
      ul.tx-indexedsearch-browsebox li a = a.nav-link
      ul.tx-indexedsearch-browsebox li.tx-indexedsearch-browselist-currentPage a = a.nav-link:active
    */
    ul.tx-indexedsearch-browsebox {
      padding-left: 0;
      margin-bottom: 1rem;
      list-style: none;
    }
    ul.tx-indexedsearch-browsebox:after {
      display: table;
      clear: both;
      content: '';
    }
    ul.tx-indexedsearch-browsebox li {
      float: left;
    }
    ul.tx-indexedsearch-browsebox li+li {
      margin-left: 2rem; 
    }
    ul.tx-indexedsearch-browsebox li a {
      display: block;
      padding: .5em 1em; 
      border-radius: .25rem;
    }
    ul.tx-indexedsearch-browsebox li.tx-indexedsearch-browselist-currentPage a {
      color: #fff;
      cursor: default;
      background-color: #0275d8;
    }
    

    Keine schöne Lösung, aber ein funktionierender Workaround. Und vielleicht können es andere auch gebrauchen.

Next ArticleTYPO3 Update - 8.1 Version Release