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
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
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
Modifié par flexi2202 (26 Jan 2022 - 12:28)
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)
