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
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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <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>
lors du clic dans le select cette fonction est appelée et donc utilise le data-qte
a ce moment la console m affiche 1
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 $('.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(); });
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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 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(); }
Partager