Il existe un moyen très simple pour ajouter un formulaire de recherche sur votre site afin de permettre à vos visiteurs de trouver plus facilement le contenu qu'ils recherchent. TYPO3 gère nativement cette fonctionnalité.

Il s'agit ici de la recherche "simple" à ne pas confondre avec la recherche indexée (indexed_search). Vous trouverez un exemple de ce type de recherche sur TYPO3journal.

1. Ajouter un formulaire (plugin)

Pour ajouter un formulaire de recherche sur votre page, c'est très simple. Déposez un objet de type plugin sur l'un de vos pages.

Sélectionnez Recherche dans "Type" et indiquez une page de résultat dans "Envoyez à la page". Il n'est pas obligatoire de créer une nouvelle page pour les résultats. C'est peut-être plus propre me direz-vous ! Si vous suivez cette procédure, installer à nouveau un plugin de type Search form sur votre page de résultat. Dans le cas contraire, ça ne fonctionnera pas.

Tout devrait fonctionner. Cependant, le code généré est en HTML et ce n'est pas top si vous travaillez uniquement avec des CSS.

2. Modifier le rendu

Vous disposez de deux méthodes pour modifier le rendu du formulaire de recherche et de la page de résultats. Soit vous modifiez votre gabarit et ajoutez du typoscript pour formater le contenu à votre goût, soit vous vous rendez dans le "Typoscript Object Browser". Comme son nom l'indique, le "Typoscript Object Browser" permet de naviguer parmi tous les objets et de voir leur hierarchie.

Pour y accéder : Template > Root Page > Typoscript Object Browser puis repérez tt_content > mailform et tt_content > search. Déployez l'arborescence pour accéder aux différentes propriétés. Vous pouvez donc, soit modifier les valeurs à ce niveau, soit intégrer du code Typoscript dans votre gabarit.

J'ai préféré utiliser le typoscript dans mon gabarit pour vous montrer toute la puissance du Typoscript dans TYPO3. On peut modifier le rendu, les styles mais aussi les options comme par exemple le nombre de résultats par page. Il s'agit de la propriété range. On peut également afficher la description de x caractères avec crop.

Exemple de Typoscript

Voici mon code Typoscript. J'ai laissé quelques commentaires pour vous aider. Vu que le code comporte quelques sauts pour l'affichage, je vous conseille de télécharger le typoscript.

# Formulaire de recherche

# ***********************
#  Page de recherche
# ***********************
 
# Mise en forme de la page de recherche normale
tt_content.search.30.stdWrap.wrap = <div id="formulaire">|</div>
tt_content.search.30.target = _self
tt_content.search.30.layout = <p><span class="textentry">###LABEL###
</span>&nbsp;&nbsp;###FIELD###</p>
tt_content.search.30.dataArray {
    #10.label.lang.de = Chercher:
    10.label = Chercher :
    20.label = Dans :
    20.valueArray {
      10.label = Titre et Mots clés
      20.label = Contenu de la page
    }
    40.value = Rechercher
}

# ***********************
#  Page de résultats
# *********************** 

tt_content.search.20 {

# rendu des titres des pages / résultats
renderObj.10 = TEXT
renderObj.10 {
textStyle > 
fontTag > 
wrap = <p><span class="titreRecherche">|</span><br>
}

# rendu des descriptions (on coupe à 200 caractères)
renderObj.20 = COA
renderObj.20 {
stdWrap.crop = 200 | &nbsp;[...]
stdWrap.wrap = |</p>
stdWrap.textStyle > 
}


renderWrap = |<div class="hr"><hr /></div>

# Si résultat trouvé

layout.10 = TEXT
layout.10 {
value = Résultats de la recherche : ###RANGELOW###-###RANGEHIGH### 
de ###TOTAL###
fontTag >
wrap = <span class="scale">|</span>
}

layout.20 = TEXT
layout.20 {
value = ###PREV###&nbsp;&nbsp;&nbsp;###NEXT###
fontTag >
wrap = <span class="goto">|</span>
}

layout.wrap = <div id="range"> | </div> ###RESULT###

next.value = Suite
prev.value = Retour

target = _self

# Nombre de résultats/page
range = 10


# sans aucun résultat

noResultObj.10 = TEXT
noResultObj.10 {
value = Désolé, aucun résultat n'a été trouvé !
fontTag > 
wrap = <span class="keyword">|</span>
}
noResultObj.wrap = <p>|</p>


}