11525 sujets

JavaScript, DOM et API Web HTML5

bonsoir a tous

Je m'aperçois avec l'utilisation que mon panier manque d'une image qui devrait être envoyé dan le manier en javascript

De nouveau je me tourne vers vous pour vous demander de 'aide

j'ai effectue la correction , mais je doute que cela soit bon

voici donc ce que j'ai pour l'instant a chaque fois que j'ajoute un article dans mon panier

https://zupimages.net/up/22/06/n9jp.jpg
je souhaiterais donc sur chaque ligne ajouter l'image du produit qui pourrait s'agrandir lors d'un clic

Attention ce code ne viens pas de moi ...je suis trop nul pour ça

Dans mon code html pour chaque article j'ai ceci

<a style="cursor:pointer; margin-bottom: 5px;" data-nom="2546" data-prix="1" data-qte="1" data-checkbox="2546" class="btn btn-primary ajouter-panier" onclick="ouvreMaJolieAlert(event);">ajouter au panier</a>

donc on récupère bien le nom , le prix et la quantité du checkbox
Mais comment y ajouter l'image ?
j'ai essayé data-image ...

voici le code source
//on cree la variable MonPanier
var MonPanier = (function() {
	panier = [];
	
	//fonction 
	function Item(nom, prix, quantite) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
	}
 
 //la fonction qui sauve le panier 
	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
	}
 
 //la fonction qui lit le panier 
	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
	}
 
	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
	}
 
 //on cree la variable obj
	var obj = {};
 
 //on cree l objet ajouter_produit_dans_panier 
	obj.ajouter_produit_dans_panier = function(nom, prix, quantite) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					panier[item].quantite ++;
				}
				savepanier();
				return;
			}
		}
		var item = new Item(nom, prix, quantite);
		panier.push(item);
		savepanier();
	}
 
 //on cree le nom et la quandite 
	obj.setquantiteForItem = function(nom, quantite) {
		for(var i in panier) {
			if (panier[i].nom === nom) {
				panier[i].quantite = quantite;
				break;
			}
		}
	};
 
 //on cree l objet enlever_produit_de_panier
	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();
	}
 
 //on cree lobjet enleve tous les produits 
	obj.enlever_produit_de_panier_tous = function(nom) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				panier.splice(item, 1);
				break;
			}
		}
		savepanier();
	}
 
 //on cree l objet clear panier
	obj.clearpanier = function() {
		panier = [];
		savepanier();
	}
 
 //on cree l'objet qtotaluantite
	obj.totalquantite = function() {
		var totalquantite = 0;
		for(var item in panier) {
			totalquantite += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}
 
 //on cree l'objet total panier
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		return Number(totalpanier.toFixed(decimal));
	}
 
 //on cree l'objet pour lister le panier
	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;
})();
 
 //fonction qui transmet l'element a la var qte
function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
	//	let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    //	data_qte.removeAttribute("data-qte");
    //	data_qte.setAttribute("data-qte", ""+qte+"");
	//var qte = element.value;
	//var t = $(element);
	//var label = t.attr("aria-label");
	//let data_qte =  document.querySelector("[data-nom='"+ label +"']");
	//data_qte.removeAttribute("data-qte");
	//data_qte.setAttribute("data-qte", ""+qte+"");
 
}
 
 //on ajoute au panier
$('.ajouter-panier').click(function(event) {
	event.preventDefault(); 
	var nom_option = "";
	var prix_option = 0;
	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);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix, 1);
	afficherpanier();
});
 
$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});
 
$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});
 
function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 var countart=0;
    var countart2=0;
  var count=0;
	for(var i in panierArray) {
		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;'>" + 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>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
       console.log(panierArray[i].quantite );
       console.log(countart );
       console.log(countart2 );
	}



voici comment je pense le modifier

	//on cree la variable MonPanier
	var MonPanier = (function() {
	panier = [];
	function Item(nom, prix, quantite,imager) {
		//fonction 
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.imager = imager;
	}
 
 //fonction qui sauve le panier 
	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
	}
 
 //fonction qui lit le panier
	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
	}
 
	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
	}
 
 //on cree la variable objet
	var obj = {};
 
 //on cree ajouter_produit_dans_panier
	obj.ajouter_produit_dans_panier = function(nom, prix, quantite,imager) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					panier[item].quantite ++;
				}
				savepanier();
				return;
			}
		}
		var item = new Item(nom, prix, quantite,imager);
		panier.push(item);
		savepanier();
	}
 
 //on cree obj.setquantiteForItem
	obj.setquantiteForItem = function(nom, quantite) {
		for(var i in panier) {
			if (panier[i].nom === nom) {
				panier[i].quantite = quantite;
				break;
			}
		}
	};
 
 //on cree obj.enlever_produit_de_panier
	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();
	}
 
 //on cree obj.enlever_produit_de_panier_tous
	obj.enlever_produit_de_panier_tous = function(nom) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				panier.splice(item, 1);
				break;
			}
		}
		savepanier();
	}
 
 //on cree obj.clearpanier 
	obj.clearpanier = function() {
		panier = [];
		savepanier();
	}
 
 //on cree obj.totalquantite
	obj.totalquantite = function() {
		var totalquantite = 0;
		for(var item in panier) {
			totalquantite += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}
 
 //on cree obj.totalpanier
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		return Number(totalpanier.toFixed(decimal));
	}
 
 //on cree obj.listpanier 
	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;
})();
 
 //on trnasmet la valeur du checbox a qte
function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
	//	let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    //	data_qte.removeAttribute("data-qte");
    //	data_qte.setAttribute("data-qte", ""+qte+"");
	//var qte = element.value;
	//var t = $(element);
	//var label = t.attr("aria-label");
	//let data_qte =  document.querySelector("[data-nom='"+ label +"']");
	//data_qte.removeAttribute("data-qte");
	//data_qte.setAttribute("data-qte", ""+qte+"");
 
}
 
 //on ajoute l'article au panier
$('.ajouter-panier').click(function(event) {
	event.preventDefault(); 
	var nom_option = "";
	var prix_option = 0;
	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,imager, qte_option);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix,imager, 1);
	afficherpanier();
});
 
$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});
 
$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});
 
function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 var countart=0;
    var countart2=0;
  var count=0;
	for(var i in panierArray) {
		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;'>" + panierArray[i].nom + "</div>" 
		    + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].imager + "</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>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
       console.log(panierArray[i].quantite );
       console.log(countart );
       console.log(countart2 );
	}

Amicalement upload/1644445511-22488-ecran15.jpg
voila cela a fonctionne avec ce code

// Mon petit panier version 1.0
// Antoine,  https://www.1formatik.com
 

//Configuration

// Faut-il imposer un nombre de produits commandés minimum ?
// 0 pour désactiver les commandes par lot
// 1 pour activer la fonctionnalité de commande par lot
var Qte_Minimum = 1;

// Si la fonction est activé, quel est le nombre de produits minimum
var Qte_Minimum_Valeur = 6; 

// Livraison
// 0 pour désactiver un coût supplémentaire lié à la livraison
// 1 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un pourcentage du prix total
// 2 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe
// 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix
// Si vous activez l'option 3, pensez à supprimer la portion de code HTML correspondant aux modes de livraison
//var Livraison = 3;

// Si oprion 1, % du prix total total correspondant au prix de la livraison
//var Poucentage_Livraison = 25;

// Si option 2, forfait de la livraison en euro
//var Forfait_Livraison = 19;

// 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix
var Livraison = 3;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison_opposse = 0.25;
var Poucentage_Livraison = 0.75;
var Poucentage_Livraison_affichee = 25;
// Forfait de la livraison en euro
var Forfait_Livraison = 1;

// 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;

// Ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function() {
	panier = [];
	
	
	function Item(nom, prix, quantite,url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
			 console.log(url);
		}


	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
	//	console.log(setItem);
		console.log(JSON.stringify(panier));
		console.log(('MonPanier', JSON.stringify(panier)));
		//console.log(sessionStorage.setItem('MonPanier', JSON.stringify(panier)));
		
	}

	function loadpanier() {
		panier = JSON.parse(sessionStorage.getItem('MonPanier'));
	}
	
	if (sessionStorage.getItem("MonPanier") != null) {
		loadpanier();
	}

	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);
				}
				else 
				{
					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;
				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);
				break;
			}
		}
		savepanier();
	}

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

	obj.totalquantite = function() {
		var totalquantite = 0;
		for(var item in panier) {
			totalquantite += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}

	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		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);
	//	let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    //	data_qte.removeAttribute("data-qte");
    //	data_qte.setAttribute("data-qte", ""+qte+"");
	//var qte = element.value;
	//var t = $(element);
	//var label = t.attr("aria-label");
	//let data_qte =  document.querySelector("[data-nom='"+ label +"']");
	//data_qte.removeAttribute("data-qte");
	//data_qte.setAttribute("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() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 var countart=0;
    var countart2=0;
  var count=0;
	for(var i in panierArray) {
		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>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
       //console.log(panierArray[i].quantite );
       //console.log(countart );
       //console.log(countart2 );
	}
	$('.show-panier').html(output);
	if (Livraison == 3)
	{
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let nom_choix_livraison = x.dataset.nom;
				let prix_choix_livraison = x.value;
			//	let prix_et_livraison = MonPanier.totalpanier() + Number(prix_choix_livraison);
			//	$('.total-panier').html(prix_et_livraison.toFixed(decimal));
			//	document.getElementById('livraison-detail').innerHTML = "Livraison incluse (" + nom_choix_livraison + //") : " + prix_choix_livraison +" euros.";
				//break;
				let prix_et_livraison = (( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
document.getElementById('amount').value = prix_et_livraison ;

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

document.getElementById('livraison-detail').innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;visibility:hidden;'> (" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)</div>";

document.getElementById('livraison-detail_haut').innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> (" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)</div>";

document.getElementById('remise_haut').innerHTML = (MonPanier.totalpanier() * Poucentage_Livraison_opposse).toFixed(2)

document.getElementById('remise').innerHTML =(MonPanier.totalpanier()*Poucentage_Livraison_opposse).toFixed(2) ;

document.getElementById('nouveau_prix').innerHTML =(MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse)).toFixed(2);

document.getElementById('nouveau_prix_haut').innerHTML =(MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse)).toFixed(2) ;

document.getElementById('frais_fixe').innerHTML =Forfait_Livraison ;

document.getElementById('frais_fixe_haut').innerHTML =Forfait_Livraison ;

document.getElementById('nouveau_prix_total_haut').innerHTML =((( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison )).toFixed(2) ;

document.getElementById('nouveau_prix_total_modal').innerHTML =((( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison )).toFixed(2) ;

document.getElementById("prix_depart_haut").innerHTML  = MonPanier.totalpanier(); 

document.getElementById("prix_depart").innerHTML  = MonPanier.totalpanier(); 

//document.getElementById("countart_bas").innerHTML = countart;
//document.getElementById("countart_haut").innerHTML = countart;

break;
			}
		}
	}
	if (Livraison == 1)
	{
		$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(decimal));
		document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
	}
	if (Livraison == 2)
	{
		$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison).toFixed(decimal));
		document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Forfait_Livraison +" euros.";
	}
	if (Livraison == 0)
	{
		$('.total-panier').html(((MonPanier.totalpanier())).toFixed(decimal));
	}
	$('.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();
}

$('.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();