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** · 04/06/2007, 17h25

Oki donc voila un exemple:

PS: dans chaque rubrique, jai un produit qui se coche par defaut.
Par default le total est bon puisqu'il est calculé en php en additionnant le prix des produits coché par défaut...

Rubrique 1

bouton radio -- produit 1 -- 15€
bouton radio -- produit 2 -- 25€ coché par défaut
bouton radio -- produit 3 -- 10€

Rubrique 2

bouton radio -- produit 1 -- 15€ coché par défaut
bouton radio -- produit 2 -- 25€

TOTAL : 40€

Maintenant je change, je veux plus le produit 2 de la rubrique 1 mais le produit 3

Je voudrait obtenir ca

Rubrique 1

bouton radio -- produit 1 -- 15€
bouton radio -- produit 2 -- 25€
bouton radio -- produit 3 -- 10€ coché

Rubrique 2

bouton radio -- produit 1 -- 15€ coché par défaut
bouton radio -- produit 2 -- 25€

TOTAL : 25€

mais moi jai ca, le prix du produit 2 est tj dans le total... malgré que le produit n'est plus selectionné

Rubrique 1

bouton radio -- produit 1 -- 15€
bouton radio -- produit 2 -- 25€
bouton radio -- produit 3 -- 10€ coché

Rubrique 2

bouton radio -- produit 1 -- 15€ coché par défaut
bouton radio -- produit 2 -- 25€

TOTAL : 50€

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

code html ...

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

oups dsl

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
<body>
<form method="post" action="" style="height: 493px" name="OptionsSelection">
<b>Rubrique 1</b><br /><br /> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit94' onclick='option(this);' /> produit 1</td>
				<td align='left'><input size='6' name='prix94' type='text' onFocus='javascript: this.blur()' value='16 €'/></td> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><b><font color='#FF0000'><input type='radio' value='true' name='produit95' checked='checked' onclick='option(this);' />produit 2</td>
				<td align='left'><input size='6' name='prix95' type='text' onFocus='javascript: this.blur()' value='18 €'/></td></font></b> </tr></table><br /><br /><b>Rubrique 2</b><br /><br /> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><b><font color='#FF0000'><input type='radio' value='true' name='produit11054' checked='checked' onclick='option(this);' />produit 3</td>
				<td align='left'><input size='6' name='prix11054' type='text' onFocus='javascript: this.blur()' value='62 €'/></td></font></b> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit111000100' onclick='option(this);' /> produit 4</td>
				<td align='left'><input size='6' name='prix111000100' type='text' onFocus='javascript: this.blur()' value='52 €'/></td> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit11202300' onclick='option(this);' /> produit 5</td>
				<td align='left'><input size='6' name='prix11202300' type='text' onFocus='javascript: this.blur()' value='65.9 €'/></td> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit11300200' onclick='option(this);' /> produit 6</td>
				<td align='left'><input size='6' name='prix11300200' type='text' onFocus='javascript: this.blur()' value='69.9 €'/></td> </tr></table><br /><br /><b>Rubrique 3</b><br /><br /> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit335500800' onclick='option(this);' /> produit 7</td>
				<td align='left'><input size='6' name='prix335500800' type='text' onFocus='javascript: this.blur()' value='65 €'/></td> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><b><font color='#FF0000'><input type='radio' value='true' name='produit335501250' checked='checked' onclick='option(this);' />produit 8</td>
				<td align='left'><input size='6' name='prix335501250' type='text' onFocus='javascript: this.blur()' value='119 €'/></td></font></b> </tr></table><br /><br /><b>Rubrique 4</b><br /><br /> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit51' onclick='option(this);' /> produit 9</td>
				<td align='left'><input size='6' name='prix51' type='text' onFocus='javascript: this.blur()' value='15 €'/></td> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><b><font color='#FF0000'><input type='radio' value='true' name='produit50' checked='checked' onclick='option(this);' />produit 10</td>
				<td align='left'><input size='6' name='prix50' type='text' onFocus='javascript: this.blur()' value='25 €'/></td></font></b> </tr></table> <table width='80%'  border='0' cellpadding='0' cellspacing='0'><tr><td width='50%'><input type='radio' value='true' name='produit52' onclick='option(this);' /> produit 11</td>
				<td align='left'><input size='6' name='prix52' type='text' onFocus='javascript: this.blur()' value='45 €'/></td> </tr></table><br /><br /><b>Total : </b><input size='8' name='Total' onFocus='javascript: this.blur()' type='text' value='224 €'/>
</form>
 
 
</body>

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

bon alors pour commencer un table dans un form

le table peut masquer les elements du form pour le dom ...

essaye d'utilser plutot des fieldset pour la mise en page si tu ne t'en sors pas autrement..

pour ce qui est de la boucle je regarde ça demain ...
là je vais me faire un rentrage maison ...

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

Envoyé par Bengo

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

Voila en gros c ca, mais ca me pose problème pke jai beau tout essayé je n'arrive pas... débutant inside

**jojo57** · 05/06/2007, 00h33

Envoyé par SpaceFrog

bon alors pour commencer un table dans un form

le table peut masquer les elements du form pour le dom ...

essaye d'utilser plutot des fieldset pour la mise en page si tu ne t'en sors pas autrement..

pour ce qui est de la boucle je regarde ça demain ...
là je vais me faire un rentrage maison ...

Ah cool merci beaucoup

jsuis presse de pouvoir augmenter et reduire le prix total pour pouvoir continuer mon site

**SpaceFrog** · 05/06/2007, 08h51

Comment ça doit se goupiller ton truc ?
un seul produit selectionnable par rubrique ?
la selection doit apparaitre en rouge ?

**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?

Creer un configurateur avec des prix

JavaScript

Discussions similaires

Partager

Partager