Filtre avec menu dropdown Fermé

Question

Bonjour à tous !

Je travaille actuellement sur un projet en développement web et je dois afficher des produits issus d'une base de donnée avec un système de filtre.

C'est le système de filtre qui me pose un problème, c'est plusieurs menus dropdown avec des inputs radio à cocher et chaque menu à un bouton pour appliquer les filtre sélectionné. Ce qui fait que je peux sélectionner plusieurs filtres différents et afficher les produits concernés, mais je ne trouve aucune doc ou exemple avec ce système de filtre. 
Tous les exemples que je trouve, c'est un bouton unique avec le filtre en question et au clique ça affiche directement les articles, moi je veux vraiment pouvoir faire plusieurs sélections avant d'appliquer le filtre et par la suite garder la sélection active tout en appliquant un autre type de filtre.

Est-ce que quelqu'un pourrait m'aiguiller svp ?

jordane45 · Answer

Bonjour,

Site web codé  à la main ou en utilisant un CMS ?

Données stockées en BDD ?

Rafraichissement des données en PHP ( via un formulaire), ou en AJAX ?

Et puis.. quelles connaissances as tu ?
- Sais tu coder ?
- Sais tu faire des formulaires en html/php ?
- Sais tu faire des IF/ELSE en PHP ?
- Sais tu faire du JS ? 
- Sais tu faire de l'ajax ? 
- Sais tu faire des requêtes SQL ? avec des conditions ( WHERE.. AND.. OR... ) ?

MrBushido · Answer

Bonjour,

Site codé à la main et je veux utiliser de l'AJAX 

Oui, les données sont stockées en BDD importé avec un csv.

Oui, je sais faire des formulaires html/php
Je sais faire des boucles en php/js
L'AJAX j'en ai déjà fait, mais je veux me perfectionner, d'où ma volonté de faire de l'AJAX sur ce projet
Et oui je sais faire des requêtes SQL, j'ai fait plusieurs scripts pour remplir chaque table etc, en ce moment je boss sur les requêtes pour afficher les éléments dont j'ai besoin sur le site.

Désolé pour le manque de précision sur tout ça sur mon premier post.

jordane45 · Answer

Donc,
Commence par mettre les champs necessaires à tes filtres dans ton html ainsi qu'un bouton "rechercher"

Ensuite,  
Associe l'évènement click sur ton bouton pour qu'il déclenche une fonction
Dans cette fonction,  récupère la valeur de chacun des champs de ton formulaire et envois les dans ton appel ajax.
Côté PHP,  récupères les données envoyées par l'ajax,  et pour chaque donnée "non vide", créé une condition supplémentaire pour ta requête SQL.
Retourne le résultat de cette requête au format json
Et enfin, dans le "success" de ton ajax,  boucle sur le résultat obtenu pour générer l'affichage..


Si tu veux plus d'aide,  reviens nous voir avec le code déjà écrit et en expliquant sur quelle partie tu bloques exactement.

NB: Pour poster ton code sur le forum, tu devras utiliser les balises de code.
https://forums.commentcamarche.net/forum/affich-37598670-mise-en-forme-du-forum-et-des-fiches-pratiques-ccm#les-codes-sources

MrBushido · Answer

Merci pour vos réponses ! Je vais essayer de m'avancer un peu sur mon code et mes requêtes et je reviendrais vers vous si je bloque un peu trop longtemps sur le même point !

MrBushido · Answer

Rebonjour ! 

Du coup, avant d'arriver au filtre, j'ai rencontré d'autres soucis en chemin. Je vais essayer d'exposer mon problème le plus explicitement possible. 

J'ai un menu dropdown sur mon site pour filtrer des voitures, et dans ce menu dropdown j'affiche toutes les marques de voiture qu'il y a dans ma table "Brands" dans ma BDD.
Je les affiche avec une requête SQL et un Foreach

Et donc jusqu'ici tout fonctionne, sauf que dans ma BDD j'ai une autre table, la table "Voiture", cette table voiture est liée à ma table "Brands", ce qui me permet de catégoriser les différents modèles avec l'id de la marque qui correspond. 

Moi, dans mon menu dropdown, à côté de Peugeot, j'aimerais avoir le nombre total de Peugeot différentes présentes dans ma BDD.

Donc imaginons que dans ma table "Voiture" j'ai une 205 blanches, une deuxième 205 mais noir, une 206 et une 208, toutes avec l'id de la marque Peugeot, donc l'id "1" lorsque j'exécute la requête : 

"SELECT COUNT (model_name) FROM Cars WHERE brans_id_brands = 1;"

Je récupère bien le chiffre 4.

Mais moi j'ai plusieurs modèles dans ma table avec plusieurs id de marque différente, et j'aimerais que pour chaque modèle ça me retourne automatiquement le bon total pour chaque marque, mais je n'arrive pas à faire une requête ou une boucle qui compte le nombre total des différentes voitures présente dans la BDD selon la marque.

J'ai essayé d'être le plus claire possible, mais ce n'est pas évident à l'écrit.

Merci d'avance d'avoir pris le temps de me lire et de me comprendre !

MrBushido · Answer

Merci pour ta réponse Jodrane! 

Comme je l'ai expliqué, j'arrive à afficher le nombre de véhicules concerné pour une marque, mais je n'arrive pas à afficher le nombre de véhicules concerné pour chaque marque automatiquement.
Et je n'arrive pas à bien formuler ma demande sur Google pour faire des recherches...

MrBushido · Answer

Oui ? Par exemple, les marques, je les affiche comme ça : prepare($query); $stmt->execute(); $posts = $stmt->fetchAll(PDO::FETCH_OBJ); foreach ($posts as $post) : echo "

". $post->brand_name."

101

"; endforeach ?> Mais bon ça, c'est au chargement de la page, je pensais afficher le nombre de véhicules concerné au chargement aussi, si c'est mieux en Ajax je le ferai en Ajax mais avant ça il faudrait déjà que je trouve la bonne requête..

MrBushido · Answer

Ouais mais, moi j'arrive à afficher les marques uniquement en utilisant " WHERE brands_id_brands =1;" il faudrait que je trouve comment boucler ça et faire en sorte qu'il compte le bon nombre de Peugeot, de Renault, de Mercedes, sans lui préciser l'id de la marque le tout en une seul requête

MrBushido · Answer

Ah au temps pour moi j'avais mal compris !

Ma question sur les filtres est toujours d'actualité, mais en route j'ai bloqué sur ce problème, mais je crois bien que tu viens de le résoudre, merci ! 

Je n'ai pas voulu créer une nouvelle discussion puisque ça concerne le même sujet mais la prochaine fois, je le ferai.

Concernant le système de filtre, tu m'avais conseillé de mettre les champs nécessaires aux filtres ainsi qu'un bouton qui serait lié à un événement click qui déclenche une fonction qui récupère la valeur de chacun des champs et les envois en Ajax.

Je suis actuellement sur la fonction en question, je n'arrive pas à récupérer les data de mes checkbox

MrBushido · Answer

Je ne m'exprime pas assez bien, désolé pour ça.

J'ai 3 menus dropdown avec chacun des checkbox et un bouton appliqué. 

Pour l'instant j'ai fait ça pour récupérer mes boutons :

filter_button = document.querySelectorAll("#apply_filter");

// loop all buttons
filter_button.forEach(filter => {

filter.addEventListener("click", ()=> {
  console.log(filter);
  // get all data from filter

const form = new FormData();
  form.append("brand", "data");

fetch('index.php', {
    method: 'POST',
    body: form,
    })

.then(res => {
      return res.json();
  })
  .then(response => {
    console.log(response);
    })
  });

});


Je récupère mes boutons au click mais le console.log(response) m'affiche une erreur :

"Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 8"

Je cherche actuellement pourquoi j'ai cette erreur.

Pour les boutons checked j'utilise ça pour vérifier ce qui est checked:

let checkboxes = document.querySelectorAll('input[name="brand"]:checked');
    let values = [];
    checkboxes.forEach((checkbox) => {
      values.push(checkbox.value);
    });


Et j'essaye de le lier au même événement click que pour appliquer les filtres.


EDIT: Ajout des balises de code ( encore ...)

MrBushido · Answer

Désolé pour les balises du code. 

Pour débugger l'AJAX on peut utiliser Chrome aussi, dans l'inspecteur, réseau, fetch/XHR et on sélectionne le fichier en question, mais c'est plus intuitif sur Firefox, c'est vrai.

J'ai avancé un peu sur l'Ajax, je récupère les checkbox coché, j'arrive à mettre une condition qui dit " si cette case est checked crée un élément p" etc, mais je n'arrive pas à faire marcher tout ça avec des requêtes SQL..

Et je n'arrive pas non plus à sélectionner le bon nœud dans mon body, quand je clique sur le bouton j'ai bien une balise "p" qui se crée, mais pas au bon endroit.

Et j'ai plein de zone d'ombre dans ma réflexion pour la suite du projet, étant donné que je veux faire un système de filtre avec des images qui changent selon le filtre sélectionné, est ce que je crée les div avant et je change uniquement le contenu en Ajax ou est ce que je crée tout en ajax directement, et est ce que je crée une deuxième page ou au click c'est la page complète qui change de design le tout en Ajax ou est ce qu'au click je fais appel à une autre page et je change le contenu en Ajax, je ne sais pas trop comment aborder tout ça...

Filtre avec menu dropdown

11 réponses

PS: Pour poster du code sur le forum, tu dois utiliser les balises de code ET y préciser le LANGAGE

Discussions similaires