Affichage du moteur de recherche
Publié le
Nous allons tout d'abord mettre en place notre moteur de recherche côté frontoffice. Cela consiste simplement à afficher à l'utilisateur le formulaire contenant l'ensemble des caractéristiques ainsi que leurs valeurs.
Voici la vue avant la création du moteur de recherche :
Notre moteur de recherche fera son apparition juste au dessus de la liste des produits, vous pouvez bien entendu le mettre là où bon vous semble.
Le fichier concerné par la mise en place du formulaire est le fichier « category.html » qui se trouve dans « templates/frontOffice/default/ ».
Voici le code HTML à mettre en place :
{ifloop rel="features"}
<h2>{intl l="Moteur de recherche"}</h2>
<div class="well clearfix" id="advanced-search-engine">
{* On liste les features (caractéristiques) *}
{loop name="features" type="feature"}
{* Si la boucle feature-availability retourne des résultats *}
{ifloop rel="feature-availability"}
<div class="feature-group col-lg-2">
<h3 class="feature-title" data-feature-id="{$ID}">{$TITLE}</h3>
<ul class="list-unstyled">
{* Pour chaque features, on liste les feature-availability (valeurs de caractéristique) associées *}
{loop name="feature-availability" type="feature-availability" feature="$ID"}
<li>
<label for="feature-{$ID}">
<input id="feature-{$ID}" type="checkbox" name="feature-availability[]" value="{$ID}" class="feature-values"/> {$TITLE}
</label>
</li>
{/loop}
</ul>
</div>
{/ifloop}
{/loop}
</div>
{/ifloop}
Pour en savoir plus sur les boucles, merci de vous reporter à la documentation en ligne : http://doc.thelia.net/en/documentation/loop
Notre morceau de code va donner le rendu suivant sur la page des catégories :
Passons maintenant à la partie soumission du formulaire en javascript. Nous allons ici utiliser le framework Jquery et utiliser le point d'entrée du template par défault « javascript-initialization » :
<script>
jQuery(function($){
// Quand une case à cocher change d'état, on lance la recherche
$('.feature-values').on('change', function(){
reloadSearch();
});
// Fonction de recherche
function reloadSearch(){
var searchArgs = [], // Tableau qui va stocker la recherche
featureAvailabilityList = ''; // Liste des valeurs de caractéristique qui seront demandées
// Pour chaque caractéristique
$('.feature-group').each(function(){
// On stock l'id de la caractéristique
var category = $('.feature-title', $(this)).data('feature-id');
// On stock les valeurs de caractéristique cochées
var $checkedValues = $('.feature-values:checked', $(this));
// On remplit un tableau avec les valeurs de caractéristiques
var values = [];
$checkedValues.each(function(){
values.push($(this).val());
});
// On remplit un tableau associatif contenant l'id de la caractéristique et les valeurs associées
var featureCouple = [];
featureCouple['feature-category'] = category;
featureCouple['feature-values'] = values;
// On remplit le tableau de recherche
searchArgs.push(featureCouple);
});
// Pour chaque couple (caractéristique + valeurs) présents dans la recherche
$.each(searchArgs, function(k, v){
var category = v['feature-category'];
/*
* On join toutes les valeurs de caractéristque avec un pipe
* pour que le format correspondent au format attendu par la boucle
*/
var valuesList = v['feature-values'].join("|");
/*
* Si la liste n'est pas vide on lui ajoute une virgule de fin pour qu'elle puisse être concaténée
* avec une autre liste (<carac1:valeur1,valeur2>,<carac2:valeur1,valeur2>,)
*/
if(category != '' && valuesList != ''){
featureAvailabilityList += category + ":" + valuesList + ",";
}
});
// On supprime la virgule de fin qui ne sert à rien dans notre liste finale
featureAvailabilityList = featureAvailabilityList.substring(0,featureAvailabilityList.length-1);
/*
* On charge la vue ajax de notre liste de produit en lui passant la liste des caractéristiques
* correspondant à la recherche de l'utilisateur
*/
$('#category-products').load(
'/product/ajaxList',
{literal}
{
featureAvailabilityList: featureAvailabilityList
}
{/literal}
);
});
</script>
{/block}
Ici nous appelons en ajax la route « produts/ajaxList », nous allons donc maintenant gérer l'appel de cette nouvelle route grâce à notre module.
Ajouter votre commentaire
Les commentaires