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 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 se comporte comme cela devrait l'etre
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
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 : Tout sélectionner
<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" >
<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
Code : Tout sélectionner
$('.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 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 : Tout sélectionner
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();
}