ajax syncro panier aprés click img

Version imprimable

Salut à tous, je voudrais faire un panier en javascript/ajax, lorsqu'un utilisateur click sur la photo d'un produit, on récupère le alt (ici toto), et on l'affiche dans une div (testDiv).
Jusqu'ici tout va bien, maintenant je bloque sur le tri, je voudrai si une entrée similaire existe, au lieu de la rajouter, écrire 2 devant.
J'ai essayé en créant une table et utilisé childNodes mais j'arrive pas ..

Avez vous donc une idée du comment jpourai réalisé cela ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body> <img alt="toto" height=85 src=1.png width=85 onclick="actualise(this.alt)"/> <div id="testDiv"><table><tr><td>ligne1</td></tr><tr><td>dee</td></tr></table> </div> <script type="text/javascript" language="javascript"> function actualise(nValeur) { var paniernew=nValeur; var panier = document.getElementById('testDiv'); panier.innerHTML = paniernew + '<br/>' + panier.innerHTML; } </script> </body>

05/08/2010, 10h03
DoubleU

Salut,

Ta structure est bizarre, ou du moins ce que tu veux en faire l'est.
Si tu veux rester sur une table, pourquoi ne pas faire une cellule (avec un id) uniquement pour les quantités? Dès lors, dès que tu veux mettre à jour ta quantité, tu récupères ta cellule et en modifie le contenu avec la nouvelle valeur.

NB: je déplace dans le forum adapté
05/08/2010, 18h34
spins06

Salut DoubleU, resté sur une table peut m'importe .. Ce que jvoudrais c'est qu'au click d'une image, on récupère sa désignation, l'affiche dans un panier avec son prix et si elle existe déjà, auto-incrémenter le chiffre devant. Je n'ai vu que cette idée (que j'avoue bizarre), j'ai aussi voulu le faire paC dans du php qui créera un xml avec un id session propre à chacun (je maitrise mieux :p) mais pourquoi monopoliser plus de ressource serveur si on peut le faire simplement ... Bref.. Tu ferai comment toi ?

Bonjour,
Je propose une solution basée sur un objet littéral, l’équivalent JavaScript des tableaux de PHP : il permet de donner des clés à une liste d’objets divers… Par exemple :
Code:

1 2 3 4 var Panier = { toto: 2, tutu: 3 }
Cet objet sera global.

En fait je vais séparer totalement le traitement des données et le traitement de l’affichage. Par souci de simplicité, la fonction d’affichage reconstruit entièrement le panier à chaque action. C’est potentiellement assez lent, si ton panier est susceptible de contenir beaucoup d’élements, on réfléchira à une solution plus adaptée.
Pour les données, une fonction ajouter :
Code:

1 2 3 4 5 6 7 8 function ajouter( produit ) { if (produit in Panier) { Panier[produit]++; } else { Panier[produit] = 1; }; rafraichir(); };
La fonction rafraichir gère l’affichage. Admettons que ton panier est représenté par un tableau à deux colonnes :
Code:

1 2 3 4 5 6 7 8 9 10 11 <table id="panier"> <thead> <tr> <th>Produit</th> <th>Quantité</th> </tr> </thead> <tbody id="contenu-panier"> ... </tbody> </table>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function rafraichir() { // on commence par vider sauvagement le tableau var tbody = document.getElementById('contenu-panier'); tbody.innerHTML = ''; for (var produit in Panier) { // construction DOM propre var nomProduit = document.createElement('td'); nomProduit.appendChild(document.createTextNode(produit)); var quantiteProduit = document.createElement('td'); quantiteProduit.appendChild(document.createTextNode(Panier[produit])); var tr = document.createElement('tr'); tr.appendChild(nomProduit); tr.appendChild(quantiteProduit); // insertion finale tbody.appendChild(tr); }; };
Note l’utilité de l’opérateur in, qui permet à la fois de tester et d’itérer les propriétés d’un objet.

Il ne reste plus qu’à déclarer le panier au début du script :

Code:

var Panier = {};

Et adapter les images :

Code:

<img alt="tata" src="tata.png" width="85" height="85" onclick="ajouter(this.alt)" />

C’est pas plus méchant que ça quand on connaît l’astuce !

;)

Merci beaucoup ce code marche très bien ;)
j'ai voulu rajouter le prix suivant le produit mais ca rafraichi toute les entrées .. tu aurais une idée du pourquoi ca ne me le fixe pas ?

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
var Panier = {};prix=0;
function ajouter( produit ) {
 
	if (produit=="toto") {
 
		prix =8.33;
	} else {
		prix =0;
	};
 
 
	if (produit in Panier) {
		Panier[produit]++;
	} else {
		Panier[produit] = 1;
	};
	rafraichir();
};
 
function rafraichir() {
 
 
	// on commence par vider sauvagement le tableau
	var tbody = document.getElementById('contenu-panier');
	tbody.innerHTML = '';
	for (var produit in Panier) {
		// construction DOM propre
		var nomProduit = document.createElement('td');
		nomProduit.appendChild(document.createTextNode(produit));
 
		var quantiteProduit = document.createElement('td');		quantiteProduit.appendChild(document.createTextNode(Panier[produit]));
 
		var leprix = document.createElement('td');
		leprix.appendChild(document.createTextNode(prix));
 
		var tr = document.createElement('tr');
		tr.appendChild(quantiteProduit);
		tr.appendChild(nomProduit);
		tr.appendChild(leprix);
 
		// insertion finale
		tbody.appendChild(tr);
	};
};