Creer un configurateur avec des prix

**jojo57** · 04/06/2007, 16h22

Bonjour a tous, je doit créer un configurateur de configuration multimédia, un peu comme le site dell mais je ne sais pas trop par ou commencé.
Mon principale probléme est pour modifier le prix, jai des categorie et dans chaque categorie plusieurs produits.
Des radios boutons sont placé devant chaque produits.

Je ne voit pas comment je vais pouvoir faire lorsque un produit sera coché, si je coche un produit different, lancien produit se decochera (principe des radios bouttons) mais comment mettre à jour le prix?
Il faudrait savoir quel est le prix du produit choisi avant puis le soustraire au total, puis connaitre le prix du nouveau produit puis l'additionner au total...

Avez vous des idées

**SpaceFrog** · 04/06/2007, 17h06

si ce sont des options exclusive n'utilise pas des checkbox masi plutot des boutons radios ...

**jojo57** · 04/06/2007, 17h09

Oui jutilise bien des boutons radios comme je l'ai dit précédement

Je ne vois vraiment pas comment je vais pouvoir modifier les prix...

Si ca aurait été des checkbox, aucun prob mais avec des radios, aucune idées

**SpaceFrog** · 04/06/2007, 17h11

tu scanne la collection

Code :

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

document.getElementsByName('nomradio')[i]

pour recupérer celui qui est checked ...
et tu prends sa value (qui devrait contenir son prix ? )

**jojo57** · 04/06/2007, 17h17

bah enfait pour l'instant jai mes rubriques, et pour chaque rubrique une ligne avec un bouton radio, le nom du produit et le prix.
Jai une zone de texte contenant le total.
Quand je clique sur un produit, le total se met a jour mais augmente seulement de la valeur du produit que je vient de choisir.

Jai appelé mes boutons radio par exemple : produit124 où 124 est le numéro du produit dans la base

**SpaceFrog** · 04/06/2007, 17h19

file un exemple avec une paire de boutons radios ...

**Bengo** · 04/06/2007, 17h22

Si je comprends bien
sur le onclick de chaque bouton radio, tu prends la value du bouton checked, tu la soustrais au contenu de ta zone de texte, tu selectionnes le bouton radio et tu additionne le contenu de la zone de texte avec sa value.

Je pense que c'est ce raisonnement que tu souhaites non?
Dans ce cas, je ne pense pas que cela doit poser de soucis majeurs ...

Doublé par spacefrog

**jojo57** · 05/06/2007, 08h54

Enfait j'ai trouvé une solution plus simple, il faudrait que lorsque un bouton radio est coché, recalculé le prix total, en faisant la somme de toutes les cases cochées mais jai beau essayer je n'y arrive pas

**jojo57** · 05/06/2007, 08h55

alors oui un seul produit par rubrique.
et jaffiche deja le produit par defaut en rouge donc oui le produit selectionner peut safficher d'une autre couleur

PS: tu veux voir mon JS que jai déjà fait??

**SpaceFrog** · 05/06/2007, 09h54

Bon alors juste un exemple avec deux rubriques ...

Essaye de construire ta page sur ce modèle ...

tu n'auras rien à changer dans la fonction ...
Elle scanera automùatiquemetn les fielset à la recherche des radios ...

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function Option(ObjRadio){
var Total=0
 var TabRubrique=document.getElementsByTagName('fieldset')
 
 for(i=0;i<TabRubrique.length;i++){
 	 	var TabInputs= TabRubrique[i].getElementsByTagName('input')
 	  	var TabRadios=new Array();
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio'){TabRadios.push(TabInputs[k])}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++){
 				var reflabel='lbl'+TabRadios[j].id;
 
		    	if (TabRadios[j].checked==true ){ Total+=Number(TabRadios[j].value);
		    	                            document.getElementById(reflabel).style.color='red';
		    	                            document.getElementById(reflabel).style.fontWeight='bold';
		    	                            }
		    	else{                       document.getElementById(reflabel).style.color='black';
		    	                            document.getElementById(reflabel).style.fontWeight='normal';
		    	                            }    		    	                            
		    	    }   
		    	}
document.getElementById('Total').value=Total + " €"
 
}		    	
</script>
</head>
 
<body onload="Option()">
<form method="post" action="" style="height: 493px" name="OptionsSelection">
<b>Rubrique 1</b>
<br /><br /> 
<fieldset id='rubrique1' style="width:45%;border:0px;">
	<input type='radio' value='16' id='produit94' name="rub1" onclick='setTimeout(function(){Option()},100);' style="float:left;" /><label id='lblproduit94' for='produit94' style="float:left;"> produit 1</label>
	<input style="float:right;" size="6" id='prix94' type='text' onFocus='javascript: this.blur()' value='16 €'/>
   <br style="clear:both;" />
	<input type='radio' value='18' id='produit95' name="rub1" checked='checked' onclick='setTimeout(function(){Option()},100);' style="float:left;" /><label id='lblproduit95' for='produit95' style="float:left;  color:red; font-weight:bold;" > produit 2</label>
	<input style="float:right;" size='6' id='prix95' type='text' onFocus='javascript: this.blur()' value='18 €'/>
</fieldset>
 
 
<br /><br />
<b>Rubrique 2</b>
<br /><br /> 
<fieldset id="rubrique2" style="width:45%;border:0px;">
	<input type='radio' value='62' id='produit11054' name="rub2" onclick='setTimeout(function(){Option()},100);' style="float:left;" /><label id='lblproduit11054' for='produit11054' style="float:left;"> produit 3</label>
	<input style="float:right;" size="6" id='prix11054' type='text' onFocus='javascript: this.blur()' value='62 €'/>
   <br style="clear:both;" />
	<input type='radio' value='52' id='produit111000100' name="rub2" checked='checked' onclick='setTimeout(function(){Option()},100);' style="float:left;" /><label id='lblproduit111000100' for='produit111000100' style="float:left;  color:red; font-weight:bold;" > produit 4</label>
	<input style="float:right;" size='6' id='prix111000100' type='text' onFocus='javascript: this.blur()' value='52 €'/>
</fieldset>
<br /><br />
ToTal :
<input size='8' name='Total' id="Total" onFocus='javascript: this.blur()' type='text' value=''/>
</form>
 
</form>
 
 
</body>
</html>

**jojo57** · 05/06/2007, 10h03

Merci beaucoup pour ton aide mais pourrait tu m'expliquer ce que fait ton code stp?

Javais fait un truc précédement quand je devais gérer avec des checkbox, mon code fonctionnait parfaitement mais jai du remplacer des checkbox par des radios, et maintenant il faudrai que je remplace la fin de la fonction par du code qui permet de savoir tout les cases cocher puis de recalculer le total a chaque fois...

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
function option(produit)
{
	//On récupère le nom de la case à cocher.
	nom = produit.name;
	//On récupère le numéro de la case à cocher en supprimant de la chaine la chaine "produit".
	num = nom.replace("produit","");
	//On récupère la valeur du champ correspondant au prix de la case à cocher (de l'option choisie).
	var t = document.getElementsByName("prix"+num);
	//On récupère la valeur en entier du prix correspondant à la case à cocher.
	var argent = enleveEuroEspace(t[0].value);
	//On récupère le signe euro qui se trouve en fin de champ du prix correspondant à la case à cocher.
	var euro = t[0].value.substring(t[0].value.length-2,t[0].value.length);
	//On récupère la valeur en entier du champ total de la page.
	var total = enleveEuroEspace(document.OptionsSelection.Total.value);
	//Si la case à cocher concernée est cocher...
 
	if (produit.checked==true)
	{
 
		//On ajoute le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		document.OptionsSelection.Total.value=metEuroEspace(total+argent,euro);
	}
	//Sinon...
	else
	{
		//On soustrait le total et la valeur du prix correspondant à la cose à cocher (et rajoute l'espace et le sigle euro avec la fonction metEuroEspace).
		document.OptionsSelection.Total.value=metEuroEspace(total-argent,euro);
	}
 
}

**SpaceFrog** · 05/06/2007, 10h34

J'ai du modifier le nommage des radios pour qu'ils réagissent ensemble dans la même rubrique ...
ainsi que la value des radios qui est égale au prix ...

Le script passe chaque rubrique en revue pour en retirer le value du radio qui est coché et incrémenter une variable "Total"

**jojo57** · 05/06/2007, 10h37

Merci grace à ta fonction jai résolu un de mes problèmes (celui que tu ma citer, le nomage des radios et du champs prix)

Par contre tu saurais comment je peut avoir la liste des radios qui sont cochés et recuperer le prix pour mettre a jour le total?

**jojo57** · 05/06/2007, 17h23

Désolé mais je suis de retour

Bon donc mes réductions suivant le nombre d'articles c bon ca marche.

Je rencontre un autre problème, j'ai une table qui contient pour chaque rubrique les frais de port.

J'affiche dans la partie php un champ de type hidden avec les frais de ports suivant l'article. (si l'article est "Aucun" alors les frais de port ne sont pas créer)
Dans ma function JS j'aimerais bien pouvoir récuperer les frais de port de chaque articles cochés cependant il maffiche pour chaque article le meme montant à savoir le prix des frais de port pour le premier article...

Voila ma declaration php

Code :

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

1
2
3
4
5
if ($rowrecupproduitrubriqueKit['nom'] != "Aucun")
			{
			$idfraisport=$rowrecupproduitrubriqueKit['id_fraisport'];
			echo "<input id='fraisport' name='fraisport' type='texte' value='$idfraisport'/>";
			}

et mon JS

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
function option(ObjRadio)
{
	var NbArticles=0
	var Total=0
	var TotalReduc1=0
	var TotalReduc2=0
	var Reduc1=0
 
	var TabRubrique=document.getElementsByTagName('fieldset')
	for(i=0;i<TabRubrique.length;i++)
	{	
 	 	var TabInputs = TabRubrique[i].getElementsByTagName('input');
 	  	var TabRadios = new Array();
 
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio')
				{
					TabRadios.push(TabInputs[k]);
				}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
		    	if ( (TabRadios[j].checked==true) && (TabRadios[j].value!='0') )
				{ 
					var teste = document.getElementById('fraisport').value;
					alert (teste);
					//alert(reflabel.replace("lblproduit",""));
					NbArticles++;
					Total+=Number(TabRadios[j].value);
					TotalReduc1+=Number(TabRadios[j].value);
					TotalReduc2+=Number(TabRadios[j].value);
		    	    document.getElementById(reflabel).style.color='red';
		    	    document.getElementById(reflabel).style.fontWeight='bold';
		    	}
		    	else
				{                       
					document.getElementById(reflabel).style.color='black';
		    		document.getElementById(reflabel).style.fontWeight='normal';
		    	}    		    	                            
		}

**jojo57** · 05/06/2007, 21h13

Ca m'affiche tout le temps le meme frais de port parce que l'id du champs ou jaffiche les frais de port dans le php à un id unique, il faudrait que je puisse changé l'id dans le JS, comment faire svp?

**jojo57** · 06/06/2007, 10h09

Le prob peut peut être venir de la

Code :

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

1
2
3
4
5
		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
		    	if ( (TabRadios[j].checked==true) && (TabRadios[j].value!='0') )
				{

Vu que maintenant jai rajouter les frais de port a la value du radio... Nom?

Faudrait pouvoir faire un split avant cette condition alors non?

**jojo57** · 07/06/2007, 15h58

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<html>
<head>
 
<script language="Javascript">
 
/**Fonction permettant de récupérer la somme des valeurs du tableau*/
Array.prototype.sum = function(){
								for(var a=0,sum=0;a<this.length;sum+=this[a++]);
								return sum;
								}
 
/**Fonction permettant de récupérer la valeur max du tableau*/
Array.prototype.max = function(){
								return Math.max.apply({},this)
								}
 
/**Fonction permettant de récupérer la valeur min du tableau*/
Array.prototype.min = function(){
								return Math.min.apply({},this)
								}
 
// déclaration des variables globals
var NbArticles
var Total
var TotalReduc1
var TotalReduc2
var Reduc1
var Reduc2
var TotalFdp
var Frais2
var ListFrais = new Array()
 
var FrsTrsp = new Array(100);
/**Fonction permettant en fonction de la case à cocher de récupèrer le prix correspondant, mettre à jour le total, les réductions...*/
function option(ObjRadio)
{
	ListFrais.length=0
 
	NbArticles=0
	Total=0
	TotalReduc1=0
	TotalReduc2=0
	Reduc1=0
	Reduc2=0
	TotalFdp=0
 
	var TabRubrique=document.getElementsByTagName('fieldset')
	for(i=0;i<TabRubrique.length;i++)
	{	
 	 	var TabInputs = TabRubrique[i].getElementsByTagName('input');
 	  	var TabRadios = new Array();
 
 	 	for(k=0;k<TabInputs.length;k++){
 	 			if (TabInputs[k].type=='radio')
				{
					TabRadios.push(TabInputs[k]);
				}
 	 	}
 
 		for(j=0;j<TabRadios.length;j++)
		{
 				var reflabel='lbl'+TabRadios[j].id;
				if ( (TabRadios[j].checked==true) && (TabRadios[j].value=='0') )
				{ 
					document.getElementById('choix'+TabRubrique[i].id).value='';
				}
		    	if ( (TabRadios[j].checked==true)  && (TabRadios[j].value!='0'))
				{ 				
					NbArticles++;
 
					ListFrais.push(Number(FrsTrsp[i]));
 
					TotalFdp+=FrsTrsp[i];
					Total+=Number(TabRadios[j].value);
					TotalReduc1+=Number(TabRadios[j].value);
					TotalReduc2+=Number(TabRadios[j].value);
 
					document.getElementById(reflabel).style.color='red';
		    	    document.getElementById(reflabel).style.fontWeight='bold';
					document.getElementById('choix'+TabRubrique[i].id).value=TabRadios[j].id;
		    	}
		    	else
				{                    
					document.getElementById(reflabel).style.color='black';
		    		document.getElementById(reflabel).style.fontWeight='normal';
		    	}    		    	                            
		}   
	// réduction suivant les frais de port
	if ( (NbArticles == 0) || (NbArticles == 1) )
	{
	Reduc1 = 0;
	}
	else
	{
	// on additionne les frais de port, on soustrait à ce total la valeur max des frais de port, on divise le tout par 3
	Reduc1 = (ListFrais.sum() - ListFrais.max())/3;
	}
 
 
	// réduction suivant le nombre d'articles selectionnés	 
	if (NbArticles == 0)
	{
	Reduc2 = 0;
	}
	else if (NbArticles == 1)
	{
	Reduc2 = 0;
	}
	else if (NbArticles == 2)
	{
	Reduc2 = 2;
	}
	else if (NbArticles == 3)
	{
	Reduc2 = 4;
	}
	else if (NbArticles == 4)
	{
	Reduc2 = 6.5;
	}
	else if (NbArticles == 5)
	{
	Reduc2 = 9;
	}
	else if (NbArticles == 6)
	{
	Reduc2 = 12;
	}
	else if (NbArticles == 7)
	{
	Reduc2 = 15;
	}
	else if (NbArticles == 8)
	{
	Reduc2 = 18;
	}
	else if (NbArticles == 9)
	{
	Reduc2 = 21.5;
	}
	else if (NbArticles == 10)
	{
	Reduc2 = 25;
	}
}
TotalReduc1 = (Total - Reduc1);
TotalReduc2 = (Total- Reduc1 - Reduc2);
 
// on arrondi les résultats au centiéme
Total = Math.round(Total*100)/100;
TotalReduc1 = Math.round(TotalReduc1*100)/100;
TotalReduc2 = Math.round(TotalReduc2*100)/100;
 
// on remplit les zones de text avec les bonnes valeurs
document.getElementById('Art').value = NbArticles
document.getElementById('Total').value = Total + " €"
document.getElementById('TotalReduc1').value = TotalReduc1 + " €"
document.getElementById('TotalReduc2').value = TotalReduc2 + " €"
document.getElementById('fdp').value = TotalFdp
 
}
 
/**Fonction permettant de vérifier si un article est coché*/
function check(form)
{
	// Si aucun article est coché
	if (NbArticles == 0)
	{
	// Message d'erreur
	alert('Vous n\'avez aucun article en commande');
	return false;
	}
	// Sinon
	else
	{
	// Le formulaire est envoyé
	document.forms[0].submit();
	}
 
}
 
</script>
 
<title>Cr&eacute;ation du kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body onLoad="option()">
<form method="post" action="http://www.mydogshop.net/boutique/choix_race_kit.php" style="height: 493px" name="OptionsSelection" >
 
<b>teste</b><fieldset id='teste' ><input type='hidden' id='choixteste' value=''/> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='149' id='produit92' name='rubrique5' checked='checked' onclick='setTimeout(function(){option()},100);' />
					<label id='lblproduit92' for='produit92' style='color:red; font-weight:bold;'>Cage en toile pliable "Taille Moyenne"</label></td>
					<td align='left'><input size='4' id='prix92' name='prix92' type='text' onFocus='javascript: this.blur()' value='149'/> €</td>  <br style='clear:both;'/></tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='0' id='produit336000624' name='rubrique5' onclick='setTimeout(function(){option()},100);' />
				<label id='lblproduit336000624' for='produit336000624'>Aucun</label></td>
				<td align='left'><input size='4' id='prix336000624' name='prix336000624' type='text' onFocus='javascript: this.blur()' value='0'/> €</td>  <br style='clear:both;'/></tr></table></fieldset ><br /><b>Nombre d'articles : </b><input size='3' id='Art' name='Art' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total : </b><input size='8' id='Total' name='Total' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total Après réduction : </b><input size='8' id='TotalReduc1' name='TotalReduc1' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total Après réduction suivant le nombre d'articles : </b><input size='8' id='TotalReduc2' name='TotalReduc2' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><b>Total fdp : </b><input size='4' id='fdp' name='fdp' onFocus='javascript: this.blur()' type='text' value=''/><br /><br /><div align='center'><input name='valider' type='button' value='Valider' onClick='(check());'/></div><br />
</form>
 
 
</body>
</html>

**SpaceFrog** · 06/06/2007, 08h44

pour les frais de ports...

soit tu mets les frais de ports dasn la value àprès le prix avec un séparateur, et à ce moment là il te faudra splitter la value pour separer le prix de l'articles des frais de port...

soit tu mets les frais de prot dans un array et tu récupère les frais de ports correspondant à ton article ...

soit (mais la je ne suis pas sur que cemla focntionen très bien) tu ajoutes dynamiquement une propriété a tes radios genre:

Code :

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

document.getElementById('monradio').fp=15

ensuite tu le récupères juste en dessous de l'incrémentation du Total

**jojo57** · 06/06/2007, 08h51

Merci SpaceFrog mais sachant que les frais de port sont propre à une rubrique de produit, je peut tout de meme les mettres dans la value du radio bouton pour pouvoir les recuperer dans la JS et les utiliser plusieurs fois dans l'application?

**SpaceFrog** · 06/06/2007, 09h17

alors fais un test au moment de l'incrémentation du total
il suffit de tester l'indice de la boucle du fieldset pour savoir dans quelle rubrique tu es :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var fp=0
switch (k){
               case (0)  : fp+=10;
                               break;
               case (1)  : fp+=15;
                               break;
               case (2)  : fp+=12;
                               break;
               case (3)  : fp+=5;
                               break;
            }

A placer juste aprs ton incrémentation du nombre d'articles ...

Creer un configurateur avec des prix

JavaScript

Vue hybride

Discussions similaires

Partager

Partager