Filtre de recherche multi-critères

Septembre 2018

Bonjour,
J’ai créé un nouvel objet éditorial "Séjours" avec la fabrique, avec pas mal de champs ajoutés avec Champs Extras.

Je désire créer un moteur de recherche qui permet à l’utilisateur d’affiner ses résultats en 3 étapes (au moins) :
– par saison
– puis par âge
– enfin par thème

Quand on sélectionne un item dans le 1er menu déroulant, le deuxième, puis le troisième menu se mettent automatiquement à jour pour ne donner que les items qui sont rattachés au premier puis au second menu...

Les recherches, indépendamment des unes des autres fonctionnent bien. Exemple ci-dessous avec "Saisons" et "Thèmes" :

<div class="formulaire_spip sejours">
<BOUCLE_sejours_recherche (SEJOURS) {0,1}> 
#SET{par_saison,#LISTER_CHOIX**{saisons}}
#SET{par_theme,#LISTER_CHOIX**{theme}}

<form action="[(#ENV{action})]" method="GET" class='bouton_action_post ajax'>
[(#ENV{action}|form_hidden)]
 <select name="saisons" onchange="submit()">
      <option value=""><:sejours_recherche_saisons:></option>
      <BOUCLE_par_saison(DATA){source table, #GET{par_saison}}> 
      [<option value="#CLE" >[(#VALEUR)]</option>]
      </BOUCLE_par_saison>
      </select>

      <select name="themes" onchange="submit()">
      <option value=""><:sejours_recherche_themes:></option>
      <BOUCLE_par_theme(DATA){source table, #GET{par_theme}}> 
      [<option value="#CLE" >[(#VALEUR)]</option>]
      </BOUCLE_par_theme>
      </select>
</form>
</BOUCLE_sejours_recherche>
</div>

En m’inspirant de ce post (https://forum.spip.net/fr_237784.html), je met le premier menu déroulant sous condition :

<BOUCLE_test_theme(CONDITION){si #ENV{themes}}>

suivi du premier menu avec un critère supplémentaire dans la boucle :

<BOUCLE_par_saison_si_theme(DATA){source table, #GET{par_saison}} {themes=#ENV{themes}}>

puis

<BOUCLE_test_saison(CONDITION){si #ENV{saisons}}>

suivi du second menu déroulant avec aussi un critère

<BOUCLE_par_theme_si_saison(DATA){source table, #GET{par_theme}} {saisons=#ENV{saisons}}>

Je résume ici mais tout cela fonctionne bien avec 2 menus successifs.
Mais, avec 3 étapes (ou plus), cette solution me semble impossible à mettre en place...
Qu’en pensez-vous ? Voyez-vous une solution alternative ?

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

1

peetdu

Septembre 2018

Bonsoir mcommemarc,

J’avais promis d’écrire un article sur ce sujet, et voilà :
https://contrib.spip.net/Controleur-Vue-avec-SPIP

C’est encore un peu sommaire, mais je pense que cela devrait t’aider.
Dis moi…
Indiquez l’intérêt que vous portez à cette réponse

1

peetdu

Septembre 2018

D’ailleurs, ce serait plutôt categorie entre les accolades, non ?

Yep, doc corrigée.

Si 2 "categories" par exemple sont sélectionnés…

si je comprend bien, tu utilises un sélecteur multiple ?
[(#SAISIE{selection_multiple, categorie,
C’est ça ?

Ce que je ne sais pas, c’est ce que cela va te renvoyer comme valeur de ’categorie’.
Tu pourrais dans ta VUE inclure ceci
[<pre>(#ENV**|unserialize|print_r{1})</pre>]
…qui va te retourner les variables d’environnement ainsi que la valeur de #ENV{categorie}.

Ensuite, en fonction du résultat, la lecture https://www.spip.net/fr_article4013.html#nbsp---crit--re-conditionnel devrait t’aider à résoudre la question.

Pour ton deuxième soucis, je pense qu’il faut te tourner vers du JS (ou jQuery).
Quelque chose qui commencerait par du
$('.editer_saison').on('change', function() { … });
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Septembre 2018

Merci beaucoup ! Je vais tester cela au plus vite ! Je commençais effectivement à regarder du côté du JQuery. En général, quand je sèche avec SPIP, cela sous entend souvent qu’il me faut une fonction en JS...
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Septembre 2018

Je suis en train d’essayer... Dans le principe, cela fonctionne ! Merci encore. Belle concision dans la prog, j’admire !
Mais (le contraire aurait trop beau, et surprenant...), j’ai 1 ennui. Je m’explique :

J’aimerai que quand on sélectionne un item dans le 1er menu déroulant, le deuxième, puis le troisième menu se mettent automatiquement à jour pour ne donner que les items qui sont rattachés au premier puis au second menu... C’est possible, ça ?

Sinon, pour ceux que ça intéresse...
Si 2 "categories" sont sélectionnés, et bien, le filtre n’affichait plus rien.
Pour contourner cela, il faut changer dans actus_liste
{categorie?}
par
{categorie LIKE %(#ENV{categorie})%}
.

Merci encore de ton aide...
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Septembre 2018

tu utilises un sélecteur multiple ? :

Dans le backoffice, il s’agit simplement de cases à cocher. Rien d’autres n’est à changer sauf
{categorie LIKE %(#ENV{categorie})%}
dans actus_liste. Tout est OK de ce côté là !

Pour le chaînage en cascade des menus déroulants, je regarde effectivement du côté de JQuery. Ça a l’air d’être faisable mais seulement avec 2 listes...
Indiquez l’intérêt que vous portez à cette réponse

0

peetdu

Septembre 2018

Dans le backoffice, il s’agit simplement de cases à cocher

Comprend plus rien ?! :) Ton code montre que tu utilises un select ?
Si c’est des cases à cocher, c’est vraiment une autre limonade. Ton #ENV{categorie} sera alors un tableau et l’enregistrement en BdD sera sérialisé. Du coup j’essayerai plutôt le critère IN. Mais bon, pas testé…

Pour le jQuery, tu devrais plutôt t’orienter vers stackoverflow ou autre…
Indiquez l’intérêt que vous portez à cette réponse

0

mcommemarc

Septembre 2018

Dans le backoffice, il s’agit simplement de cases à cocher

Oui, c’est plus facile côté backoffice. Mais en public, je préfère montrer les valeurs en select. Ça ne change rien dans ton code...
On peut cocher les 4 saisons pour un séjour mais quand on recherche un séjour en hiver, le séjour en question apparaît...
Indiquez l’intérêt que vous portez à cette réponse

0
mathieu

Avril 2021
Bonjour,

Je cherche également à mettre en place des filtres multi-critères qui me permettraient de sélectionner les articles à afficher à partir d’une boucle sélectionnant des articles, avec des filtres qui vont piocher dans des champs extras associés aux articles.

Merci dans un premier temps aux participants de ce sujet qui m’ont permis d’avoir une base de travail avec notamment le « Contrôleur - Vue ». J’ai par ailleurs exposé quelques une de mes difficultés sur cette page.

En lisant les interventions de ce sujet, je me rends compte que les filtres fonctionnent bien pour tous mes champs extra de type « liste déroulante » (« type_contenu » et « frequence » dans mon exemple ci-dessous).

Par contre, lorsque j’essaie d’ajouter un filtre sur un champs extra de type « sélection multiple », le filtre ne fonctionne pas (« support » dans mon exemple ci-dessous). Je précise que pour la zone de filtre, je ne sélectionne q’une valeur de ce champs extra de type « sélection multiple ». J’aimerais à l’avenir pouvoir sélectionner plusieurs valeurs dans mes filtres mais je pense qu’il s’agira d’une autre paire de manche...

Comme conseillé par peetdu , j’ai intégré le code suivant dans mon fichier « actus_liste.html » :
[<pre>(#ENV**|unserialize|print_r{1})</pre>]
Ci après le détail de la sortie de ce bout de code :
Array ( [rubrique9] => [id_rubrique] => 9 [date] => 2021-04-13 21:22:12 [date_default] => 1 [date_redac] => 2021-04-13 21:22:12 [date_redac_default] => 1 [lang] => fr [type_contenu] => 10 [frequence] => choix2 [undefined] => 8 )
La valeur sélectionnée apparait bien mais le nom du champs extra « support » ne semble pas être reconnue puisqu’il est affiché « [undefined] »...

Je pense qu’il doit falloir adapter le code quand il s’agit d’un champs extra de type « sélection multiple », mais après plusieurs tentatives en tâtonnant avec les diverses docs, notamment critère IN valeur1, valeur2[, valeur3,..., valeurN], je ne parviens pas à résoudre mon problème...

Si jamais quelqu’un a une suggestion, je lui en serait extrêmement reconnaissant ;).

A toute fin utile, je travail sur la versions SPIP 3.2.7. Et ci après le contenu de mes fichiers de travail :

rubrique=9.html
<BOUCLE_principale(RUBRIQUES) {id_rubrique} {tout}> ... <section> <h1>Les actualités</h1> <INCLURE{fond=inclure/actus_filtres, env}> <INCLURE{fond=inclure/actus_liste, env, ajax=actus_liste}> </section> ... </BOUCLE_principale>
« actus_filtres.html »
<fieldset> <legend>Filtres</legend> <form action="#SELF" method="post" id="consulter_actus"> <BOUCLE_actu_controleur(ARTICLES){0,1}> [(#SAISIE{selection, type_contenu, label='Contenu', option_intro='TOUT', datas=[(#LISTER_CHOIX**{type_contenu})]})] [(#SAISIE{selection, frequence, label='Frequence', option_intro='TOUT', datas=[(#LISTER_CHOIX**{frequence})]})] [(#SAISIE{selection, support, label='Support', option_intro='TOUT', datas=[(#LISTER_CHOIX**{support})]})] <button type='submit' class='button small' type='submit'><:bouton_filtrer:></button> </BOUCLE_actu_controleur> </form> </fieldset> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('#consulter_actus').submit(function(e){ // désactiver le fonctionnement par défaut du formulaire. Le JS ici prend la main. e.preventDefault(); // récupère la ou les valeurs sélectionnée(s) par l'utilisateur var values = {}; var $selection = $('select option:selected'); $selection.each(function() { var $name_select = $(this).parent().prop('name'); values[$name_select] = $(this).val(); }); // hop, on envoi le tout à la VUE ajaxReload('actus_liste', { args:values }); }) }); })(jQuery); </script>
« actus_liste.html »
[<pre>(#ENV**|unserialize|print_r{1})</pre>] <fieldset> <legend>Liste des actus</legend> <BOUCLE_listing_actus(ARTICLES){type_contenu?}{frequence?}{support?}> <a href="#URL_ARTICLE">#TITRE</a> <div>[(#LISTER_VALEURS{date_1}|annee)] / [(#LISTER_VALEURS{type_contenu})] / [(#LISTER_VALEURS{frequence})] / [(#LISTER_VALEURS**{support})]</div> <div>[(#TEXTE|couper{100})]</div> </BOUCLE_listing_actus> </fieldset>