11480 sujets

JavaScript, DOM et API Web HTML5

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();
}

Modifié par flexi2202 (26 Jan 2022 - 12:28)
Modérateur
Bonjour,

Ça a l'air de marcher sur mon iphone.

Il doit y avoir autre chose ailleurs (à moins que tu aies réglé le problème depuis que tu as posé la question).

Amicalement,
bonjour

Merci pour la réponse

Cela est impossible que cela puisse fonctionner chez toi
voici l 'explication

lorsque un client clic sur le selected
il a d'abord un premier passage dans la boucle ajouter au panier qui prends la valeur de data-qte

puis il choisit une quantité et a ce moment après son choix le nombre d article est bon
sur mobile si tu choisis une quandite sans rien faire d autre tu verras qu en haut que le panier est reste a 0 ou a 1
tu dois recliquer une deuxième fois sur le select pour que la quantité devienne bonne

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

Mais j'ai fini par abandonner ce projet et donc l utilisateur choisi une quantité et ensuite clic sur le bouton ajouter au panier
Modérateur
Bonjour,

Je ne vois pas trop pourquoi ce serait différent sur mobile par rapport à un ordinateur de bureau pour cette fonctionnalité-là. Mais je n'ai pas cherché à savoir aussi ! Smiley cligne

Amicalement,
bonjour
Merci pour l'aide
apparemment et je ne sais pas pourquoi sur mobile le select n'est pas pris en compte
fais le test avec ce lien
https://phil.pecheperle.be/panier/index2.php

sur ton pc tu verras que tout ce passe bien

Par contre a présent essayes le sur ton mobile et surveilles bien la quantité dans le panier volant
lorsque tu choisi un article la pop up s 'ouvre bien
tu clic sur ok et le panier reste a 0
a présent reclique ...sachets dans le panier du même article et la quantité cette fois dans le panier volant est bonne

Amicalement
Modérateur
Bonjour,

Dans https://phil.pecheperle.be/panier/index2.php, l'encart qui est en haut de l'écran est mis à jour dès qu'on quitte le select avec firefox (sur mac OS). Si je teste avec un iphone mais aussi avec chrome sous mac os, l'encart du haut n'est pas mis à jour immédiatement (ils ne le sont en effet que si on reclique sur le select). Ça ne me semble donc pas être une question de mobile.

Il faudrait vérifier dans quel ordre s'exécutent les fonctions qui mettent à jour le panier (en mettant des console.log() dans les fonctions impliquées). Il pourrait y avoir des différences d'un navigateur à l'autre (par exemple si ça dépend d'évènements qui ne sont pas tous générés dans le même ordre selon les navigateurs). C'est juste une supposition à ce stade.

Il faudrait vérifier aussi si sur ton pc, tu as la même chose avec firefox et chrome ou bien si tu vois une différence comme celle qu'il me semble qu'il y a sur Mac.

EDIT: avec Safari sur mac, ça fait pareil qu'avec Chrome ou Safari sur iphone. Ce n'est pas une surprise, c'est souvent le cas.

Amicalement,
Modifié par parsimonhi (30 Jan 2022 - 01:51)
Bonjour
Merci pour la reponse et les tests
oui tu as raison et cela je l'ai testé
d'abord on clic pour faire la sélection
a ce moment précis c'est la fonction qui est exécuter
$('.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();
});

ensuite lors de la sélection on remplace la variable qte par l élément du select
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+"");


donc des que l'on clic sur le select l encart en haut prends la valeur par défaut
et affiche déjà quelque chose qui n'est pas encore dans le panier
puis on sélectionne l 'article
a ce moment la valeur par défaut est remplacée par celle du select

sauf que sur mon mobile cette valeur de select ne remplace pas directement la valeur
Mais a besoin d'un clic supplémentaire ...
Modifié par flexi2202 (30 Jan 2022 - 09:18)
Bonjour
Merci pour ton aide
oui j'ai essaye avec plusieurs navigateurs sur mon pc le résultat est toujours pareil
et j'ai aussi essaye avec plusieurs navigateurs sur mon mobile en vidant bien entendu les caches a chaque fois

Mais le résultat est pareil

Amicalement