Annexe C: HOW-TOs / Trucs & Astuces/moteur recherche multiselect

De TheliaDoc
Aller à : navigation, rechercher

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

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 :

  1. des rubriques du catalogue (valeur possible : rubrique homme, rubrique femme, rubrique enfant...)
  2. et/ou des fabricants (recherche sur une première caractéristique : "fabricant". valeur possible : "fab1", "fab2"... ),
  3. 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"...),
  4. 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. Dans le cas contraire la propriété name suffira à transmettre correctement le couple critère/valeur à 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 :

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

pour une url de 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" />


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. Vous aurez sans doute à 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 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 appels aux 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>
<THELIA_PRODUITtest type="PRODUIT" rubrique="#RUBRIQUE_ID" caracteristique="#CARACTERISTIQUE_ID" 
caracdisp="#CARACTERISTIQUE_DISP" declidisp="#DECLINAISON_DISP" >
<li>#TITRE......</li>
</THELIA_PRODUITtest>
</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€"... 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.

Un exemple reproduisant ce tutoriel est disponible ici (cliquer sur le lien "recherche" du menu principal)


Testé sous I.E 7 - FF2+ - SAFARI Avec Téhlia 1.3.8


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