J'utilise sur mon site e-majine le widget de recherche avancée du catalogue. Plusieurs propriétés additionnelles étant disponibles, j'aimerais pouvoir faire une recherche multicritère sur une base de case à cocher. Comment faire ?
Voici le mode opératoire à mettre en place pour pouvoir effectuer une recherche sur plusieurs valeurs de propriétés additionnelles (checkbox). Prenons l'exemple d'un site e-commerce de lingerie, deux produits principaux sont en vente, des soutien-gorges et des collants.
Étape 1 : Création des propriétés additionnelles depuis le back-office d'e-majine
Étape 2 : Mise en place de deux widgets de recherche avancée dans le back-office. - L'un pour les soutien-gorge, l'autre pour les collants. Dans notre exemple, nous configurons qu'un seul widget, celui pour les soutien-gorges, la procédure reste la même pour l'autre widget.
- L'identifiant de la recherche servira à la création d'un template html. Exemple : "searchsoutiengorges"
- Les propriétés additionnelles correspondants aux critères de recherche (couleur, taille, forme, etc.) seront à sélectionner pour qu'elles soient affichées dans le widget.
Étape 3 : Création d'un template html- Copier-coller le template box_search.html disponible depuis l'espace FTP > html > modeles > fr > catalog > search puis renommer le en rajoutant "l'identifiant de votre widget". Dans notre cas d'exemple : "box_search_searchsoutiengorges.html"
Etape 4 : Modification du template "box_search_searchsoutiengorges.html"- Supprimer les informations du template en collant puis ajustant le bloc html suivant.
- Chaque bloc de propriétés additionnelles est intégré dans une div
- Chaque valeur de propriétés additionnelles est intégrée dans un label
- Pour récupérer l'id de la propriété additionnelle, il faut passer en mode console via firebug depuis le manage en cliquant sur la propriété add. respective > modifier
<div class="widget widgetCatalogSearch" mXattribut="class:box_class">
<mx:bloc id="widgetTitle"><h4><mx:text id="widgetTitle" /></h4></mx:bloc id="widgetTitle">
<div class="widgetContainer">
<form class="catalog_search_form" method="post" mXattribut="action:action">
<fieldset>
<div class="row itemStyle">
<!-- Pour recuperer l'id de la propriete additionnelle, il faut passer en mode console via firebug depuis le manage
en cliquant sur la propriete respective > modifier
Exemple pour la propriete "style soutien gorges" :
GET http ://monprojet.fr/manage/catalogue/configuration/index.php?ch=manage&id=7&action=edit&_=1305665135738
L'id a retenir est le numero 7. Ce numero est a inserer au niveau des champs name & mXattribut
-->
<input type="hidden" name="add_fields[7][cond]" value="AND" />
<h5>Styles</h5>
<br/>
<label for="Brassiere"> <input type="checkbox" name="add_fields[7][value][]" id="Brassiere" value="Brassiere" mXattribut="checked:field7checkedBrassiere" /> Brassiere</label>
<label for="Balconet"> <input type="checkbox" name="add_fields[7][value][]" id="Balconet" value="Balconet" mXattribut="checked:field7checkedBalconet" /> Balconet</label>
<label for="Bandeau"> <input type="checkbox" name="add_fields[7][value][]" id="Bandeau" value="Bandeau" mXattribut="checked:field7checkedBandeau" /> Bandeau</label>
<label for="Triangle"> <input type="checkbox" name="add_fields[7][value][]" id="Triangle" value="Triangle" mXattribut="checked:field7checkedTriangle" /> Triangle</label>
<label for="PushUp"> <input type="checkbox" name="add_fields[7][value][]" id="PushUp" value="PushUp" mXattribut="checked:field7checkedPushUp" /> Push UP</label>
<label for="Armature"> <input type="checkbox" name="add_fields[7][value][]" id="Armature" value="Armature" mXattribut="checked:field7checkedArmature" /> Armature</label>
<label for="Rembourre"> <input type="checkbox" name="add_fields[7][value][]" id="Rembourre" value="Rembourre" mXattribut="checked:field7checkedRembourre" /> Rembourré</label>
</div>
<div class="row itemCouleur">
<input type="hidden" name="add_fields[6][cond]" value="AND" />
<h5>Couleurs</h5>
<br/>
<label for="Noir"> <input type="checkbox" name="add_fields[6][value][]" id="Noir" value="Noir" mXattribut="checked:field6checkedNoir" /> Noir</label>
<label for="Creme"> <input type="checkbox" name="add_fields[6][value][]" id="Creme" value="Creme" mXattribut="checked:field6checkedCreme" /> Creme</label>
<label for="Ecru"> <input type="checkbox" name="add_fields[6][value][]" id="Ecru" value="Ecru" mXattribut="checked:field6checkedEcru" /> Ecru</label>
<label for="Blanc"> <input type="checkbox" name="add_fields[6][value][]" id="Blanc" value="Blanc" mXattribut="checked:field6checkedBlanc" /> Blanc</label>
<label for="NoirBrode"> <input type="checkbox" name="add_fields[6][value][]" id="NoirBrode" value="NoirBrode" mXattribut="checked:field6checkedNoirBrode" /> Noir Brode</label>
<label for="Jaune"> <input type="checkbox" name="add_fields[6][value][]" id="Jaune" value="Jaune" mXattribut="checked:field6checkedJaune" /> Jaune</label>
<label for="Amande"> <input type="checkbox" name="add_fields[6][value][]" id="Amande" value="Amande" mXattribut="checked:field6checkedAmande" /> Amande</label>
<label for="Marine"> <input type="checkbox" name="add_fields[6][value][]" id="Marine" value="Marine" mXattribut="checked:field6checkedMarine" /> Marine</label>
<label for="Chocolat"> <input type="checkbox" name="add_fields[6][value][]" id="Chocolat" value="Chocolat" mXattribut="checked:field6checkedChocolat" /> Chocolat</label>
<label for="Rose"> <input type="checkbox" name="add_fields[6][value][]" id="Rose" value="Rose" mXattribut="checked:field6checkedRose" /> Rose</label>
<label for="RoseNoir"> <input type="checkbox" name="add_fields[6][value][]" id="RoseNoir" value="RoseNoir" mXattribut="checked:field6checkedRoseNoir" /> Rose Noir</label>
<label for="Ivoire"> <input type="checkbox" name="add_fields[6][value][]" id="Ivoire" value="Ivoire" mXattribut="checked:field6checkedIvoire" /> Ivoire</label>
<label for="Rouge"> <input type="checkbox" name="add_fields[6][value][]" id="Rouge" value="Rouge" mXattribut="checked:field6checkedRouge" /> Rouge</label>
<label for="RosePoudre"> <input type="checkbox" name="add_fields[6][value][]" id="RosePoudre" value="RosePoudre" mXattribut="checked:field6checkedRosePoudre" /> Rose Poudre</label>
<label for="PoudreIvoire"> <input type="checkbox" name="add_fields[6][value][]" id="PoudreIvoire" value="PoudreIvoire" mXattribut="checked:field6checkedPoudreIvoire" /> Poudre Ivoire</label>
<label for="VioletNoir"> <input type="checkbox" name="add_fields[6][value][]" id="VioletNoir" value="VioletNoir" mXattribut="checked:field6checkedVioletNoir" /> Violet Noir</label>
<label for="LeopardNoir"> <input type="checkbox" name="add_fields[6][value][]" id="LeopardNoir" value="LeopardNoir" mXattribut="checked:field6checkedLeopardNoir" /> Leopard Noir</label>
<label for="GrisNoir"> <input type="checkbox" name="add_fields[6][value][]" id="GrisNoir" value="GrisNoir" mXattribut="checked:field6checkedGrisNoir" /> Gris Noir</label>
<label for="Bleu"> <input type="checkbox" name="add_fields[6][value][]" id="Bleu" value="Bleu" mXattribut="checked:field6checkedBleu" /> Bleu</label>
<label for="Violet"> <input type="checkbox" name="add_fields[6][value][]" id="Violet" value="Violet" mXattribut="checked:field6checkedViolet" /> Violet</label>
<label for="Taupe"> <input type="checkbox" name="add_fields[6][value][]" id="Taupe" value="Taupe" mXattribut="checked:field6checkedTaupe" /> Taupe</label>
<label for="RoseIvoire"> <input type="checkbox" name="add_fields[6][value][]" id="RoseIvoire" value="RoseIvoire" mXattribut="checked:field6checkedRoseIvoire" /> Rose Ivoire</label>
</div>
</fieldset>
<div class="submit">
<input type="hidden" value="%" name="search_string" />
<input type="submit" name="button" value="Voir les Résultats" />
</div>
</form>
</div>
</div>
A vous de jouer. N'hésitez pas à poster pour tout complément d'information à ce sujet.
NB: cette recherche avancée multicritères via des checkbox passe pour le moment par la création d'un template html, il faudra donc créer et si besoin modifier les valeurs de façon statique. Bien entendu, le widget de recherche avancée peut évoluer, n'hésitez pas pour cela à créer une suggestion d'évolution en ce sens.
