Changer le comportement d'une fonction
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
Code:
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> |
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
Code:
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();
}); |
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
Code:
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();
} |
