Création d'un filtre (sans JQuery)

**d3LTa7** · 25/05/2022, 12h55

Bonjour !
Suite à un projet en WP je souhaite créer un formulaire pour filtrer mes éléments de ma pages qui sont classé automatiquement par wordpress !
J'ai déjà eu l’occasion de créer des requêtes AJAX vers des API, et donc avec certaine URL et le JSON ça facilite pas mal la requête mais faire une requête avec des éléments d'une même page, j'avoue que je bloque un peu
Donc j'ai un peu avancé de mon côté, voici le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php get_header(); ?>
 
<main class="tool_main js_filter">
    <?php 
        if(have_posts()){
            while(have_posts()){
                the_post();
                the_title('<h1>','</h1>');
                the_excerpt();
                $linkfolder = get_field('link_folder');
                if($linkfolder){?>
                    <form class="tool_filter" action="">
                        <ul class="tool_filter_list">
                            <p>Filtres</p>
                            <li class="tool_filter_input">
                                <input type="text" placeholder="rechercher">
                            </li>
                            <p>Tags</p>
                            <li class="tool_filter_checkbox">
                                <ul>
                                    <li>
                                        <input type="checkbox">
                                        <label>Hygiène des mains</label>
                                    </li>
                                    <li>
                                        <input type="checkbox">
                                        <label>Formation</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Dispositifs intra-vasculaires</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Précaution complémentaire</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Prévention du risque infectieux</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Préparation de l'opéré</label>
                                    </li>
                                </ul>
                            </li>
                            <p>Période</p>
                            <li class="tool_filter_date">
                                <input type="date" value="">
                                <input type="date" value="">
                            </li>
                            <p>Classement</p>
                            <li class="tool_filter_order">
                                <input type="button" value="A -> Z">
                                <input type="button" value="Récent">
                            </li>
                            <li class="tool_filter_submit">
                                <input type="submit" value="Chercher" id="valider">
                            </li>
                        </ul>
                    </form>
                    <ul class="tool_list">
                    <?php foreach($linkfolder as $link):
                        $name = get_the_title($link->ID);
                        $folder = get_field ('doc',$link->ID);
                        $date = get_the_date('', $link->ID);
                        $xcerpt = get_the_excerpt($link->ID);
                        $illustration = get_field ('illustration', $link->ID); ?>
                        <li class="tool_object">
                            <?php if($folder):?>
                            <a href="<?php echo $folder['url']; ?>">
                                <p><?php echo $name; ?></p>
                                <p id="date"><?php echo $date; ?></p>
                                <?php
                                if ($illustration){
                                    echo wp_get_attachment_image($illustration,'article');
                                }
                                ?>
                                <p><?php echo $xcerpt; ?></p>
                            </a>
                            <?php endif; ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                <?php }
            };
        };
    ?>
</main>
 
<?php get_footer(); ?>

Vu du back office
Nom : Capture d’écran du 2022-05-25 12-53-04.png
Affichages : 198
Taille : 62,9 Ko

Vu client

Nom : Capture d’écran du 2022-05-25 09-38-07.png
Affichages : 199
Taille : 137,9 Ko

Donc ici on a 2 grande partie, La partie formulaire pour pouvoir trier les éléments et la partie contenu ou s'affichent avec le système de boucle de WP les différents éléments

Voici la partie JS avec la requête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const linq = 'http://localhost:3333/out/diaporama/';
const valide = document.getElementById('valider');
 
valide.addEventListener('click', (ev) => {
    ev.preventDefault();
    getData(linq)
})
 
function getData(link){
    const request = new XMLHttpRequest();
    request.open("GET",link,true);
    request.addEventListener('readystatechange',()=>{
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            console.log('good')
            console.log(request.responseText)
        }
    });
    request.send()
}

Pour le moment ça marche ! J'ai bien "good" dans ma console, mais c'est la ou ca se complique... Comment faire, par exemple, pour récupérer tout les éléments et les trier de A à Z en fonction de leur titre, ou comment les classer du plus récent au plus ancien, ou encore n'afficher que ceux d'une certaine taxonomie (avec les checkbox) etc etc ! Je bloque un peu à ce moment là :/

N'étant pas familiarisé avec JQuery j'aimerais éviter le plus possible merci

Merci d'avance pour vos lumières

**mathieu** · 25/05/2022, 13h09

pour la 1re étape, vous pouvez déjà récupérer la valeur saisie dans le champ "rechercher" avec l'évènement "change" :
https://developer.mozilla.org/fr/doc...dlers/onchange

**darkstar123456** · 25/05/2022, 13h47

Bonjour,

Par défaut, Wordpress va essayer de trier les post par date, ou par odre (menu_order)
En gros, pour les filtres, tout ce que vous avez besoin de connaître se résume à l'utilisation de WP_Query().

Si n'êtes familiarisé ni avec Wordpress, ni avec PHP, ni avec Javascript; je vous conseillerais de d'abord commencer par uniquement la méthode PHP vu que celle-ci est obligatoire étant donné que c'est PHP qui va filtrer et ordonner les résultats.

Voici un exemple :
Attention, vos champs n'ont pas d'attribut name et sont donc inutiles
De plus, votre <form> n'a pas d'attribut type, il sera donc envoyé en GET alors qu'il vaudrait mieux que ça soit en POST

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
// Définition des arguements de base de la requête
$args = [
    'post_type' => 'diaporama', // ceci doit être modifié pour être le slug de votre post_type
    'posts_per_page' => -1, // ceci va faire en sorte d'afficher tous les posts... sinon c'est la limite par défaut qui sera utilisée
    'meta_query' => [], // Pour chercher dans les custom fields
    'tax_query' => [], // Pour chercher dans les taxonomies (tags ou catégories par exemple)
];
// Si on cherche depuis le champ texte
if (!empty($_POST['search_text'])) {
    $args['s'] = $_POST['search_text'];
}
// Si une date de début est définie
if (!empty($_POST['date_start'])) {
    $args['meta_query'][] = [
        'key' => 'date_start',
        'value' => $_POST['date_start'],
        'compare' => '>=',
    ];
}
// Si une date de fin est définie
if (!empty($_POST['date_end'])) {
    $args['meta_query'][] = [
        'key' => 'date_end',
        'value' => $_POST['date_end'],
        'compare' => '<=',
    ];
}
// Si on veut customiser l'ordre d'affichage
if (!empty($_POST['orderby']) && $_POST['orderby'] === 'title') {
    $args['orderby'] = $_POST['orderby'];
}
if (!empty($_POST['order'])) {
    $args['orderby'] = ($_POST['order'] === 'DESC') ? 'DESC' : 'ASC';
}
// Etc...
// Pour chaque filtre, on va devoir adapter le code afin d'ajouter des arguments à notre requête
// Il est possible que pour certains filtres on soit obligé d'utiliser des méthodes avancées avec des hooks mais ça ne semble pas être le cas d'après votre exemple
$wp_query = new WP_Query($args);
?>
<?php if (have_post()) : ?>
    <ul class="tool_list">
        <?php while (have_post()) : the_post(); ?>
            <li>
                <?php the_title(); ?>
            </li>
        <?php endwhile; ?>
    </ul>
<?php else : ?>
    <p class="error">Désolé, aucun diapora n'a été trouvé, veuillez essayer d'autres filtres.</p>
<?php endif; ?>
<?php wp_reset_query(); ?>

Petit plus, pour écrire proprement des requêtes AJAX en Wordpress, voici la documentation : https://codex.wordpress.org/AJAX_in_Plugins
(il est écrit "AJAX In Plugins" mais c'est global à Wordpress donc je n'ai jamais compris pourquoi il est spécifié "plugins")

**d3LTa7** · 25/05/2022, 15h47

Bonjour et merci beaucoup pour ta réponse Darkstar !

Du coup j'ai suivi tes instructions et donc :

J'ai ajouté les attributs name et ajouté l'attribut method="post" , même si cela m'étonne de mettre cette méthode pour récupérer des data au final ! Mais bon ! Étant dev junior, je préfère faire ce qu'on me conseil de faire dans un premier temps ^^

J'ai donc adapté mon code avec ton code proposé, pour le moment je n'ai utilisé que la partie de la recherche par champ texte, ce qui donne :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php get_header(); ?>
 
<main class="tool_main">
    <?php 
        if(have_posts()){
            while(have_posts()){
                the_post();
                the_title('<h1>','</h1>');
                the_excerpt();
                $linkfolder = get_field('link_folder');
                if($linkfolder){?>
                    <form class="tool_filter" method="post" action="">
                        <ul class="tool_filter_list">
                            <p>Filtres</p>
                            <li class="tool_filter_input">
                                <input type="text" name="search_text" placeholder="rechercher">
                            </li>
                            <p>Tags</p>
                            <li class="tool_filter_checkbox">
                                <ul>
                                    <li>
                                        <input type="checkbox">
                                        <label>Hygiène des mains</label>
                                    </li>
                                    <li>
                                        <input type="checkbox">
                                        <label>Formation</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Dispositifs intra-vasculaires</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Précaution complémentaire</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Prévention du risque infectieux</label>
                                    </li>
                                    <li>                                        
                                        <input type="checkbox">
                                        <label>Préparation de l'opéré</label>
                                    </li>
                                </ul>
                            </li>
                            <p>Période</p>
                            <li class="tool_filter_date">
                                <input type="date" name="date_start" value="">
                                <input type="date" name="date_end" value="">
                            </li>
                            <p>Classement</p>
                            <li class="tool_filter_order">
                                <input type="button" value="A -> Z" id="az" name="orderby">
                                <input type="button" value="Récent">
                            </li>
                            <li class="tool_filter_submit">
                                <input type="submit" value="Chercher" id="valider">
                            </li>
                        </ul>
                    </form>
                    <?php 
                        $args = [
                            'post_type' => 'diaporama',
                            'post_per_page' => -1,
                            ''meta_query' => [
                                array(
                                    'key'=> 'search_text',
                                    'value'=>'',
                                    'compare'=>'NOT LIKE',
                                )
                            ],
                            'tax_query' => ['pratique'],
                        ];
 
                        if (!empty($_POST['search_text'])){
                            $args['s'] = $_POST['search_text'];
                        }
 
                        $wp_query = new WP_Query($args);
                    ?>
                        <?php wp_reset_query(); ?>
                    <ul class="tool_list"> 
                    <?php foreach($linkfolder as $link):
                        $name = get_the_title($link->ID);
                        $folder = get_field ('doc',$link->ID);
                        $date = get_the_date('', $link->ID);
                        $xcerpt = get_the_excerpt($link->ID);
                        $illustration = get_field ('illustration', $link->ID); ?>
                        <li class="tool_object">
                            <?php if($folder):?>
                            <a href="<?php echo $folder['url']; ?>">
                                <p><?php echo $name; ?></p>
                                <p id="date"><?php echo $date; ?></p>
                                <?php
                                if ($illustration){
                                    echo wp_get_attachment_image($illustration,'article');
                                }
                                ?>
                                <p><?php echo $xcerpt; ?></p>
                            </a>
                            <?php endif; ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                <?php }
            };
        };
    ?>
</main>
 
<?php get_footer(); ?>

Alors il y a sûrement des erreurs vu que j'ai pas très bien saisi la parti 'meta_query' de la doc... et que j'ai du faire d'autres erreur :/ car du coup, j'ai tapé dans le champs de recherche, différents mots et ça m'affiche quand même la totalité des posts ! Alors par contre est ce que le faite que les post qui apparaissent sur ma page soit un CPT avec lien vers un autre (champs ACF) ?

Nom : Capture d’écran du 2022-05-25 15-29-37.png
Affichages : 184
Taille : 87,4 Ko

Nom : Capture d’écran du 2022-05-25 15-29-37.png
Affichages : 184
Taille : 87,4 Ko

Comme on peut le voir sur l'image les post diaporama viennent d'un autre CPT (FICHIER) ou il y a la créations de différents fichiers, et ici on sélectionne tout ceux de type "diaporama". Le CPT ici et OUTIL

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function custom_post_type(){
    $arg = [
        'public'=> true,
        'label'=> 'OUTILS',
        'show_in_rest' => true,
        'supports'=>array('title', 'thumbnail', 'excerpt'),
        'has_archive'=>true,
        'menu_icon'=> 'dashicons-analytics'
    ];
    register_post_type('out', $arg);
add_action('init', 'custom_post_type');

**darkstar123456** · 25/05/2022, 16h05

Rebonjour,

Effectivement, pour l'attribut du formulaire, tu pourrais choisir d'utiliser method="GET".
Ca dépend un peu si tu souhaites qu'on puisse partager l'URL ou non
(attention que c'est pas super propre d'un point de vue référencement un formulaire en GET avec plus d'un champ, et c'est pour ça que j'ai proposé le POST)

Pour ce qui est de ta recherche, comme je l'ai précisé, toutes les recherches dans les custom fields doivent être fait dans meta_query.
Donc désolé si tu n'as pas bien compris la doc mais il va falloir la comprendre pour faire ce que tu veux :p
D'autant que je vois que tu as un lien relationnel (Lien Fichiers dans la capture d'écran) et ça va d'autant plus compliqué les choses car dans la base de données c'est juste représenté par un ID et non pas le texte
En effet, je ne l'ai pas précisé car il fait partie de la doc WP_Query(), mais l'index s ne cherche QUE dans post_title et post_content.

A priori, j'imagine que dans ton cas, tu dois chercher dans le type FICHIER. On considère (et j'espère) que la recherche est à effectuer dans leur post_title et post_content.
Il faudrait alors récupérer tous les ID qui correspondent, et les ajouter à la requête principale.
Quelque chose comme ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php
 
// Si on cherche depuis le champ texte
// A présent c'est la première chose qu'on cherche car c'est elle qui va définir la liste de base de notre recherche
$post_ids = [];
if (!empty($_POST['search_text'])) {
    // get_posts() fonctionne +/- comme WP_Query()
    // ici on a pas besoin de la boucle have_post() - the_post(), c'est pour ça que j'utilise cette fonction, c'est un peu plus simple
    $posts = get_posts([
        'post_type' => 'FICHIER',
        'posts_per_page' => -1,
        's' => $_POST['search_text'],
    ]);
 
    // On parcours tous les posts pour ajouter chaque ID à notre tableau
    foreach ($posts AS $v) {
        $post_ids[] = $v->ID;
    }
}
 
// Définition des arguements de base de la requête
$args = [
    'post_type' => 'diaporama',
    'posts_per_page' => -1,
    'meta_query' => [],
];
 
// Si on a trouvé des post_ids précédemment, on va limiter la recherche à ceux-ci
if (!empty($post_ids)) {
    $args['post__in'] = $post_ids;
}
 
/**
 * A partir d'ici, plus de changement si ce n'est qu'on a supprimé la partie search_text car elle vient plus haut
 */
 
// Si une date de début est définie
if (!empty($_POST['date_start'])) {
    $args['meta_query'][] = [
        'key' => 'date_start',
        'value' => $_POST['date_start'],
        'compare' => '>=',
    ];
}
 
// Si une date de fin est définie
if (!empty($_POST['date_end'])) {
    $args['meta_query'][] = [
        'key' => 'date_end',
        'value' => $_POST['date_end'],
        'compare' => '<=',
    ];
}
 
// Si on veut customiser l'ordre d'affichage
if (!empty($_POST['orderby']) && $_POST['orderby'] === 'title') {
    $args['orderby'] = $_POST['orderby'];
}
if (!empty($_POST['order'])) {
    $args['orderby'] = ($_POST['order'] === 'DESC') ? 'DESC' : 'ASC';
}
$wp_query = new WP_Query($args);
// Ici on va boucler sur les posts

En réalité, il y a parfois moyen de chercher directement dans wp_postmeta en faisant une requête mais c'est potentiellement extrêmement lourd à faire.
Etant donné que je ne connais pas la taille du site, je ne peux pas proposer cette solution (et dans ce cas-ci, ça ne peut pas fonctionner vu que dans la DB, seuls les IDs sont sauvegardés pour les champs relationnels)

**d3LTa7** · 25/05/2022, 17h24

Hummmm ok je vois plus ou moins mais oui il va falloir que je me creuse un peu la tête pour comprendre la partie sur la meta_query !! Surtout que je ne trouve pas les exemples très parlant

Mais j'ai l'impression que la doc est plus orienté à des requêtes vers une bdd directement ? Ou alors j'ai dû mal à comprendre... Car par exemple je ne vois pas comment récupéré le "key" ! Je n'ai aucune vu de ma bdd de mon côté !

Du coup je pense que pour commencer plus simple je vais juste faire un simple bouton qui va juste classer tout les post par ordre alphabétique. SI déjà j'arrive à faire ça, ça sera déjà bien. Le coup de la recherche par champ de texte m'a l'air compliqué au final !

Sinon oui c'est bien cela, le lien va bien cherché dans le CPT FICHIER :

Nom : Capture d’écran du 2022-05-25 17-16-11.png
Affichages : 180
Taille : 140,3 Ko

Nom : Capture d’écran du 2022-05-25 17-16-11.png
Affichages : 180
Taille : 140,3 Ko

**darkstar123456** · 30/05/2022, 10h12

Bonjour,

Les meta_key ce sont les custom fields
Donc dans votre cas : Advanced Custom Fields (ACF dans le menu)

Quand vous créez une champ dans un groupe, vous donnez un nom à votre champ.
C'est ce nom qui est utilisé dans la clé keyC'est d'ailleurs en prenant tout ça en compte que j'ai donné mon exemple.
Vous pouvez voir que la seule meta_query est basée sur les dates car c'est le seul custom field que je vois

Et oui, tout ça ce sont des requêtes en base de données vu que tout est en base de données

Création d'un filtre (sans JQuery)

AJAX

Discussions similaires

Partager

Partager