11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Sur la maquette au format pdf que je dois intégrer (et oui un pdf..) il y a une arborescence Produits et lorsqu'on clique sur "Produits" les gammes apparaissent en dessous lorsqu'on clique sur une gamme les produits correspondant à la gamme apparaissent en dessous

lorsqu'on clique sur un produit il y a les informations du produit qui s'affiche dans un cadre (qui doit être une div)

Je pense que je dois utiliser une bdd pour mettre les informations de chaque produit mais j'ai besoin que quelqu'un m'explique le raisonnement pour comprendre comment construire l'arborescence Produits avec ses gammes et produits et comment gérer au clic sur un produit l'affichage des infos correspondantes dans le cadre de gauche(sachant que dans cet affichage d'infos il n'y a pas que du texte il y a aussi des images )?

PS:je ne désire pas utiliser de CMS.
Bonjour,

je vais clarifier la situation pour que vous pussiez m'aider.

Voilà, j'ai un menu en accordéon en jQuery (un <ul>) et lorsque je clique sur un item de menu(les items de menu correspondent à des produits vendus), cela doit mettre des infos correspondant à cet item de menu dans une div qui contient ces infos, cette div est sur la même page que le <ul>.

J'ai trouvé la trame du programme, il faut faire une requête POST en Ajax.

Les données que j'envoie à mon script PHP dans ma requête Ajax sont la valeur du texte contenue dans le <li> du menu lorsqu'on clique dessus.Ex si j'ai un clic sur ce <li>:...<li>produit bas de gamme</li>..., j'envoie "produit bas de gamme" à mon script PHP.

Ensuite dans mon script PHP je fais une requête SELECT sur ma table contenant les produits avec un WHERE correspondant à "produit bas de gamme". Cette requête me permet de récupérer les infos correspondant au produite bas de gamme.

Ces infos correspondant au produit bas de gamme, elles sont donc renvoyées par Ajax et ensuite je les mets par l'intermédiaire de la fonction de retour Ajax dans ma div dont je vous ai parlée au début du message.

Seulement il y a une interrogation:
Ces infos stockées dans une bdd correspondent à des images et à du texte qu'il va falloir afficher dans la div.
Donc j'ai pensé à la solution de coder en HTML ces infos (par ex: <img src="exemple.png id="image"/><p id="infos">exemple de données...</p>....<p>d'autres infos</p>...)et de remplir la colonne correspondante de la bdd avec ce code HTML.. et ensuite c'est ce code HTML que l'on va sélectionner avec le SELECT comme je vous l'ai dit plus haut etc... et que l'on va mettre dans la div comme indiqué plus haut.

Est ce que ma solution de créer ce code HTML correspondant aux infos et de le mettre dans la bdd est le bon raisonnement?

Merci
Modifié par integrateur6 (24 Dec 2014 - 09:25)
Modérateur
Bonjour,

Mettre le code html pour chaque fiche produit dans ta bdd est une possibilité, mais que je ne conseille pas, sauf peut-être (et encore, à voir) si d'un produit à l'autre il y a des variations importantes dans les descriptions (genre un produit avec 2 images au lieu d'une, des mentions de délais pour certains et pas pour d'autres). Si par contre les données à afficher pour chaque produit sont formatées de manière constante (genre 1 pris, 1 photo, 1 texte, 1 délai, ...), tu peux avoir dans ta bdd une table avec pour chaque ligne (qui correspondrait à un produit) un champ pour chacune de ses données, la transformation en HTML se faisant au dernier moment après récupération de ces données via AJAX. L'intérêt est qu'en cas de changement de l'HTML (genre le client demande une fois que tous est fini d'inverser 2 lignes dans la présentation), tu n'aurais pas tous les HTML de ta bdd à changer.

Si tu n'as pas beaucoup de produits, tu peux aussi mettre toutes les descriptions dans ta page a priori dès le chargement initial, avec des display:none et te contenter de passer la valeur à display:block (ou autre) lors d'un clic sur le menu des produits pour afficher la description du produit dans ton div. Ça évite de faire de l'AJAX à chaque clic, et c'est globalement plus simple à gérer.

Amicalement,
Modifié par parsimonhi (24 Dec 2014 - 11:46)