Forum : Filtre, liste déroulante

Bonjour,

Voila je rencontre un petit problème avec mon code. J'utilise Wordpress. Php pour afficher le contenu et Javascript pour les filtres.

J'essaye de faire un filtre qui filtre les posts par types de formations. Le but étant de ne pas changer de page bien sur, c'est pour ça que j'utilise du JS.

Voiçi mon filtre php :

<div id="filtre"> <?php $formations = get_terms( 'formation', array( 'hide_empty' => true ) ); echo '<select id="">'; echo '<option selected="selected"'; echo ' value="" id="tous">Type de formation</option>'; foreach ($formations as $formation) { ?> <option value="<?php echo $formation->term_id ?>" class="filtrer" ><?php echo $formation->name ?></option> <?php } echo '</select>'; ?> </div>

Et le js :

$('#content-cas-client').ready(function(jQuery){ $(function(){ //lorsque je selectionne 'types de formations' $("#tous").click(function(){ //j'affiche tous les posts $(".taxonomy").show(); }); //lorsque je selectionne un filtre "forma1" par exemple $(".filtrer").click(function(){ //je recupere le contenu de la value qui l'id de la taxonomy var filtre = $(this).attr("value"); //je cache tous les post $(".taxonomie").hide(); //j'affiche tous les post qui ont la classe correspondant à la value (id de la taxo) $("."+ filtre).show(); }); }); });

Du côté des posts je leur donne à tous la class" taxonomie" et bien sur l'id du la taxonomy Formation qui leur est attaché "19".

Mais voila il ne se passe rien. J'ai regardé des exemples sur internet mais je trouve pas l'erreur, il n'y a pas de rechargement de la page c'est peut être le problème ?

Merci beaucoup !

12 réponses

Lartak,

il y a 9 ans

Bonjour.
Tu le charge à quel moment jQuery, dans la balise head ou avant la fermeture de la balise body ?

Florian.C,

il y a 9 ans

Bonjour,

Wordpress le charge nativement. Il le charge dans le head.

Merci !

Lartak,

il y a 9 ans

Et ton code javascript aussi est chargé dans le head ?

Florian.C,

il y a 9 ans

Mon script est aussi chargé dans le head.

Réponse d'un autre forum : "Le click sur le select ne marche pas. Il faut regarder l'evenement change. Du coup tu met un id sur ton select et tu ecoute le change, quand ca change tu récupère le select choisit val() et tu fais ton traitement."

Florian.C,

il y a 9 ans

Voici la solution : il faut donc utiliser la fonction change de jQuery. Soit si rien n'est sélectionné, soit si une option du select est selectionné on affiche seulement ceux qui ont la valeur correspondante.

$('#lesFormations').change(function() { //si la value est vide if($('#lesFormations option:selected').val() == ''){ //j'affiche tous les posts $(".taxonomie").show(); //sinon j'affiche les posts correspond à la value selectionné }else{ //lorsque je selectionne un filtre "forma1" par exemple filtre = $('#lesFormations option:selected').val(); //je cache tous les post $(".taxonomie").hide(); //j'affiche tous les post qui ont la classe correspondant à la value (id de la taxo) $("."+ filtre).show(); } });

<?php $formations = get_terms( 'formation', array( 'hide_empty' => true ) ); echo '<select id="lesFormations">'; echo '<option selected="selected"'; echo ' value="" id="tous">Type de formation</option>'; foreach ($formations as $formation) { ?> <option value="<?php echo $formation->term_id ?>" class="filtrer" ><?php echo $formation->name ?></option> <?php } echo '</select>'; ?>

Mehdikacim,

il y a 9 ans

Wordpress ne charge pas par défaut jQuery. Moi perso je le charge dans un widget de bas de page.

Lin,

il y a 9 ans

Bonjour,

Je suis actuellement sur une problématique similaire.
J'ai essayée de comprendre votre code et de le copier sur mon projet, mais lorsque je choisie un élément dans la liste déroulante, j'ai rien qui change…

Est-ce que vous pouvez me guider sur votre démarche ?

Merci par avance

Sinon pour l'importation de jQuery j'utilise ça personnellement :

En periode de test c'est dans mon header. Mais quand je suis sure que tout marche je met ça dans le footer :).

Bonne journée à vous :)

Florian.C,

il y a 9 ans

Bonjour,

Encore une fois pas besoin d'importer de jquery. Mais si tu en as besoin, et qu'il n'y est pas... c'est mieux de mettre le fichier dans ton site.

Quand tu récupère tes terms avec get_terms c'est à dire ceci :

$formations = get_terms( 'formation', array( 'hide_empty' => true ) );

Il faut que remplace tout par les bonnes variables ! Regarde tes taxonomy et adapte à tes besoins ;)

Bon courage

Lin,

il y a 9 ans

Bonjour, merci pour ton retour,

Effectivement j'ai changé cet éléments. Mais ça ne changeait rien.
J'ai donc déplacé le script et ajouté une class sur ma balise article et là ça réagit… mais tout se cache…

Dans ton code tu as ce commentaire :

//j'affiche tous les post qui ont la classe correspondant à la value (id de la taxo)

Comment est-ce que tu dit à tes postes qu'ils ont tel ou tel id en class ?

Merci encore pour ton retrour :)

Florian.C,

il y a 9 ans

Bonjour !

Je me suis aidé de la page taxonomy.php

Ce sont des "custom-post-type" qui ont leur propres catégories, autrement dit leur propre taxonomy. Donc dans ma query je leur donne la class de leur taxo

foreach( ( get_the_terms( get_the_ID(), 'formation' ) ) as $term_f) { $tab_term[] .= $term_f->slug; } foreach( ( get_the_terms( get_the_ID(), 'dispositif') ) as $term_d) { $tab_term[] .= $term_d->slug; }

Ensuite tu dois t'aider des fonctions de wordpress pour trier ou afficher sur un page, je ne sais pas vraiment ce que tu veux faire mais je te conseil de bien étudier ceci qui m'aide beaucoup : https://codex.wordpress.org/images/c/ca/Template_Hierarchy_2015.png

En espérant t'aider :)

Lin,

il y a 9 ans

Bonjour !

Effectivement ça marche bien avec ça :D.

J'avais réussi avec ça également :

<?php $terms = get_the_terms( $post->ID, 'formation' ); ?> //Pour la class : <?php foreach( $terms as $term ) echo ' ' . $term->term_id; ?>

(mais ta version semble plus propre :D)

Sinon tu as déjà eu affaire à la problématique de la pagination ? Là quand le filtre est appliqué ça prend (logiquement) en compte tout les postes et pas uniquement ceux filtrés… du coup même avec un seul élément y'a une pagination.

Florian.C,

il y a 9 ans

Bonjour,

Hum je ne suis pas sur de sur de comprendre peut etre que le tuto de grafikart sur les taxonomy pourrait t'aider :)