Hello everyone
I’ve been struggling with my cart in javascript for days again
I just need a detail for the finalization
I am facing a small problem
My shopping cart in javascript works fine on pc
When I click in the select the item number changes to 1 and when I choose a quantity the data-qty takes the value of the value element so it behaves as it should
this is correct
but on my smartphone it does not work properly
When I click in the select the number of article goes to 1
When I choose a quantity the data-qte does NOT take the value of the element value
so I would like that when I click in the select to choose a quantity that it does not indicate 1 but takes the value of the value element
here is a link to an example
https://phil.pecheperle.be/panier/index1.php
So I searched my code to find out where and how it happened.
so I have the html part which allows to select the 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" >
<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>
what makes me miserable is this data-qte=“1” that I put at data-qte=“0” but that hasn’t changed anything
when clicking in the select this function is called and therefore uses the 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 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();
});
at this time the console shows me 1
I would like it to be the value element that is taken into account and therefore displays nothing since I haven’t made a choice yet
then I choose the quantity with the select value
at this time on my pc the data-qte value takes the value of the element.value
However on my smartphone it does not happen
and the code is as follows
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();
}