Aide pour corriger une fonction

flexi2202 -

bonjour a tous

cela fait de nouveau des jours que je me bats avec mon panier en javascript
il me manque juste un détail pour la finalisation
je suis confronté a un petit soucis

Mon panier en javascript qui fonctionne très bien sur pc

Lorsque je clic dans le select le nombre d'article passe a 1 et lorsque je choisi une quantité le data-qte prends la valeur de l élément value

donc cela est correct

mais sur mon smartphone cela ne fonctionne pas correctement

Lorsque je clic dans le select le nombre d'article passe a 1 et lorsque je choisi une quantité le data-qte NE prends PAS la valeur de l élément value

je souhaiterais donc que lorsque je clic dans le select pour choisir une quantité que cela n'indique pas 1 mais prenne la valeur de l'élément value

voici un lien vers un exemple

https://phil.pecheperle.be/panier/index1.php

j'ai donc fouiller mon code pour savoir ou et comment cela se passait

j'ai donc la partie html qui permet de sélectionner le select

<select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1"   data-checkbox="2001"  style="padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem; ">
	              <option selected value="0">0 sachet dans le panier </option>
				  <option value="1"> sachet dans le panier</option>
	              <option value="1">1 sachet dans le panier</option>
			<option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	            	            </select>

ce qui me fait des misères c'est ce data-qte="1" que j'ai mis a data-qte="0" mais cela n a rien change

lors du clic dans le select cette fonction est appelée et donc utilise le data-qte

$('.ajouter-panier').click(function(event) {
	event.preventDefault(); 

//on mets des variables a 0
	var nom_option = "";
	var prix_option = 0;
	var option_checkbox = $(this).data('checkbox');

//on regarde si le checkbox est coche
	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'));
				}
			}
	}  

//on regarde si le select est choisi
	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);

//on test la date-qte partie qui m intéresse
	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();
});

a ce moment la console m affiche 1
je souhaiterais que ca soit l élément value qui soit pris en compte et donc n affiche rien puisque je n'ai aps encore fait de choix

ensuite je choisi la quantité avec le select value
a ce moment sur mon pc la valeur data-qte prends bien la valeur de l'element.value

par contre sur mon smartphone cela ne se passe pas

et le code est le suivant

function changeQte(element){

//on traite la variable 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 affiche le pop up
   let m;
	 m = "\ Le panier compte désormais ";
	 m += "<font color='red'><strong>";
	  m += event.target.getAttribute("data-qte");
	  m += "</strong></font>";
  m += " sachet(s) de l'article \'";
  m += event.target.getAttribute("data-nom");
   //m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}
   
	function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}

Afficher la suite

7 réponses

Réponse 1 / 7
jordane45 Modérateur
Bonjour,

Pour actualiser le data-attribute dynamiquement dans le DOM il ne faut pas utiliser le .data() mais plutôt la forme
```
$(element).attr('data-qte', '10');
 
```
0
Réponse 2 / 7
flexi2202 Auteur
Bonjour Jordane
Merci pour la réponse

Même si je réalise des efforts en javascripts
je ne vois pas trop bien la modification a réaliser ...

je sais que pour toi tu vois cela même sans y faire attention
0
1. jordane45 Modérateur
  
  Je viens de relire ton code... je vois que tu as triffouillé un truc avec
  let data_qte = document.querySelector("[data-nom='"+ label +"']"); data_qte.removeAttribute("data-qte"); data_qte.setAttribute("data-qte", ""+qte+"");
  
  essaye donc juste
  $("[data-nom='"+ label +"']").attr('data-qte', qte);
  
  NB: pense bien à vider le cache de ton navigateur après avoir modifié ton code js..
  
  0
2. flexi2202 Auteur
  
  @jordane45Merci jordane pour la correction
  après avoir vider le cache du mobile
  cela ne change rien
  
  0
Réponse 3 / 7
flexi2202 Auteur
cela ne serait il pas a modifier dans le code html?
0
Réponse 4 / 7
flexi2202 Auteur
Tout ce que j ai tenté jusqu' a présent n'a pas fonctionner
0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 7
flexi2202 Auteur
bonjour
petit up svp
0
1. jordane45 Modérateur
  
  Montre nous le code source généré de la page
  ( code obtenu via le navigateur internet en faisant CTRL + u lorsque tu es sur la page )
  
  0

flexi2202 Auteur

voila

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="Comment créer un panier en JavaScript, jQuery et PHP">
		<meta name="author" content="Antoine | 1FORMATIK.com">
		<title>Comment créer un panier en JavaScript, jQuery et PHP</title>
		<!--  
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
		<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
		-->
		
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css">
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
		
		<style>
		
		/*code origine*/
		h4 {
			margin-top:20px;
		}
		h4:after
		{
			content:' ';
			display:block;
			border:1px solid black;
		}
		
		
		/* debut pour faire disparaitre panier */
	
	#A {
		position: fixed;
		top: 0;
		position: sticky;
		top: 0;
		z-index: 1;
		width: 100%;
		/* margin-bottom: 60px; */
		float: right;
		max-width: 400px;
	}
	
	#B {
		color: white;
	}
	
	.visiblediv:first-of-type {
		margin-top: calc(20vh + 1em);
	}
	
	.visiblediv {}
	/* fin pour faire disparaitre panier */
	/*pour les frais de transport*/
	
	.desc {
		display: none;
	}
	
	.desc.selected {
		display: block;
	}
	
	label {
		display: block;
	}
	
	::-webkit-details-marker {
		display: none;
	}
	
	.row {
		--bs-gutter-x: 1.0rem;
		--bs-gutter-y: 0;
		display: flex;
		flex-wrap: wrap;
		margin-top: calc(-1 * var(--bs-gutter-y));
		margin-right: calc(-.5 * var(--bs-gutter-x));
		margin-left: calc(-.5 * var(--bs-gutter-x));
	}
	
	.text-end {
		text-align: center !important;
	}
	
	p {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.centrer_titre_texte {
		text-align: center;
		background-color: #fff;
	}
	/* debut ecrire sur image */
	
	.overlay {
		display: none;
		color: #07ff50;
		font-family: "Roboto", sans-serif;
		font-size: 20px;
		font-weight: 700;
		font-style: italic;
	}
	
	.product .overlay {
		display: flex;
	}
	/* fin ecrire sur image */
	
	.h2,
	h2 {
		font-size: 1rem;
	}
	/*     .header{
   position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    /* margin-bottom: 60px; */
	
	float: right;
	max-width: 400px;
}

/*acccordepn*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
	font-family: "Inter", sans-serif;
	padding: 20px;
}
.question {
	color: #555;
	padding: 15px;
	font-weight: 700;
	font-size: 16px;
	border: 1px solid #ccc;
	background: #efefef;
}
.question:hover {
	cursor: pointer;
}
.answer {
	color: #777;
	padding: 15px;
	font-weight: 400;
	font-size: 13px;
	border: 1px solid #ccc;
	border-top: none;
}

/*donner meme hauteur aux images */
img,
svg {
	height: 143.5px;
}
/*pour afficher l alerte sur les images */
   button.articleBtn {
  border: 0;
  background: none;
  text-decoration: underline;
  cursor: pointer;
}

.maJolieAlert {
  position: absolute;
  z-index: 10;
  left: 10%;
    background-color: #8695b7;
 color: #090908;
height: 150px;
width: 200px;
font-size: 20px;
}

.maJolieAlert:before {
  content: "";
  position: fixed;
  z-index: -10;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #0007;
 
}

.maJolieAlert>div {
  border: 0.25em solid black;
  border-radius: 0.25em;
  padding: 0.25em;
  background: #fff;

}
		</style>
	</head>
	
<body style="background-color:#cec1c1;" onLoad="document.getElementById('attente').style.display='none'">
	<!-- debut container global-->
	<div class="container" style="background-color:#87CEEB;padding-left: 5px;padding-right: 5px; ">
	    
	    	<!-- debut du panier-->
		<div id="A">
			<div class="container">
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;margin-top:15px;border-left: 1rem solid;border-top: 1rem solid;border-right: 1rem solid;">Prix net <i id="prix_depart_haut"></i> euros </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Votre remise de 25 % <i id="remise_haut"></i> euros </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix apres remise <i id="nouveau_prix_haut"></i> euros </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;"> <i id="livraison-detail_haut"></i> </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">frais fixe <i id="frais-fixe_haut"></i> euros </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:20px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix total <i id="nouveau_prix_total_haut"></i> euros </div>
				</div>
				<div class="row">
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="padding-left: 5px;padding-right: 5px;background-color: beige;display: block;margin-left: auto;margin-bottom:15px;border-left: 1rem solid;border-right: 1rem solid;border-bottom: 1rem solid;"> Nombre de produit(s) dans le panier : <i id="countart_haut"></i> <a class="example-image-link" href="https://phil.pecheperle.be/test9.php#ancre" title="monsite">voir panier</a>
					<i id="total_qte_haut"></i>
					
					</div>
				</div>
			</div>
		</div>
		<!-- fin du panier-->
	    <!-- debut du du code sous le panier -->
		<div class="visiblediv">
		
			<!-- debut image entete--><img src="https://phil.pecheperle.be/image/top_image_perle-a-la-perle.jpg" alt="baniere pour la pêche à la perle" style="margin-left:auto;margin-right:auto;margin-top:-320px;height:212px;width:100%;">
			
				<!-- id attende chargement page -->
			<div id="attente">
				<p style="text-align: center;font-size: 24px;">Veuillez patienter svp la page est en cours de chargement ne touchez a rien ...</p>
			</div>
	    
	    
	    
<!-- debut container article-->
			<div class="container " style ="padding-left: 5px;padding-right: 5px;">
				<!-- debut accordeon article
					<div class="col-md-12 text-end"> 	-->									
				<div id="faq_slide">
					<div class="question">Perles de 2 mmm</div>
					<div class="answer" style ="padding-left: 5px;padding-right: 5px; padding-top:15px;padding-bottom:15px;">
						<!-- debut perle-->
						<div class="card-deck row">
							<!-- perle 2001-->
				<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2001</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2001" data-prix="1.00" data-qte="1"   data-checkbox="2001"  >
	              <option selected value="0">0 sachet dans le panier </option>
				  <option value="1"> sachet dans le panier</option>
	              <option value="1">1 sachet dans le panier</option><option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	          
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	              <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de 50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
	<!-- perle 2002-->
	
	<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2002</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2002" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2002" data-prix="1.00" data-qte="1" data-checkbox="2002"  >
	              <option selected value="0">0 sachet dans le panier </option>
	              <option value="1">1 sachet dans le panier</option><option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	             
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2002" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	              <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
		
		<!-- perle 2003-->
	
	<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2003</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2003.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2003.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2003" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2003" data-prix="1.00" data-qte="1" data-checkbox="2003"  >
	              <option selected value="0">0 sachet dans le panier </option>
	              <option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	        
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2003" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	                 <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
		<!-- perle 2005-->
	
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2005</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2005.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2005.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2005" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2005" data-prix="1.00" data-qte="1" data-checkbox="2005"  >
	              <option selected value="0">0 sachet dans le panier </option>
	              <option value="1">1 sachet dans le panier</option>
				  <option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	          
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2005" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	              <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
		
			<!-- perle 2006-->
	
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2006</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2006.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2006.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2006" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2006" data-prix="1.00" data-qte="1" data-checkbox="2006"  >
	              <option selected value="0">0 sachet dans le panier </option>
	              <option value="1">1 sachet dans le panier</option><option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	           
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2006" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	              <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
		
					<!-- perle 2007-->
	
	<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12  " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
	  <div class="card">
	    <h3 class="card-title centrer_titre_texte">2007</h3>
	    <div class="popupgallery">
	      <div class="position-relative product">
	        <a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2007.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
	          <div class="overlay w-100 h-100 position-absolute justify-content-center">
	            <p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
	          </div>
	          <img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2007.JPG" alt="" width="100%" />
	        </a>
	      </div>
	    </div>
	    <div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
	      <div class="row mt-12">
	        <div class="col-md-12">
	          <p class="card-text centrer_titre_texte">Perle de 2 mm</p>
	          <div class="centrer_titre_texte">
	            <p> 3 perles identiques</p>
	            <p> 1 euro</p>
	          </div>
	        </div>
	        <div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
	          <div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
	                    <select class="form-select btn btn-primary ajouter-panier" aria-label="2007" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem;  padding-right: 0rem;  padding-bottom: 0.375rem;  padding-left: 0rem;" data-nom="2007" data-prix="1.00" data-qte="1" data-checkbox="2007"  >
	              <option selected value="0">0 sachet dans le panier </option>
	              <option value="1">1 sachet dans le panier</option><option value="2">2 sachets dans le panier</option>
	              <option value="3">3 sachets dans le panier</option>
	              <option value="4">4 sachets dans le panier</option>
	              <option value="5">5 sachets dans le panier</option>
	              <option value="6">6 sachets dans le panier</option>
	              <option value="7">7 sachets dans le panier</option>
	              <option value="8">8 sachets dans le panier</option>
	              <option value="9">9 sachets dans le panier</option>
	              <option value="10">10 sachets dans le panier</option>
	          
	            </select>
				
	          </div>
	          <div class="row mt-4">
	            <div class="form-check">
	              <!--<input class="form-check-input 2007" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
	              <!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
	            </div>
	          </div>
	        </div>
	        <div class="col-md-12 text-end">
	          
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
	</div><!-- fin  rangee 1-->
	
						
						
						
							
				
		
	<!-- fin  rangee 4-->

						
						
					
						
						
					
						
						
								
					
								
		
						
							
					
						</div>
					</div>
				</div><!-- fin accordeon genral-->
			</div><!-- fin du container article-->
					</div><!-- fin de visible-->		
							

			<div id="ancre" style="margin-top: 00px;"></div>
		<!-- debut container entete-->
		<!-- debut container bon de commande -->
		
			<div class="container">
				<div class="row">
					<div class="col-md-4" style="background: #346780;display: block;margin-left: auto;margin-right: auto;margin-top: 15px;">
						<h1 style="text-align: center;">Votre commande</h1> </div>
				</div>
			</div>
		
		<!-- debut titre bon de commande -->
		<div class="container"> <a class="btn btn-primary text-white" href="https://phil.pecheperle.be/test9.php#" role="button" style="color: #000000; font-weight: bold; font-size: 20px;margin-top: 15px;margin-bottom: 15px;">Retour haut page </a> </div>
		<!-- debut titre ristourne accordee -->
		<div class="container" style ="padding-right:5px;padding-left:5px;">
					<!--	<div class="row"><div id="qte_minimum_report"></div> </div>-->
			<div class="row">
				<div class="col centrer_titre_texte"> Supprimer la ligne </div>
				<div class="col centrer_titre_texte"> Article </div>
				<div class="col centrer_titre_texte"> Prix unitaire </div>
				<div class="col centrer_titre_texte"> Nombre sachet(s) </div>
				<div class="col centrer_titre_texte"> Total </div>
			</div>
					<div class="container show-panier mx-auto" style=" width:100% ;margin-right:5px;margin-left:5px;padding-right: 5px;padding-left: 5px;" id="macommande" style="border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;"></div>
			<br> </div>
		
		
				
			<!-- frais fixe  -->
			<div class="row">
				<div class="col-xl-7 col-lg-8 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;">
				<span style="font-size:20px;">frais fixe</span> <i id="frais-fixe" style="font-size:20px;font-weight: bold;"></i> <span style="font-size:20px;font-weight: bold;">euros</span> </div>
			</div>
			
			<!-- dtotla panier vider panier , nombre articles   -->
			<div class="row">
				<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
				</div>
				<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 " style="display: block;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;">
					<div class="text-end">
						<button class="clear-panier btn btn-danger">Vider le panier</button>
					</div>
				</div>
				<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12  mt-3" style="padding-left: 5px;padding-right: 5px;background-color: beige;display: block;margin-left: auto;margin-bottom:15px;">
				Nombre de produit(s) dans le panier : <i id="countart_bas"></i>
				
				
				</div>
				<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:20px;display: block;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;">
				<div style="font-size: 20px;">Prix total: <b><span class="total-panier" id="prix_total" ></span> euros</b></div>
				</div>
			</div>
		</div>
		
		<div id="B"></div>
	
			
		<!-- debut coordonnees mondial relay   -->
	
			
			<!-- peux servir pour les options de livraisons  -->
			<!-- 
            <div id="ref-fr" class="desc">
               languageCode FR
            </div>-->
			</div>
				<!-- conainer aveertissement avant paiement   -->
			
		
	
		<!-- script paiment paypal  -->
	
		<!-- fin accordeon answer   -->
		<!-- fin accordeon paiement   -->
	
		
		

		




<!-- pour le onclick des articles  
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> -->

<script src="panier.js"></script>
<!-- pour envoyer les infos vers mail.php -->

	

<!-- pour le menu des perles -->
			<script type="text/javascript">
		$("#faq_slide .answer").not(":first").hide();
		$("#faq_slide .question").click(function(){
			if($(this).next(".answer").is(":visible")) {
				$(this).next(".answer").slideUp(300);
			} else {
				$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
			}
		});
		</script>
		
		<!-- pour afficher modial relay quand on choisi mode envois mondial relay  -->
		<script language="javascript">
		$(document).ready(function(){
			$("div.desc").hide();
			$("input[name$='choix_livraison']").click(function(){
				var languageCode = $(this).data('lang');
				$("div.desc").hide();
				$("#ref-" + languageCode).show();
			});
		});
		</script>

	<!-- pour le panier volant  -->
		<script type="text/javascript">
		function isVisible(e) {
			let WH = $(window).height(), // Viewport height
				WS = $(window).scrollTop(), // Scroll top
				EH = $(e).height(), // Element height
				EOT = $(e).offset().top; // Element offset top
			return(EOT < (WH + WS - EH));
		}
		$(window).scroll(function(){
			if(isVisible($('#B'))) {
				$('#A').css("display", "none");
			} else {
				$('#A').css("display", "block");
			}
		});
			</script>
<!--  
	pour le onclick des articles   
			 <script type="text/javascript">
	function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}

function ouvreMaJolieAlert(event) {
  let m;
  m = "L'article \"";
  m += event.target.getAttribute("data-nom");
  m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}
			 </script>-->







<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</div>

</body>
</html>

jordane45 Modérateur

attends...... tu veux modifier le data-qte du SELECT sur lequel tu changes la valeur ?
pourquoi passes tu par la récupération du "nom" dans le aria .. pour ensuite cibler le select qui dispose du data-nom correspondant .... alors que... ben.. tu es déjà sur l'élément voulu ? si tu as plus alambiqué que ça fais moi signe :-)
ou alors.. expliques moi la raison si il y en a une ...

par ce que sinon.. il suffirait de faire

function changeQte(element){

  //on traite la variable qte
	var qte = element.value;
	
  //juste pour le debug
  var old_dataqte = element.getAttribute("data-qte");	
  console.log('Valeur avant modif : ' , old_dataqte );

	element.setAttribute("data-qte", ""+qte+"");
	
  //juste pour le debug
  var new_dataqte = element.getAttribute("data-qte");	
  console.log('Valeur après modif : ' , new_dataqte );

  
//on affiche le pop up
  let  m = "\ Le panier compte désormais ";
    m += "<font color='red'><strong>";
    m += qte;
    m += "</strong></font>";
    m += " sachet(s) de l'article \'";
    m += element.getAttribute("data-nom");
    //m += "\" a bien été ajouté au panier";

  let e = document.createElement('div');
      e.classList.add("maJolieAlert");
  let s = "";
      s += '<div><p>' + m + '</p>';
      s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';

  e.innerHTML = s;
  insertAfter(e, element);
}

function insertAfter(newNode, existingNode) {
   existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

flexi2202 Auteur
@jordane45Merci pour le code
en effet lorsque je clic dans le select
la valeur qui est prise compte est celle du data-qte qui est récupérée par le click avec cette fonction
```
$('.ajouter-panier').click(function(event)
```
a l'intérieur de celle-ci
il se passe ceci
```
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();
```
donc a ce moment avant que la fonction changeQte puisse s exécuter car je n'ai pas encore choisi de quantité
la var qte_option prends la valeur 0 ou celle qui est dans le code html

et c 'est donc cette partie qui pose soucis
car le panier affiche 0 ou la valeur du data_qte du code html sur mon mobile et sur le pc aussi

puis je choisi une quantité dans le select
a ce moment la fonction changeQte est exécutée
et sur mon pc le nombre d article s affiche correctement

Mais sur le mobile cela reste a 0 ou la valeur du data_qte du code html

je viens de tester ton code
la console affiche ceci

0
Valeur avant modif : 1
Valeur après modif : 9
9

a tout hasard peux tu tester sur ton telephone

https://phil.pecheperle.be/panier/index2.php

si tu as le même phénomène
0
flexi2202 Auteur
@flexi2202complément d informations que je viens de remarquer sur le mobile
Lorsque je clic sur le select
cela affiche 0
lorsque je choisi une quantité cela affiche toujours 0
lorsque j appuie une deuxième fois sur le select cela affiche bien la bonne quantité
0
flexi2202 Auteur
@flexi2202cela ne serait il pas tout simplement un soucis avec le select ...
0

Réponse 7 / 7
flexi2202 Auteur
bien évidement j'ai juste garder le strict minimum de mon code qui fait plus de 15000 lignes
pour que cela puisse servir d exemple
0

Aide pour corriger une fonction

7 réponses

Discussions similaires

Newsletters