Sommaire

1 1ère Partie : créer un moteur de recherche multi sélections
2 2nde partie : annexes : améliorations sur le moteur
- 2.1 Annexe 1 : Garder en mémoire le choix du visiteur pour les critères spécifiés

1ère Partie : créer un moteur de recherche multi sélections

Introduction :

Niveau : débutant

Ce mini tutoriel a pour but de détailler pas-à-pas la mise en place d'un moteur de recherche multi sélections : la méthode se base sur l'utilisation des boucles Thélia, sans aucune ligne de code php à prévoir.

Pré-requis

Pour arriver à vos fins, avec l'aide de ce tutoriel, vous devrez au préalable :

Savoir lire
Maîtriser les bases du html
Maîtriser les bases du CSS
Avoir installé Thélia (en local ou distant),
Maîtriser les principaux concepts de Thélia,
Avoir créé des rubriques et des produits que vous aurez dotés de caractéristiques et / ou de déclinaisons.

La cible

Nous cherchons à réaliser un moteur basé sur un ensemble de critères de recherche ; ces critères sont représentés par des listes déroulantes : l'utilisateur peut renseigner zéro, un ou plusieurs critères puis lancer sa recherche.

Les types de critères de recherches sont variés : vous pouvez imaginer une recherche en fonction des rubriques, sur les produits nouveaux ou en promotion, sur les caractéristiques ou les caractéristiques "libres" (caracval), les déclinaisons ou les declinaisons libres (decval)…

Le résultat de la recherche consistera en une liste des produits répondant au(x) critère(s) renseigné(s) dans le moteur.

Points forts de la solution :

Mise en place aisée

Sollicitation des boucles Thélia

Pas de codage php

Javascript réduit à sa portion congrue

Points faibles de la solution :

Pas de contrôle de cohérence sur les critères de recherche : ainsi un client pourra-t-il lancer une recherche de produits classés dans la rubrique « voiture » dont la marque est « Adidas » et qui ont la taille « moins de 5 cm »… Ce qui ne veut bien évidemment rien dire et ne renverra aucun résultat.

Pas de multi rubrique : la recherche ne pourra s'effectuer que sur une seule rubrique ou sur l'intégralité du catalogue.

Contrainte de gestion des déclinaisons dans le back office (voir infra)

Etape 1 : Le formulaire html

Cette première partie se déroule sur le fichier html de la page où est prévu votre moteur : par exemple si le moteur est mis à disposition sur la page d'accueil, nous coderons les lignes suivantes sur notre fichier index_page.html.

N'oubliez-pas que vous pouvez aussi créer votre moteur de recherche à partir d'un fichier html vierge que vous nommez par exemple motrech.html. Créez aussi le fichier php correspondant motrech.php puis à l'aide de la fonction #INCLURE "motrech.html", appelez-le à différents endroits sur différentes pages.

Nous allons partir d'un formulaire html très classique se présentant de la façon suivante :


<!-- Le formulaire -->
<form> 

<!-- Critère de recherche 1 -->
<select>
<!-- Valeurs du critère  1 -->
<option></option>

<option></option>

<option></option>

...

</select>

 
<!--Critère de recherche 2 -->
<select>
<!-- Valeurs du critère  2 -->
<option></option>

<option></option>

<option></option>

...

</select>

...


<!-- Le bouton « Chercher  -->
<input type="submit" value="Chercher"/>

</form>

Etape 2 : Paramétrage du formulaire

Nous allons maintenant compléter le formulaire pour l'adapter à notre besoin :

Dans cet exemple, nous allons créer un moteur permettant une recherche en fonction de 4 critères possibles (cumulables et optionnels) : A ce stade nous partons du principe que les rubriques, les produits, les caractéristiques et les déclinaisons dont nous avons besoin sont créés dans le back office de votre boutique Thélia.

Nous souhaitons une recherche de produits en fonction :

des rubriques du catalogue (valeur possible : rubrique homme, rubrique femme, rubrique enfant...)
et/ou des fabricants (recherche sur une première caractéristique : "fabricant". valeur possible : "fab1", "fab2"... ),
et/ou de la disponibilité du produit (recherche sur une seconde caractéristique : "disponibilité". valeur possible : "en stock", "1 semaine", "1 mois"," rupture de stock"...),
et/ou des couleurs disponibles pour les produits (recherche sur une déclinaison : "couleur". valeur possible : "bleue", "jaune", "rouge"...).

Cliquer sur le lien (ou le bouton) "recherche" génèrera une url, contenant les paramètres de la recherche et pointant vers la page de résultat. Celle-ci contiendra une boucle Thélia permettant d'afficher les produits répondant aux critères spécifiés dans l'url. Voici comment....

1°) "id", "name", "method"...

les différentes balises de notre formulaire vont être identifiées ou nommées et des propriétés vont leur être attribuées. Les balises qui doivent être manipulées par le script javascript devront être dotées d'un id pour les identifier. Pour les autres, la propriété name suffira à transmettre correctement le couple critère(ex : couleur)/valeur (ex : bleue) à l 'url

La balise <form> :

<form action="rechresult.php" method="get" id="formRech">

action : la page appelée : rechresult.php

method : passez "get" pour vérifier le rendu des critères de recherche dans l'url apparaissant dans votre barre de navigation. Passez sur "post" quand vous aurez finalisé votre formulaire.

id : le formulaire sera reconnu par cet id dans le script js.

Le <select>du critère "rubrique" :

<select name="id_rubrique"></select>

name : respecter strictement la dénomination "id_rubrique" : ainsi le couple critère/valeur concernant le critère "rubrique" sera correctement représenté dans l'url pointant sur la page des résultats - ex : rechresult.php?id_rubrique=1&....... La boucle récupérant le résultat de la recherche, sur la page de résultat (décrite ci-dessous) sera ainsi capable de récupérer la valeur de la rubrique ciblée dans la recherche.

les <select> des critères "caractéristique1"(fabricant) et "caracteristique2" (disponibilité)

Nous avons 2 caractéristiques différentes à récupérer pour l'url à destination du résultat. Or nous ne pouvons pas créer une url de ce type :

rechresult.php?id_rubrique=1&caracteristique=1&caracteristique=2&....

Selon les règles de Thélia il faut créer une url de ce genre :

rechresult.php?id_rubrique=1&caracteristique=1-2&.....

Voilà précisément où interviennent le script js et les balises cachées (voir infra) : le script va récupérer les valeurs des <select> liés à des caractéristiques, et les réagencer selon les normes de Thélia dans les balises cachées qui seront transmises à l'url ; à ce stade il faut donc prévoir un id pour les <select> dédiés aux caractéristiques afin de les manipuler dans le script :

<select id="fabricant"></select>

<select id="disponibilite"></select>

Le <select> du critère déclinaison (couleur)

Mêmes règles que pour le critère "rubrique" : la déclinaison et sa valeur n'ont pas besoin d'une manipulation particulière : la balise sera donc juste dotée d'un name dont la dénomination est à respecter scrupuleusement :

<select name="declidisp"></select>

pour, au final, obtenir une url de ce type :

rechresult.php?id_rubrique=1&caracteristique=1-2&caracdisp=3-5&declidisp=3"

Pour rester simple, à ce stade, il convient de noter une limitation de notre moteur : la recherche ne fonctionnera correctement avec les déclinaisons qu'à la condition que tous les produits portent toutes les déclinaisons : il faudra dans le BO, au niveau de chaque produit, préciser s'il faut activer ou non chaque valeur des déclinaisons : en d'autres termes, vous vous privez de pouvoir gérer, en fonction des rubriques, l'attribution ou non de telle ou telle déclinaison sur les produits : il faudra le spécifier au niveau de chaque fiche produit Je suppose qu'une légère modification du cœur de Thélia suffirait à résoudre cette contrainte mais l'objectif de ce tutoriel est justement de ne pas y mettre ne serait-ce qu'un ongle....

2°) les balises cachées

Selon la logique exposée plus haut, il faut prévoir des balises cachées simples (par exemple des <input>) paramétrées pour recevoir le résultat du script : devant transmettre à l'url les différentes caractéristiques (fabricant, disponibilité) et valeurs (fab1, fab2, en stock, 1 semaine...) ciblées par la recherche, elles seront codées exactement comme cela (respecter toute la syntaxe) :

<input type="hidden" id="caracteristique" name="caracteristique" />

<input type="hidden" id="caracdisp" name="caracdisp" />

La première balise collectera les id des caractéristiques dont une valeur (caracdisp) a été spécifiée. La seconde collectera les id des caracdisp spécifiés

Ainsi, nous transmettons bien à l'url les couples critères(fabricant, disponibilité...) / valeurs(fab1, en stock...) qui permettront de cibler les produits à afficher sur la page résultat.

3°) les boucles

Notre formulaire à ce stade est une suite de liste de valeurs ; chaque liste correspond à 1 critère de recherche. Mais ces listes sont vides et il faut les remplir des valeurs que chaque critère peut prendre.

Pour les valeurs de chaque critère (les <option> des <select>), nous afficherons évidemment leurs #TITRES dans les listes destinés au choix du visiteur, et nous récupérerons les #ID pour l'url, ce qui, dans le langage des boucles Thélia s'écrit :

ex : la boucle du critère de recherche "rubrique" s'écrira :

<THELIA_RUBRIQUErech type="RUBRIQUE" parent="0" >
<option value="#ID-">#TITRE</option> 
</THELIA_RUBRIQUErech>

Vous n'avez pas à adapter cette boucle, elle est générique ; si vous souhaitez une recherche sur les rubriques mais aussi les sous-rubriques, sous-sous-rubriques...., supprimez simplement le paramètre d'entrée parent

Pour les 3 autres boucles de l'exemple, elles sont décrites dans le résultat final ci-dessous. N'oubliez pas d'adapter les id des paramètres caractéristique et declinaison des ces 3 dernières en fonction de votre propre configuration.

4°) le bouton/lien "rechercher"

Le lien/bouton proposé à l'étape 1 va être adapté.

Nous utiliserons une simple balise html déclenchant l'appel du script javascript grâce à l'évènement onClick : dans mon exemple :

<a onClick=" rechercher()">chercher</a>

Le script se chargera donc :

de ré-arranger les valeurs (les id des caractéristiques et les id caracdisp) sélectionnées pour les critères basés sur les caractéristiques, et de transmettre ces valeurs aux balises cachées selon la nomenclature définie par Thélia.
de déclencher l'appel à la page de résultats en y incluant les critères définis pour la recherche dans l'url (la fonctionsubmit)

5°) Le résultat final du moteur

<form action="rechresult.php" method="get" id="formRech">

 <input type="hidden" id="caracteristique" name="caracteristique" />
 <input type="hidden" id="caracdisp" name="caracdisp" />   
           
 <select name="id_rubrique">
  <option selected="selected">Rubrique</option>
  <option value="">Toutes les rubriques</option>
  <THELIA_RUBRIQUErech type="RUBRIQUE" parent="0" >
  <option value="#ID-">#TITRE</option>       
  </THELIA_RUBRIQUErech>
 </select>
           
 <select id="fabricant">
  <option selected="selected" value="">fabricant</option>
  <option value="">Tous</option>
  <THELIA_CARACDISPrech1 type="CARACDISP" caracteristique="1-" >
  <option value="#ID-">#TITRE</option>
  </THELIA_CARACDISPrech1>
 </select>
           
 <select id="disponibilite">
  <option selected="selected" value="">disponibilité</option>
  <option value="">Tous</option>
  <THELIA_CARACDISPrech2 type="CARACDISP" caracteristique="2-" >
  <option value="#ID-">#TITRE</option>
  </THELIA_CARACDISPrech2>
 </select>           
           
 <select id="couleur" name="declidisp">           
  <option selected="selected" value="">Couleur</option>
  <option value="">Toutes</option>
  <THELIA_DECLIDISPrech1 type="DECLIDISP" declinaison="1-" >
  <option value="#ID-">#TITRE</option>
  </THELIA_DECLIDISPrech1>
 </select>

 <a onClick=" rechercher()">chercher</a>
</form>

Etape 3 : le script javascript

Les manipulations décrites plus haut sont réalisées par le script ci-dessous. Assurez-vous :

De le placer dans le header de vos pages : par exemple copier-coller-le sur le fichier meta.html du template de base
Si vous avez d'autres scripts et notamment un appel à jquery, de placer le script du moteur au-dessus de tous les autres (je ne sais pas pourquoi)
De l'adapter à vos propres paramètres : il est conçu pour remonter dans le <input> caché id="caracteristique", les id des caractéristiques 1 (fabricant) et 2 (disponibilité) et dans le <input> caché id="caracdisp" les valeurs choisies pour ces 2 caractéristiques (les id des caracdisp):
- copiez-coller les blocs conditionnels if.... si vous avez plus de 2 caractéristiques,
- adaptez les noms des id en fonction de votre moteur,
- adaptez les valeurs en fonction des id de vos propres caractéristiques.
- ...

<script type="text/javascript">
function rechercher(){

        if(document.getElementById('fabricant').value){

                document.getElementById('caracteristique').value+="1-";

                document.getElementById('caracdisp').value+=document.getElementById('fabricant').value;

        }
       
        if(document.getElementById('disponibilite').value){

                document.getElementById('caracteristique').value+="2-";

                document.getElementById('caracdisp').value+=document.getElementById('disponibilite').value;

        }
       
 

                document.getElementById('formRech').submit();

 }
</script>

Etape 4 : la page résultat

Comme nous l'avons vu, le formulaire codé ci-dessus créé une url de type :

rechresult.php?#id_rubrique=1&caracteristique=1-2&caracdisp=1-4&declidisp=3

Nous devons donc créer une page rechresult.html et une page rechresult.php selon la nomenclature Thélia. La page html s'affichera suite à une recherche.

1°) la page rechresult.php

Sans surprise, quelques lignes de code à copier-coller d'une semblable et à adapter au niveau de l'appel au squelette html, ce qui donne au final :

<?php
    $fond="rechresult.html";
    $securise=1;
    $pageret=1;
    include("fonctions/moteur.php");

?>

2°) la page rechresult.html

Vous la dessinez comme bon vous semble du moment qu'elle contient la boucle capable d'afficher les résultats de votre recherche :

Reprenons l'url ci-dessus, générée suite à une requête sur notre moteur de recherche :

rechresult.php?#id_rubrique=1&caracteristique=1-2&caracdisp=3-5&declidisp=3

Avec les valeurs spécifiées depuis le début de notre exemple, vous rechercheriez les produits pour homme (rubrique = 1), du fabricant Fab3 (caracteristique = 1 ; caracdisp = 3) en stock (caracteristique =2 ; caracdisp = 5) et de couleur rouge (declidisp = 3)

La boucle permettant d'afficher le résultat d'une recherche sur les rubriques, les caractéristiques et les déclinaisons dans Thélia, sous forme d'une liste, s'écrit ainsi:

<ul>
<T_RESULTRECH>
<THELIA_RESULTRECH type="PRODUIT" rubrique="#RUBRIQUE_ID" caracteristique="#CARACTERISTIQUE_ID" 
caracdisp="#CARACTERISTIQUE_DISP" declidisp="#DECLINAISON_DISP" >
<li>#TITRE......</li>
</THELIA_RESULTRECH>
</T_RESULTRECH>
Aucun résultat pour les critères spécifiés
<//T_RESULTRECH>
</ul>

Si vous utilisez d'autres types de critères comme le critère "nouveau" ou des cacarcval ou encore les decval, pensez à adapter cette boucle !

Astuce : pour une recherche en fonction de tranches de prix des produits disponibles, vous pouvez, pour faire simple :
- créer une caractéristique "tranche" avec des valeurs équivalentes aux tranches que vous avez défini, par exemple : valeur 1 = "de 0 à 50€" ; valeur 2 = "de 51 à 100€" etc.
- Dans chaque fiche produit vous attribuez la tranche correspondante au prix du produit.
- Créez votre critère de recherche "tranche" selon la méthode décrite ici.

Vous disposez maintenant d'un moteur de recherche dynamique, performant et totalement personnalisé, sans aucune connaissance ni manipulation en php, qu'il ne vous reste plus qu'à mettre en forme.

2nde partie : annexes : améliorations sur le moteur

De nombreuses améliorations fonctionnelles sont possibles pour agrémenter l'expérience de vos visiteurs. Dans cette partie sont détaillées quelques astuces.

Annexe 1 : Garder en mémoire le choix du visiteur pour les critères spécifiés

Il est intéressant de pouvoir commencer une rechercher avec un critère puis de l'affiner progressivement par l'ajout de critères supplémentaires (ceci suppose que le moteur de recherche est disponible sur la page de résultat : vous affinez votre recherche grâce au choix de critère(s) supplémentaire(s) et relancez la recherche à chaque fois). En l'état, le moteur décrit plus haut ne le permet pas : à chaque recherche les champs sont réinitialisés : il faudra renseigner à nouveau tous les champs souhaités ce qui est peu ergonomique.

Voici une solution, utilisant la propriété de l'attribut "selected" des <option> en html : cet attribut permet d'afficher une valeur par défaut dans une liste déroulante. Il sera attribué dynamiquement (grâce à php) à chaque valeur sélectionnée par le visiteur lors de son premier clic sur le bouton "rechercher".

a) Modifier la ou les page(s) contenant le formulaire de recherche et le résultat :

Les squelettes html sur lesquels vous écrirez le script php doivent pouvoir contenir... du php : la manipulation est simple et décrite sur le wiki ici :

[1]

Le but est de permettre une recherche progressive : le visiteur doit pouvoir lancer une seconde recherche par dessus une première : le moteur doit donc être disponible sur la page résultat (2 exemples : la page résultat est un INCLUDE dans la page recherche, ou bien le moteur et le script sont copiés-collés sur la page résultat. D'autres façons sont envisageables.)

b) Préparer le formulaire :

La méthode doit être passée à "post"
Si des <option> de vos <select> ont déjà l'attribut "selected", il faut supprimer cet attribut.
Doter tous les <select> d'un attribut <name> : dans la 1ère partie, je n'avais pas ajouté de <name> aux critères liés à des caractéristiques parce qu'ils étaient gérés par javascript (grâce à leurs "id") : je dois donc maintenant leur prévoir aussi un <name> (dans l'exemple : xxx et yyy)

c) Insérer les lignes suivantes au-dessus du formulaire :

(à adapter bien sûr à votre propre contexte : remplacer "xxx" et "yyy" par les valeurs attribuées aux <name> de votre formulaire. A compléter en fonction du nombre de critères disponibles pour la recherche)

<?php
function choixParDefaut($valeurclient)
{
$par_defaut = '';

if (isset($_POST['id_rubrique']) OR isset($_POST['xxx']) OR isset($_POST['yyy']) OR isset($_POST['declidisp']))
{
if ($_POST['id_rubrique'] == $valeurclient OR $_POST['xxx'] == $valeurclient OR $_POST['yyy'] == $valeurclient OR $_POST['declidisp'] == $valeurclient)
{
$par_defaut='selected="selected"'; 
}
}
return $par_defaut; 
}


?>

d) Appeler la fonction php créée dans les <option> des <select>

<option value="#ID-" <? echo choixParDefaut('#ID-'); ?> >#TITRE</option>

Ainsi, si votre visiteur lance une recherche sur une rubrique par exemple (homme), le résultat affiche les produits de la rubrique homme et le champ "rubrique" reste spécifié sur "homme". Il peut alors choisir un (ou +) nouveau(x) critère(s) supplémentaire(s), par exemple le fabricant : s'il choisit Fab3 s'afficheront les produits pour homme de la marque Fab3 etc.

Testé sous I.E 7 - FF2+ - SAFARI Avec Thélia 1.3.8

--Ottoroots 6 février 2009 à 22:49 (UTC)

Moteur recherche multiselect

Sommaire

1ère Partie : créer un moteur de recherche multi sélections

Introduction :

Pré-requis

La cible

Etape 1 : Le formulaire html

Etape 2 : Paramétrage du formulaire

1°) "id", "name", "method"...

2°) les balises cachées

3°) les boucles

4°) le bouton/lien "rechercher"

5°) Le résultat final du moteur

Etape 3 : le script javascript

Etape 4 : la page résultat

1°) la page rechresult.php

2°) la page rechresult.html

2nde partie : annexes : améliorations sur le moteur

Annexe 1 : Garder en mémoire le choix du visiteur pour les critères spécifiés

Menu de navigation

Outils personnels

Espaces de noms

Variantes

Affichages

Actions

Rechercher

Navigation

Outils