ajax syncro panier aprés click img

**spins06** · 03/08/2010, 21h34

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 :

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

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>

**DoubleU** · 05/08/2010, 10h03

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é

**spins06** · 05/08/2010, 18h34

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 ?

**Watilin** · 06/08/2010, 12h28

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 JavaScript :

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

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 JavaScript :

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

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 HTML :

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

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 JavaScript :

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
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 JavaScript :

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

var Panier = {};

Et adapter les images :

Code HTML :

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

<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 !

**spins06** · 06/08/2010, 20h07

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 :

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
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);
	};
};

ajax syncro panier aprés click img

JavaScript

Discussions similaires

Partager

Partager