Sujet Précédent Sujet Suivant

Comment faire passer une variable d'une fonction a une autre

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 11 sept. 2022 à 17:33
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 13 sept. 2022 à 00:22

bonjour a tous

Voila j'avance encore un peu plus dans mon bon de commande 

A présent je souhaiterais récupérer une variable dans les frais de livraison pour  la déplacer dans une autre variable qui sauve le panier 

j'ai modifier le code qui fonctionne en partie

voici ce qui ce passe si j'ajoute des articles puis je choisis un mode de livraison avec le code ci dessous je récupère bien le contenu de la variable y 

Mais si ensuite j'ajoute des articles ma variable y devient indéfinie

j'ai regarder dans ma console voici le code ou ma variable y devient indéfinie a la ligne 51

.ajouter_produit_dans_panier

voici mon code 

var Livraison = 2;
var decimal = 2;


var MonPanier = (function() {
	panier = [];

	//fonction qui cree differentes variables	
	function Item(nom, prix, quantite, url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
	}

	//on recupere le choix de la livraison 
	$('.choix_livraison').click(function toto() {
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;
				var globaleFraisChoixLivraison = fraisChoixLivraison;
				savepanier(globaleFraisChoixLivraison); // 
				afficherpanier();
			}
		}
	});

	//c'est ici que je veux recuprer le total , la quanditee totale et les frais de livraison en diect
	function savepanier(y) {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
		if (MonPanier.totalquantite() < 1) {
			document.getElementById("messageSimple").innerHTML = y + ;
			document.getElementById("prints").innerHTML = MonPanier.totalpanier();
			document.getElementById("prints2").innerHTML = MonPanier.totalquantite();
			alert(y);
		}
	}
	//on lit le panier
	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
	}

	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
	}

	var obj = {};

	//on ajoute un produit 
	obj.ajouter_produit_dans_panier = function(nom, prix, quantite, url) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				if (quantite) {
					panier[item].quantite = Number(quantite);
					console.log(panier[item].quantite);
				} else {
					panier[item].quantite++;
					console.log(panier[item].quantite);
				}
				savepanier();
				return;
			}
		}
		var item = new Item(nom, prix, quantite, url);
		panier.push(item);
		savepanier();
	}

	obj.setquantiteForItem = function(nom, quantite) {
		for (var i in panier) {
			if (panier[i].nom === nom) {
				panier[i].quantite = quantite;
				console.log(totalquantite);
				break;
			}
		}
	};

	obj.enlever_produit_de_panier = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier[item].quantite--;
				if (panier[item].quantite === 0) {
					panier.splice(item, 1);
				}
				break;
			}
		}
		savepanier();
	}

	obj.enlever_produit_de_panier_tous = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier.splice(item, 1);
				console.log(panier[item]);
				break;
			}
		}
		savepanier();
	}

	obj.clearpanier = function() {
		panier = [];
		savepanier();
	}

	obj.totalquantite = function() {
		var totalquantite = 0;
		for (var item in panier) {
			if (panier[item].nom === 77777) {
				totalquantite += Number(panier[item].quantite) * 9;
				console.log(totalquantite);
			}
			totalquantite += Number(panier[item].quantite);
		}
		console.log(totalquantite);
		return Number(totalquantite);
	}

	obj.totalpanier = function() {
		var totalpanier = 0;
		for (var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
			console.log(totalpanier);
		}
		return Number(totalpanier.toFixed(decimal));
	}

	obj.listpanier = function() {
		var panierCopy = [];
		for (i in panier) {
			item = panier[i];
			itemCopy = {};
			for (p in item) {
				itemCopy[p] = item[p];
			}
			itemCopy.total = Number(item.prix * item.quantite).toFixed(decimal);
			panierCopy.push(itemCopy)
		}
		return panierCopy;
	}

	return obj;
})();

function changeQte(element) {
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
	$("[data-nom='" + label + "']").attr('data-qte', qte);
}

$('.ajouter-panier').click(function(event) {
	event.preventDefault();
	var nom_option = "";
	var prix_option = 0;
	var url = $(this).data('url');
	var option_checkbox = $(this).data('checkbox');
	if (option_checkbox != "") {
		var checkboxes = document.getElementsByClassName(option_checkbox);
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked == true) {
				var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
				var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
			}
		}
	}
	if ($(this).data('select')) {
		var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
	} else var nom = $(this).data('nom');
	var prix = Number($(this).data('prix')) + (prix_option);
	if ($(this).attr('data-qte')) {
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);

	} else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);


	afficherpanier();
});

$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});
A voir également:

8 réponses

Réponse 1 / 8
yg_be Messages postés 23342 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 21 novembre 2024 Ambassadeur 1 551
11 sept. 2022 à 18:33

bonjour,

un peu de lecture: https://www.delftstack.com/fr/howto/javascript/javascript-global-variable/
1
Réponse 2 / 8
Totor
11 sept. 2022 à 20:36

Salut, ou alors passer la variable avec return en fin de la fonction.

La portée d'une variable définit par où elle est créée indique où elle existe et est disponible.

Exemple si une variable est créée dans une fonction elle n'existe que dans la fonction et bien sûr lors de l’exécution de la fonction uniquement. Le mot clé return permet d'obtenir cette variable.


 

function returnValeur(arg){ return arg+1}

let valeurPlusUn=returnValeur(2)

L'avantage de cette méthode sur les variables globales et la polyvalence(on peut réutiliser la même fonction du moment qu'on utilise la valeur retournée) et de ne pas surcharger la mémoire avec des variables globales(qui sont moins sécurisées qu'une variable interne).

On peut très bien utiliser directement la fonction plutôt que d'attribuer une valeur à une fonction si on a pas besoin de la mémoriser:

document.getElementById('affiche').innerHTML='2 + 1 ='+returnValeur(2)
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
11 sept. 2022 à 21:00

bonjour

Merci pour cette explication et cet exemple 

je ferais des essais e des test lorsque j'aurais trouve une solution 

Autrement je vais encore m'emmêlé les pinceaux et tout confondre

0
Réponse 3 / 8
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704
12 sept. 2022 à 09:15

Bon...  Toujours aussi limpide dans tes explications à ce que je vois ...

C'est le problème .. quand on n'a pas pris le temps de se former un minimum à la programmation...  on n'a du mal à exprimer ce qu'on veut obtenir et à interpreter/comprendre les lignes de codes ..

Bref..

Déjà...  dans ce bout de code :

	//*********************************************************************************************************
		//on recupere le id du bouon radio pour le code promo 												*******
		//grace a cette condition si on ne choisit pas de code promo alors les calucls se font normalement ********
		//*********************************************************************************************************
		document.querySelectorAll("input").forEach(item => {
			item.addEventListener("change", () => {
				//console.log(item.id)
				if (item.id == "vert") {
					//on cree la variable test pour definir si le panier est vide ou pas **************************
					let test = MonPanier.totalquantite();

					if (MonPanier.totalquantite() >= 1 && MonPanier.totalquantite() < 20) {
						//on definit les coefficients	    
						let coefficient_promo = 0.00;
						let coefficient_promo_inverse = 0.00;
						let code_promo = 0;
						//on cree les variables pour afficher en html les resultats
						let ancien_pris_sans_livraison = (((MonPanier.totalpanier())));
						let ristourne = (MonPanier.totalpanier() * coefficient_promo_inverse).toFixed(2);
						let nouveau_prix_sans_livraison = ((MonPanier.totalpanier() * coefficient_promo)).toFixed(2);
						let nouveau_prix_livraison_incluse = ((MonPanier.totalpanier() * coefficient_promo) + Number(prix_choix_livraison)).toFixed(2);
						//on cree la variable test pour definir si le panier est vide ou pas **************************
						let test = MonPanier.totalquantite();

						//on renseigne les variables qui vont servir pour l'envois par mail
						document.getElementById('code_promo').innerHTML = "0";
						document.getElementById('nouveau_prix_sans_livraison').innerHTML = nouveau_prix_sans_livraison;
						document.getElementById('coefficient_promo').innerHTML = coefficient_promo;
						document.getElementById("ancien_prix_livraison_incluse").innerHTML = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);
						document.getElementById('code_promo').innerHTML = "0";

						//ici est defini le prix a afficher dans paypal***********
						document.getElementById('amount').value = prix_et_livraison;
					}
				} // fin de if item.id == "vert"
			}) //fin de item.addEventListener("change", () =>
		})

A quoi ça te sert de faire une boule ET un IF ... si le but est juste de cibler l'élément dont l'id est "vert" ?

Et à quoi te sert ta variable "test" puisque tu ne l'utilises pas ensuite ??

Et puis.. sachant que tu utilises déjà du jquery dans ton script.. pourquoi faire autant de mélange avec du javascript " classique " ? ( il me semble que ce n'est pas la première fois que je t'en parle...)

En gros, ton code pourrait ressembler tout simplement à ça ( tu vois. pas de boucle ni de if inutile ...)

//*********************************************************************************************************
//on recupere le id du bouon radio pour le code promo 												*******
//grace a cette condition si on ne choisit pas de code promo alors les calucls se font normalement ********
//*********************************************************************************************************
$("#vert").change(function(){
  //on cree la variable test pour definir si le panier est vide ou pas **************************
    let test = MonPanier.totalquantite();

    if (test  >= 1 && test  < 20) {
      //on definit les coefficients	    
      let coefficient_promo = 0.00;
      let coefficient_promo_inverse = 0.00;
      let code_promo = 0;
      //on cree les variables pour afficher en html les resultats
      let ancien_pris_sans_livraison = (((MonPanier.totalpanier())));
      let ristourne = (MonPanier.totalpanier() * coefficient_promo_inverse).toFixed(2);
      let nouveau_prix_sans_livraison = ((MonPanier.totalpanier() * coefficient_promo)).toFixed(2);
      let nouveau_prix_livraison_incluse = ((MonPanier.totalpanier() * coefficient_promo) + Number(prix_choix_livraison)).toFixed(2);
      
      //on renseigne les variables qui vont servir pour l'envois par mail
      $('code_promo').html( "0");
      $('nouveau_prix_sans_livraison').html( nouveau_prix_sans_livraison);
      $('coefficient_promo').html( coefficient_promo);
      $("ancien_prix_livraison_incluse").html( (((MonPanier.totalpanier()))) + Number(prix_choix_livraison));
      $('code_promo').html( "0");

      //ici est defini le prix a afficher dans paypal***********
      $('amount').val(prix_et_livraison);
    }    
});

Pour en revenir à ta question...

Il suffit, dans le code qui te sert à actualiser les quantités et le total... d'y ajouter le code qui permet de remplir les frais de livraison...
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 12 sept. 2022 à 21:38

bonjour Jordane 

Merci pour le code , c'est gentil

Alors je vais répondre a tes questions 


A quoi ça te sert de faire une boule ET un IF ... si le but est juste de cibler l'élément dont l'id est "vert" ?
Comme tu le sais je suis en plein apprentissage et j'essaye de me débrouiller avec des tutos que je trouve a gauche a droite
Et donc ce code qui permet de donner des instructions si le bouton est coche , est un code que j'ai trouve sur un site de formation 
Mais je ne sais plus lequel

Et à quoi te sert ta variable "test" puisque tu ne l'utilises pas ensuite ??
J'ai surement du oublier de la mettre en commentaire

Et puis.. sachant que tu utilises déjà du jquery dans ton script.. pourquoi faire autant de mélange avec du javascript " classique " ? ( il me semble que ce n'est pas la première fois que je t'en parle...)


Car pour rappel ce code de bon de commande ne vient pas de moi et j'ai déjà beaucoup de mal avec javascript , je t 'assure je fais de mon mieux et si tu savais les heures que je passe a essayer de me debrouiller 

En gros, ton code pourrait ressembler tout simplement à ça ( tu vois. pas de boucle ni de if inutile ...)
C'est que ce code est plus clair rien a dire ,encore merci 


Pour en revenir à ta question...

Il suffit, dans le code qui te sert à actualiser les quantités et le total... d'y ajouter le code qui permet de remplir les frais de livraison...

Euhhh j'ai pas vraiment suivi, 
car tout est bon dans ce code quand même ?
 

	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
		
		let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;
document.getElementById("fraisDeLivraison").innerHTML =fraisChoixLivraison;
		//var total = MonPanier.totalpanier() + Number(y);
		document.getElementById("prints").innerHTML = MonPanier.totalpanier();
		document.getElementById("prints2").innerHTML = MonPanier.totalquantite();
	}
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
12 sept. 2022 à 21:21

Je viens de placer des console.log dans la function savepanier
afin de savoir ce qui se passe avec fraisDeLivraison 

je rentre un article
La console me retourne bien un total et une quanditee

pour les frais de livraison la console indique <empty string>

je coche un frais d'envois 

La console ne bouge pas 

je rentre un article ma console affiche les frais d'envois

0
Réponse 4 / 8
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 12 sept. 2022 à 21:53

voila j'ai enfin trouver ce que je voulais 

donc tout est en ordre

je me suis servi  de ce code pour faire passer ce que je voulais 

tout ce mets bien a jour a present 

		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) { //debut const x of cases
			if (x.checked) {
				//si une case est cochee on recupere 2 variables
				var nom_choix_livraison = x.dataset.nom;
				var prix_choix_livraison = x.value;
				//on definit le prix total et la livraison 
				var prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);

				break;
			}
		}

Désolé de vous en faire voir autant 

encore merci
1
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704
12 sept. 2022 à 23:00

code, qui se résume, encore une fois... par simplement :

let prix_choix_livraison = document.querySelector('input[name="choix_livraison"]:checked').value;
let prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);

pas besoin de boucle .. ni de if ...

par contre, ce code n'affiche rien dans le html ...

0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024
12 sept. 2022 à 23:56

jordane Merci pour le code je viens de comprendre ce que tu voulais dire par 

Il suffit, dans le code qui te sert à actualiser les quantités et le total... d'y ajouter le code qui permet de remplir les frais de livraison...

j'ai fini par choisir ta solution plus lisible que celle que je venais de mettre en place 

Mais on a un soucis les frais de livraison ne s'affiche pas lorsque on les choisit 

pour être plus compréhensible j'ai fait des console log avec des explications

je te montre mon code de savePanier 

		function savepanier() {
			sessionStorage.setItem('MonPanier', JSON.stringify(panier));

			let prix_choix_livraison = document.querySelector('input[name="choix_livraison"]:checked').value;
			let prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);


			document.getElementById("prix_choix_livraison").innerHTML = prix_choix_livraison;
			document.getElementById("prix_et_livraison").innerHTML = prix_et_livraison;
			document.getElementById("prints").innerHTML = MonPanier.totalpanier();
			document.getElementById("prints2").innerHTML = MonPanier.totalquantite();

			console.log("fraisChoixLivraison");
			console.log("prix_choix_livraison " + prix_choix_livraison + " prix_choix_livraison");
			console.log("prix_et_livraisonn " + prix_et_livraison + " prix_et_livraison");
			console.log("MonPanier.totalpanier()" + MonPanier.totalpanier() + " MonPanier.totalpanier()");
			console.log("MonPanier.totalquantite() " + MonPanier.totalquantite() + " MonPanier.totalquantite()");
			console.log("fraisChoixLivraison");
		}

 a présent jetons un oeil a la console

j'ajoute un article tout est ok

prix_choix_livraison  prix_choix_livraison panier.js:125:11
prix_et_livraisonn 0.55 prix_et_livraison panier.js:126:11
MonPanier.totalpanier()0.55 MonPanier.totalpanier() panier.js:127:10
MonPanier.totalquantite() 1 MonPanier.totalquantite()

 j'ajoute un mode de livraison , rien ne se passe dans la console elle reste inchangée

Maintenant j'ajoute juste un article et les frais de livraison apparaisse enfin ...

prix_choix_livraison 3 prix_choix_livraison panier.js:125:11
prix_et_livraisonn 4.1 prix_et_livraison panier.js:126:11
MonPanier.totalpanier()1.1 MonPanier.totalpanier() panier.js:127:10
MonPanier.totalquantite() 2 MonPanier.totalquantite()

Mais entre temps j'ai fait des essais la livraison se mets bien a jour directement si on définit le document.getElementById dans la function livraison 

 bien entendu j'ai essayer de faire 

let prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);

dans la function livraison mais a ce moment c'est le total du panier qui ne se mets pas a jour 

0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
13 sept. 2022 à 00:22

je pense avoir trouve la solution je continue les tests demain 

dans la fonction livraison il y a ceci

afficherpanier();

j'ai donc ajouter ceci avant la fin de afficherpanier tout comme on l'avait fait avec savePanier pour les quantités et le total

let prix_choix_livraison2 = document.querySelector('input[name="choix_livraison"]:checked').value;
let prix_et_livraison2 = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);
	document.getElementById("prix_choix_livraison").innerHTML = prix_choix_livraison2;
document.getElementById("prix_et_livraison").innerHTML  = prix_et_livraison2; 
    	console.log("prix_choix_livraison " + prix_choix_livraison2 + " prix_choix_livraison");
		console.log("prix_et_livraisonn " + prix_et_livraison2 + " prix_et_livraison");
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
11 sept. 2022 à 18:56

bonjour Yg_be

merci pour le lien et la reponse

je viens de faire la modification mais cela n'a rien changer 

Mais je me demande si ce n'est pas du au fait que j'ai changer l'ordre d'une fonction car celle de la ligne 17 se trouvait après la function de la ligne 187

donc les frais de livraison sont ajouté en fin de code et non pas au début de mon code 

Mais si je remets la fonction de la ligne 17 a sa place d'origine j'ai une erreur qui me dit que savepanier n'est pas défini

donc comment faire pour que le programme puisse récupérer les frais de livraison de la function 

$('.choix_livraison').click(function toto() et les mettre dans la fonction savepanier
0
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704
11 sept. 2022 à 19:21

Bonjour,

Pour que la portée de la variable soit globale . il faut :

1 - Initialiser cette variable au début du JS en dehors de toute fonction via le mot clé "var"

2 - retirer le var ou le let qui se trouve DANS la fonction

Ensuite, pour qu'elle soit utilisable dans une autre fonction.. il faut d'abord que l'utilisateur est décléenché son remplissage ( ici, en clicquant sur le choix de la livraison )

Bien entendu, il semble que tu ne veuilles récupérer que le contenu de la variable  fraisChoixLivraison 

Il te suffit donc de remettre cette même ligne de code là où tu en as besoin

let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;

Si ça ne te suffit pas comme réponse..... poste nos le code COMPLET .. car encore une fois.. des extraits de code sortis de leurs contextes ne nous permettront pas de t'en dire plus !

1
Réponse 6 / 8
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 11 sept. 2022 à 21:02

Bonjour Jordane 

je pense que je me suis encore un peu emmêlé les pinceaux  et en effet cela est mieux de poster le code complet 

J'avais pas fait attention mais la fonction sauver le panier est contenu dans la variable monPanier

je poste mon code complet afin d'y voir plus clair

var Livraison = 2;

var y = 0;

//*********************************************************************
// Les messages concernant la fonctionnalité de commande par lot*******
//*********************************************************************
var txt_qte_minimum_bad = "<font color='red'>Attention les quantités ne sont pas corrects, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits minimum</font>";
var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correct</font>";
var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits";

//**********************************************************************************************************************
// Comment affiche-t-on les prix du panier et du total															********
// Pour rappel, les prix des produits sont à modifier via les attributs HTML data-prix dans le fichier index.php********
// 0 pour aficher aucune décimale : 19 euros																	********
// 2 pour afficher deux décimales : 19.00 euros																	********
//***********************************************************************************************************************
var decimal = 2;

//debut des fonctions et variables

//creation variable MonPanier et de la fonction
var MonPanier = (function() {
	panier = [];

	// on cree l'item
	function Item(nom, prix, quantite, url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
	}

//exemple sur lequel je me suis inspiré
	//function toto() {
	//let  = document.querySelector('input[name="choix_livraison"]:checked').value;
	//savepanier(fraisChoixLivraison); 
	//}

	//function savepanier(y) {
	//alert(y);
	//}

//function qui sauve le panier ou je veux récupérer les frais de livraison 
	function savepanier(y) {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
		document.getElementById("fraisDeLivraison").innerHTML = y;
		let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;
		//var total = MonPanier.totalpanier() + Number(y);
		document.getElementById("prints").innerHTML = MonPanier.totalpanier();
		document.getElementById("prints2").innerHTML = MonPanier.totalquantite();
	}

	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
		//console.log(y);
	}

	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
		//console.log(totalpanier);
	}

	var obj = {};

	obj.ajouter_produit_dans_panier = function(nom, prix, quantite, url) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				if (quantite) {
					panier[item].quantite = Number(quantite);
					////console.log(panier[item].quantite);

				} else {
					panier[item].quantite++;
					////console.log(panier[item].quantite);
				}
				savepanier();
				return;
			}
		}
		var item = new Item(nom, prix, quantite, url);
		panier.push(item);
		savepanier();
	}

	obj.setquantiteForItem = function(nom, quantite) {
		for (var i in panier) {
			if (panier[i].nom === nom) {
				panier[i].quantite = quantite;
				////console.log(totalquantite);
				break;
			}
		}
	};

	obj.enlever_produit_de_panier = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier[item].quantite--;
				//console.log(totalquantite);
				if (panier[item].quantite === 0) {
					panier.splice(item, 1);
					//	console.log(totalquantite);

				}
				break;
			}
		}
		savepanier();
	}

	obj.enlever_produit_de_panier_tous = function(nom) {
		for (var item in panier) {
			if (panier[item].nom === nom) {
				panier.splice(item, 1);
				////console.log(panier[item]);
				break;
			}
		}
		savepanier();
	}

	obj.clearpanier = function() {
		panier = [];
		savepanier();
	}

	obj.totalquantite = function() {
		var totalquantite = 0;
		for (var item in panier) {
			if (panier[item].nom === 77777) {
				totalquantite += Number(panier[item].quantite) * 9;
				////	console.log(totalquantite);
			}
			totalquantite += Number(panier[item].quantite);
			//console.log(totalquantite);
		}
		////console.log(totalquantite);
		return Number(totalquantite);
	}

	obj.totalpanier = function() {
		var totalpanier = 0;
		for (var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
			////console.log(totalpanier);
		}
		return Number(totalpanier.toFixed(decimal));
	}

	obj.listpanier = function() {
		var panierCopy = [];
		for (i in panier) {
			item = panier[i];
			itemCopy = {};
			for (p in item) {
				itemCopy[p] = item[p];
			}
			itemCopy.total = Number(item.prix * item.quantite).toFixed(decimal);
			panierCopy.push(itemCopy)
		}
		return panierCopy;
	}

	return obj;
})();
//fin de la variable MonPanier et de la fonction

function changeQte(element) {
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
	$("[data-nom='" + label + "']").attr('data-qte', qte);
}

$('.ajouter-panier').click(function(event) {
	event.preventDefault();
	var nom_option = "";
	var prix_option = 0;
	var url = $(this).data('url');
	var option_checkbox = $(this).data('checkbox');
	if (option_checkbox != "") {
		var checkboxes = document.getElementsByClassName(option_checkbox);
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked == true) {
				var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
				var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
			}
		}
	}
	if ($(this).data('select')) {
		var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
	} else var nom = $(this).data('nom');
	var prix = Number($(this).data('prix')) + (prix_option);
	if ($(this).attr('data-qte')) {
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);

	} else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
	afficherpanier();
});

$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});

$('.choix_livraison').click(function toto() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
			//let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;
			savepanier(fraisChoixLivraison);
			afficherpanier();
		}
	}
});

//*******************************
//debut fonction panier**********
//*******************************
function afficherpanier() {

	//********************************************************
	//debut on ajoute les lignes dans le bon de commande ***********
	//********************************************************
	var panierArray = MonPanier.listpanier();
	var output = "";
	var count = 0;

	for (var i in panierArray) {

		if (panierArray[i].nom == 77777) {
			////console.log("777777777777")
			output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='" + panierArray[i].url + "'data-lightbox='example-set'><img src=" + panierArray[i].url + "  style='width:100px;height:100px;'></a>" + "</div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>" +
				"<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>" +
				"<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + ((panierArray[i].quantite) * 10) + "'>" +
				"<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div><br>attention CE PACK COMPORTE " + ((panierArray[i].quantite) * 10) + " SACHETS INDIVISIBLE</div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" +
				"</div>";
		} else if (panierArray[i].nom != 77777) {
			////console.log("different")
			output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='" + panierArray[i].url + "'data-lightbox='example-set'><img src=" + panierArray[i].url + "  style='width:100px;height:100px;'></a>" + "</div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" +
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>" +
				"<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>" +
				"<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>" +
				"<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"

				+
				"<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" +
				"</div>";
			////console.log(panierArray[i].nom);
		}
		//********************************************************************************
		//pour afficher les reductions on va compter le nombre de sachets reel***********
		//********************************************************************************		 
		if (panierArray[i].nom == 77777) {
			//on incremente count de 10
			count = count + (10 * Number(panierArray[i].quantite))
			//console.log(count1);
		} else if (panierArray[i].nom == 88888) {
			//on incremente count de 20
			count = count + (20 * Number(panierArray[i].quantite))
			//console.log(count2);
		} else if (panierArray[i].nom == 99999) {
			//on incremente count de 20
			count = count + (30 * Number(panierArray[i].quantite))
			//console.log(ccount3);
		} else {
			count = count + (1 * Number(panierArray[i].quantite))
			//console.log(count);
		}
		//console.log(count);
		var total_reel_avec_pack = count;
		//console.log(total_reel_avec_pack);
		//document.getElementById('total_reel_avec_pack ').innerHTML = count ; 
	}

	$('.show-panier').html(output);

	if (Livraison == 2) {

		//*************************************************************************************
		//on commence par recuperer des informations lorsque on clic sur un choix de livraison**** 
		//on cree egalement des variables grace au mode de livraison						  ****
		//****************************************************************************************
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) { //debut const x of cases
			if (x.checked) {
				//si une case est cochee on recupere 2 variables
				var nom_choix_livraison = x.dataset.nom;
				var prix_choix_livraison = x.value;
				//on definit le prix total et la livraison 
				var prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);

				break;
			}
		}

		$('.total-panier').html(prix_et_livraison.toFixed(decimal));

		//*************************************************************************************
		//different elements a afficher en html************************************************** 
		//****************************************************************************************
		document.getElementById('livraison-detail').innerHTML = "(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)";
		document.getElementById('nouveau_prix_total_haut').innerHTML = ((((MonPanier.totalpanier())))).toFixed(2);
		document.getElementById("prix_depart_haut").innerHTML = MonPanier.totalpanier().toFixed(2);
		document.getElementById("prix_depart").innerHTML = MonPanier.totalpanier().toFixed(2);

		//********************************************************************************************************
		// on va extrire de mon choix de livraison les pays pour afficher dans les modals les erreurs*************
		//********************************************************************************************************

		//d'autres ereurs communes a tous les pays **************************
		document.getElementById('modal_erreur').innerHTML = nom_choix_livraison;
		document.getElementById('modal_erreur_mondial').innerHTML = nom_choix_livraison;

		//*********************************************************************************************************
		//on recupere le id du bouon radio pour le code promo 												*******
		//grace a cette condition si on ne choisit pas de code promo alors les calucls se font normalement ********
		//*********************************************************************************************************
		document.querySelectorAll("input").forEach(item => {
			item.addEventListener("change", () => {
				//console.log(item.id)
				if (item.id == "vert") {
					//on cree la variable test pour definir si le panier est vide ou pas **************************
					let test = MonPanier.totalquantite();

					if (MonPanier.totalquantite() >= 1 && MonPanier.totalquantite() < 20) {
						//on definit les coefficients	    
						let coefficient_promo = 0.00;
						let coefficient_promo_inverse = 0.00;
						let code_promo = 0;
						//on cree les variables pour afficher en html les resultats
						let ancien_pris_sans_livraison = (((MonPanier.totalpanier())));
						let ristourne = (MonPanier.totalpanier() * coefficient_promo_inverse).toFixed(2);
						let nouveau_prix_sans_livraison = ((MonPanier.totalpanier() * coefficient_promo)).toFixed(2);
						let nouveau_prix_livraison_incluse = ((MonPanier.totalpanier() * coefficient_promo) + Number(prix_choix_livraison)).toFixed(2);
						//on cree la variable test pour definir si le panier est vide ou pas **************************
						let test = MonPanier.totalquantite();

						//on renseigne les variables qui vont servir pour l'envois par mail
						document.getElementById('code_promo').innerHTML = "0";
						document.getElementById('nouveau_prix_sans_livraison').innerHTML = nouveau_prix_sans_livraison;
						document.getElementById('coefficient_promo').innerHTML = coefficient_promo;
						document.getElementById("ancien_prix_livraison_incluse").innerHTML = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison);
						document.getElementById('code_promo').innerHTML = "0";

						//ici est defini le prix a afficher dans paypal***********
						document.getElementById('amount').value = prix_et_livraison;
					}
				} // fin de if item.id == "vert"
			}) //fin de item.addEventListener("change", () =>
		}) //fin de document.querySelectorAll("input").forEach(item => 

		$('.total-panier-modal').html(MonPanier.totalpanier());
		$('.total-quantite').html(MonPanier.totalquantite());
		if ((Qte_Minimum == 1) && (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == -1) && (MonPanier.totalquantite() != 0)) {
			//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
		} else if ((Qte_Minimum == 1) && ((Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 1) || (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 0)) && (MonPanier.totalquantite() != 0)) {
			//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok;
		} else if (Qte_Minimum == 1) {
			//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut;  
		} else if (Qte_Minimum == 0) {
			//document.getElementById('qte_minimum_report').innerHTML = "";
		}
		//document.getElementById('total_qte_haut').innerHTML = MonPanier.totalquantite();
		document.getElementById('total_qte').innerHTML = MonPanier.totalquantite();
		document.getElementById('total_qte_bas').innerHTML = MonPanier.totalquantite();
		document.getElementById('total_qte_modal').innerHTML = MonPanier.totalquantite();

	} //fin fonction panier

	$('.show-panier').on("click", ".effacer-item", function(event) {
		var nom = $(this).data('nom')
		MonPanier.enlever_produit_de_panier_tous(nom);
		afficherpanier();
	})

	$('.show-panier').on("click", ".moins-item", function(event) {
		var nom = $(this).data('nom')
		MonPanier.enlever_produit_de_panier(nom);
		afficherpanier();
	})


	$('.show-panier').on("click", ".plus-item", function(event) {
		var nom = $(this).data('nom')
		MonPanier.ajouter_produit_dans_panier(nom);
		afficherpanier();
	})

	$('.show-panier').on("change", ".item-quantite", function(event) {
		var nom = $(this).data('nom');
		var quantite = Number($(this).val());
		MonPanier.setquantiteForItem(nom, quantite);
		afficherpanier();
	});

	afficherpanier();
0
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704
11 sept. 2022 à 21:40

par contre... on ne sait toujours pas exactement quelle variable tu veux récupérer... et.. pour en faire quoi ?

1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024
11 sept. 2022 à 21:47

Merci pour la réponse je souhaiterais pouvoir récupérer la variable let fraisChoixLivraison lorsque un utilisateur choisira son mode de livraison  avec les boutons radios avec la function de la ligne 208

Pour la transmettre dans la fonction savePanier afin de pouvoir l'ajouter a la variable MonPanier.totalpanier() et pouvoir afficher le résultat en html

Afin de pouvoir  qu'il puisse visionner en direct ce qui se passe au niveau de son panier avec les frais de livraison ajoute 

0
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
11 sept. 2022 à 22:04

pourquoi avoir enlever la ligne 212 ?

vu que c'est cette ligne qui permet d'alimenter ta variable ?

if (x.checked) {
	//let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value; // ??? faut la laisser !
	savepanier(fraisChoixLivraison);
	afficherpanier();
}

Mais bon.. perso .. vu que cette variable ne sert à rien là où elle se trouve actuellement... 

je la récupèrerai directement dans la fonction savepanier

function savepanier() {
	sessionStorage.setItem('MonPanier', JSON.stringify(panier));
    let fraisChoixLivraison = document.querySelector('input[name="choix_livraison"]:checked').value;
	document.getElementById("fraisDeLivraison").innerHTML = fraisChoixLivraison ;
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024
Modifié le 11 sept. 2022 à 22:35

Merci jordane pour la correction c'est super sympa

Mais j'ai un petit soucis 

lorsque j'ajoute des articles ceux ci sont bien comptabilisé dans mon html 

ensuite je choisi un mode de livraison , Mais il n'est pas affiche en html 

pour le faire afficher je dois ajouter au minimum un article 

0
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
11 sept. 2022 à 22:41

Quel est le code qui permet d'afficher dans ta page HTML lorsque tu ajoutes un produit ?

Tu devrais pouvoir être capable de la retrouver et donc de l'appeler lorsque tu choisis un mode de livraison.

1
Réponse 7 / 8
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 11 sept. 2022 à 23:35

je n'ai pas très bien compris ta question jordane 

le morceau de code qui ajoute un produit est 

obj.ajouter_produit_dans_panier

l'appeler lorsque j'ajoute un produit ?

lorsque l'utilisateur sectionne le bouton radio vert  a la ligne 329

voici ce qui se mets en place en html

c'est basique pour le moment ....

	   <label style="">
          <input type="radio" name="promotioncases" id="vert" data-target="30" value="30" />
       </label>
	
	
	         <div id="30" class="descendre">          
				<p id="fraisDeLivraison"></p>                
				<p id="prints"></p>          
				<p id="prints2"></p>
			</div>
0
Réponse 8 / 8
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
12 sept. 2022 à 04:20

Le seul moyen que j'ai pour afficher en temps réel les changements au niveau des quantités , du total et de la livraison lorsque le bouton radio est activé est de passer par des document.getElementById en javascript

Car je désire voir les changements en temps réel lorsque le bouton radio est activé

Pour l'instant cela fonctionne très bien avec le total et les quantités  mais pas pour la livraison 
0

Discussions similaires

je veut créer des codes
jonkiller -
Nhhi -

20 réponses
Remplir une cellule (texte) en fonction d'une autre (texte).
SOMUM -
SOMUM -

4 réponses
Excel:récupérer le contenu d'une cellule en fonction d'une autre
tinky31 -
leplot -

1 réponse
Excel : colorer une cellule sous condition d'une autre ?
KAKEPATHEL -
Pascal -

15 réponses
Live tiktok
Dialmari -
Tamara -

11 réponses