Besoin d'aide en JS pour un "caddie"

Version imprimable

22/01/2008, 21h46
javaboy

Besoin d'aide en JS pour un "caddie"

Bonjour à tous,

Je vous sollicite car j'ai besoin d'aide :
-J'aimerai réaliser une sorte de caddie ponctuel en javascript et affichage dans un div :

Voila le principe :
Sur un evenement onclick je souhaite passer en parametre un Id (unique) et un prix
- A partir de ce moment si le "caddie" est vide j'instancie un tableau et l'impléménte avec l'id et le prix
-Si je clic une deuxieme fois sur la même référence ca fait une iteration de 1

- Enfin affciher dans un div le resultat

Merci pour votre aide.

Salut :)

Alors tu as quasiement écris tout l'algo ...

désolé voici un code complet que je viens de faire , assez lisible je pense :)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
var Article = new Array();
var nbArticle = 0 ;
var somme = 0;
function addCaddie(id,prix,designation){
	if(!isInArray(Article,id)){
		Article[Article.length] = new Array(id,prix,designation);
		tempSpan = document.createElement('span');
		texte = document.createTextNode(designation);
		tempSpan.appendChild(texte);
		tempSpan.setAttribute("id",id);
		document.getElementById('lstArticle').appendChild(tempSpan);
		br = document.createElement('br');
		document.getElementById('lstArticle').appendChild(br);
	}
	nbArticle++;
		document.getElementById('nbArticle').innerHTML = nbArticle;
	sommeTotal(prix);
}
 
//Attention fonction adaptée pour chercher l'id /!\
function isInArray(MyArray,MyValue) {
	var valueFound = false;
	var nbItem = MyArray.length ;
	for (var i = 0; i < nbItem && !valueFound; i++){
    	valueFound = MyArray[i][0] === MyValue;
	}
	return valueFound;
}
 
function sommeTotal(prix){
    somme += parseInt(prix);
	document.getElementById('somme').innerHTML = somme;
}
 
</script>
</head>
 
<body>
<div id="bloccadre1">
<span id="lstArticle"></span>
Nombre article = <span id="nbArticle"></span><br />
Somme = <span id="somme"></span><br />
</div>
 
<a href="#" onclick="addCaddie(1,'140','t-shirt')">t-shirt</a>
<a href="#" onclick="addCaddie(2,'200','pantalon')">pantalon</a>
</body>
</html>

23/01/2008, 13h56
javaboy

Décidément le chomeur j'ai souvent à faire a toi (erreur de rollover il y à qq jours) et je tient encore une fois à te remercier de ton aide je vais analyser ton script et sourtout essayer de le comprendre ;

Big merci ,:king:
23/01/2008, 14h15
le_chomeur

Je t'en pris :)
Bonne continuation
23/01/2008, 16h29
javaboy

Waoooo ,

Il se passe trop de truc j'essaye de comprendre le code et je galère un peu -Serai t-il possible si tu as le temps de le commenter afin d'éclairer ma lanterne.

-Dans ton exemple si je clic sur pantalon ca met :
pantalon
Nb article :1
puis je clic sur t-shirt ca met :
pantalon
t-shirt
Nb d'article :2

Est ce qu'il est possible de faire ?
pantalon : 1
t-shirt : 1

En tout cas merci encore une fois pour ton aide.

Alors commentaires :

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
 
//Déclaration des variables globales
var Article = new Array(); //Contiendras tous les articles
var nbArticle = 0 ; //Compte les articles au fur et à mesures ( plutot que de faire un Article.length
var somme = 0; // ça parle d'elle même
 
//Fonction permettant d'ajouter un article, prend 3 paramètres ( l'id , le prix et la désignation ... )
function addCaddie(id,prix,designation){
	//On commence par vérifier si l'id de l'article ne se trouve pas déja dans le caddie
	if(!isInArray(Article,id)){
		//Sinon on ajoute l'article dans le caddie
		Article[Article.length] = new Array(id,prix,designation);
		//On créer un nouveau span pour indiquer quel articles on a dans notre panier
		tempSpan = document.createElement('span'); //création
		texte = document.createTextNode(designation); //création d'un noeud texte
		tempSpan.appendChild(texte); //on ajoute le noeaud dans le spans
		tempSpan.setAttribute("id",id); //on affecte un id a cette span :)
		document.getElementById('lstArticle').appendChild(tempSpan); //on ajoute l'article au caddie ( dumoins dans la div ;) )
		br = document.createElement('br'); // un saut de ligne
		document.getElementById('lstArticle').appendChild(br); //on ajoute ce saut de ligne ...
	}
	nbArticle++; //dans tous les cas on ajoute un article
		document.getElementById('nbArticle').innerHTML = nbArticle; //on met a jour l'affichage du nb d'article
	sommeTotal(prix); //on ajoute le prix de l'article ajouté a la somme
}
 
//Attention fonction adaptée pour chercher l'id /!\
//Fonction permettant juste de savoir si l'article est déja dans le cadie
function isInArray(MyArray,MyValue) {
	var valueFound = false;
	var nbItem = MyArray.length ;
	for (var i = 0; i < nbItem && !valueFound; i++){
    	valueFound = MyArray[i][0] === MyValue;
	}
	return valueFound;
}
 
function sommeTotal(prix){
    somme += parseInt(prix);
	document.getElementById('somme').innerHTML = somme;
}

Citation:

Est ce qu'il est possible de faire ?
pantalon : 1
t-shirt : 1

Oui , pour cela il faut cependant faire une modification , et ajouter un 2 eme tableau associant [idArticle][nbarticle] tu incrémentes a chaques fois nbarticle lorsque tu ajoutes un nouvel article ...

je vais te laisser chercher pour ça, ce n'est pas très compliqué , en te basant sur le code au dessus et en travaillant un peu ;)
Bon courage

23/01/2008, 16h52
javaboy

En tout cas you're the :king:
Merci pour tous ces précieux renseignements .