Calculer un Prix Total

**Nel3030** · 12/04/2013, 18h31

Bonjour tout le monde,

Je recherche désespérément une solution pour mettre une sorte de ( formulaire de commande ''dynamique'') ,
un peu comme sur ce site :http://www.nabefabric.com/product.php?id_product=91

A part que mon site, n'est pas un site commercial, je souhaite juste que mes clients puissent calculer le prix selon une quantité...
Simplement en choissisant la qté et le prix s'afficherait automatiquement.
Par contre, selon les quantités le prix sera degressif ...

Mon site : http://www.cartesremerciement-mariag...P10X15020.html

Je vous remercie de votre aide,

Belle journée à tous,

Nelly

**michel.di** · 13/04/2013, 00h25

Bonsoir,
Tu as des petits soucis avec tes liens...

**Nel3030** · 13/04/2013, 12h45

Liens rectifiés... désolée

**plawyx** · 13/04/2013, 17h44

solution toute faite ou piste pour la développer ?

**Nel3030** · 13/04/2013, 23h46

Des pistes s'il vous plaît... Merci pour vos réponses

**hwoarang** · 15/04/2013, 10h36

Un petit bout de javascript semble suffisant. Tu as utilisé quel outil pour developper le site ?

**kolodz** · 15/04/2013, 14h05

Bonjour,

Je pense que le code javascript du site devrai t'aider.
Le code correspondant dans leur page est le suivant :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function(){
	//Auto calc price
	$('#quantity_wanted').keyup(function(){
		//Recalc the price
		var discountVal = 0;
		var finalValue = null;
		var input = parseInt($('#quantity_wanted').val());
		//parseInt($('#product_price').text());
		$(quantityDiscounts).each(function(key, val){
		var tmpQuantity = parseInt(val.quantity);
		var tmpNextQuantity = parseInt(val.nextQuantity);
		if(val.id_discount_type == 2)
		{
			if((input >= tmpQuantity && input < tmpNextQuantity)
			|| (input >= tmpQuantity && tmpNextQuantity == -1))
			{
				discountVal = parseFloat(val.value);
			}
		}
		});
		finalValue = sprintf('%0.2f', input * (productPrice - discountVal));
		if(finalValue > 0)
		{
			$('#product_price_container').show();
			$('#product_price').text(finalValue+' €');
		}
		else
		{
			$('#product_price_container').hide();
		}
	});
	$('#quantity_wanted').trigger('keyup');
});

Pour les variables utilisées, tu retrouve :
$('#quantity_wanted') => input de saisi du nombre d'unité.
$('#product_price_container') = > div contenant la partie total du prix.
$('#product_price') => span affichant le prix total.

Je pense qu'avec cela tu va pouvoir t'en sortir.

Cordialement,
Patrick Kolodziejczyk.

**Nel3030** · 16/04/2013, 08h33

Bonjour hwoarang,
J'utilise Dreamweaver CS5

Bonjour kolodz, Merci pour ta réponse, je fais l’essai dans l'après midi

Merci à vous d'avoir pris le temps de me répondre, c'est très sympa

A très vite

Nelly

**Nel3030** · 16/04/2013, 10h41

Merci encore pour votre aide,
kolodz je n'arrive pas à utiliser ton code, je dois mal m'y prendre ( Comme d'hab) je ne parviens pas à voir le résultat (normal je ne sais pas ou mettre les calculs...)

Je suis affreusement désolée... (

)

Et le code que tu m'as proposé :

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
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">$(function(){
	//Auto calc price
	$('#quantity_wanted').keyup(function(){
		//Recalc the price
		var discountVal = 0;
		var finalValue = null;
		var input = parseInt($('#quantity_wanted').val());
		//parseInt($('#product_price').text());
		$(quantityDiscounts).each(function(key, val){
		var tmpQuantity = parseInt(val.quantity);
		var tmpNextQuantity = parseInt(val.nextQuantity);
		if(val.id_discount_type == 2)
		{
			if((input >= tmpQuantity && input < tmpNextQuantity)
			|| (input >= tmpQuantity && tmpNextQuantity == -1))
			{
				discountVal = parseFloat(val.value);
			}
		}
		});
		finalValue = sprintf('%0.2f', input * (productPrice - discountVal));
		if(finalValue > 0)
		{
			$('#product_price_container').show();
			$('#product_price').text(finalValue+' €');
		}
		else
		{
			$('#product_price_container').hide();
		}
	});
	$('#quantity_wanted').trigger('keyup');
});
</script>
<style type="text/css">
#product_price_container {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
</style>
</head>
 
<body><table height="53">
 <thead>
    <td> Quantité </td>
  </thead>
        <tbody>
 <tr>
  <td><input type="text" size="3" class="nombre" id="nombre1" value="0" onchange="javascript:calcul_prix();" /></td>
  </tr>
 </tbody>  
</table>
<div id="product_price_container"><SPAN ID="product_price"> </SPAN>  </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Merci pour votre aide...

**Bovino** · 16/04/2013, 10h53

Il faut que tu intègres jQuery dans ta page...

**kolodz** · 16/04/2013, 11h00

En effet, les sélecteurs utilisé sont ceux de JQuery.
Mais cela ne devrait pas te poser problème vue que sur ta page final tu intègre déjà cette librairie.

Cordialement,
Patrick Kolodziejczyk.

**Nel3030** · 16/04/2013, 11h36

Merci à vous deux, j'ai intégré le code à ma page,
mais lorsqu'on y ajoute une quantité ça ne fait rien,
comment dois-je faire ?
Je pense ne pas avoir programmé le calcul dans le code java...
Et le problème c'est que mon total sera variable en fonction de la quantité...

Je vous demande encore de l'aide...

**kolodz** · 16/04/2013, 16h28

$('#quantity_wanted') => id="quantity_wanted"
ou
id="nombre1" = $('#nombre1')

Pour l'identifiant cité ci-dessus, remplace par ta valeur à toi... Ou remplace l’identifiant dans ta page html

Cordialement,
Patrick Kolodziejczyk.

**Nel3030** · 17/04/2013, 07h38

Je suis complètement pommée....
J'ai replacé l id... Mais rien n'y fait.
Le total ne s affiche toujours pas...
Je dois avoir une erreur dans mon code

( je suis une catastrophe )
A mon grand regret... Je crois que je vais devoir oublier cette idée de calcul dynamique ...

**kolodz** · 17/04/2013, 10h38

Il ne faut pas tu es très près du but ! Poste-nous le code de ta page avec l'id remplacer. Et on va la trouver la petite erreur qui nous embête !

Cordialement,
Patrick Kolodziejczyk.

**kolodz** · 17/04/2013, 19h58

Re,

J'ai corrigé les problèmes dû au variables non existantes dans la page exemple.

Et commenté le code aussi :

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
<!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=utf-8" />
		<title>Developpez.com : Exemple Forum</title>
		<meta name="author" content="Patrick Kolodziejczyk">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">$(function(){
			//Ajout de l'événement sur le laché de touche
			$('#quantity_wanted').keyup(function(){
				// Définition du prix du produit
				var productPrice = 45.25;
				var finalValue = null;
				// Récupération de la quantité de produit voulu
				var input = parseInt($('#quantity_wanted').val());
				// Calcul du prix
				finalValue = input * productPrice;
				// Si le prix est logique on l'affiche
				// Sinon on le cache
				if(finalValue > 0)
				{
					$('#product_price_container').show();
					$('#product_price').text(finalValue+' €');
				}
				else
				{
					$('#product_price_container').hide();
				}
			});
			// On déclanche l'événement un première fois
			$('#quantity_wanted').trigger('keyup');
		});
		</script>
	</head>
 
	<body>
			<div id="product_quantity_container">
				Quantité : 
				<input type="text" size="3" class="nombre" id="quantity_wanted" value="0"/>
			</div>
			<div id="product_price_container">
				Prix :
				<span ID="product_price"> </span>
			</div>
	</body>
</html>

Allez courage !

Cordialement,
Patrick Kolodziejczyk.

**Nel3030** · 18/04/2013, 00h14

De retour, un grand merci kolodz... c'est magique, je suis la plus heureuse !!!
Je bloque la dessus depuis des semaines... Quel soulagement
Encore merci à tout le monde, d'avoir pris le temps de me répondre, et de m'expliquer les choses...

J'ai encore une dernière question

, après j’arrête d’embêter tout le monde
Comment peut-on intégrer un prix dégressif ?

Merci pour tout Patrick

**kolodz** · 18/04/2013, 08h48

Comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var productPrice = 45.25;
var finalValue = null;
// Récupération de la quantité de produit voulu
var input = parseInt($('#quantity_wanted').val());
// Prix à partir de 10 articles
if(input > 10){
	productPrice = 10;
}
// Prix à partir de 50 articles
if(input > 50){
	productPrice = 5;
}
// la suite du calcule