3 pièce(s) jointe(s)
Création d'un filtre (sans JQuery)
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:
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
Pièce jointe 619815
Vu client
Pièce jointe 619813
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:
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 :)
