Aide pour corriger une fonction
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
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
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();
}
A voir également:
- Aide pour corriger une fonction
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Fonction filtre excel n'existe pas - Forum Excel
7 réponses
Bonjour,
Pour actualiser le data-attribute dynamiquement dans le DOM il ne faut pas utiliser le .data() mais plutôt la forme
Pour actualiser le data-attribute dynamiquement dans le DOM il ne faut pas utiliser le .data() mais plutôt la forme
$(element).attr('data-qte', '10');
Bonjour Jordane
Merci pour la réponse
Même si je réalise des efforts en javascripts
je ne vois pas trop bien la modification a réaliser ...
je sais que pour toi tu vois cela même sans y faire attention
Merci pour la réponse
Même si je réalise des efforts en javascripts
je ne vois pas trop bien la modification a réaliser ...
je sais que pour toi tu vois cela même sans y faire attention
Je viens de relire ton code... je vois que tu as triffouillé un truc avec
essaye donc juste
NB: pense bien à vider le cache de ton navigateur après avoir modifié ton code js..
let data_qte = document.querySelector("[data-nom='"+ label +"']");
data_qte.removeAttribute("data-qte");
data_qte.setAttribute("data-qte", ""+qte+"");
essaye donc juste
$("[data-nom='"+ label +"']").attr('data-qte', qte);
NB: pense bien à vider le cache de ton navigateur après avoir modifié ton code js..
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
voila
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Comment créer un panier en JavaScript, jQuery et PHP">
<meta name="author" content="Antoine | 1FORMATIK.com">
<title>Comment créer un panier en JavaScript, jQuery et PHP</title>
<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<style>
/*code origine*/
h4 {
margin-top:20px;
}
h4:after
{
content:' ';
display:block;
border:1px solid black;
}
/* debut pour faire disparaitre panier */
#A {
position: fixed;
top: 0;
position: sticky;
top: 0;
z-index: 1;
width: 100%;
/* margin-bottom: 60px; */
float: right;
max-width: 400px;
}
#B {
color: white;
}
.visiblediv:first-of-type {
margin-top: calc(20vh + 1em);
}
.visiblediv {}
/* fin pour faire disparaitre panier */
/*pour les frais de transport*/
.desc {
display: none;
}
.desc.selected {
display: block;
}
label {
display: block;
}
::-webkit-details-marker {
display: none;
}
.row {
--bs-gutter-x: 1.0rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
}
.text-end {
text-align: center !important;
}
p {
margin-top: 0;
margin-bottom: 0;
}
.centrer_titre_texte {
text-align: center;
background-color: #fff;
}
/* debut ecrire sur image */
.overlay {
display: none;
color: #07ff50;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 700;
font-style: italic;
}
.product .overlay {
display: flex;
}
/* fin ecrire sur image */
.h2,
h2 {
font-size: 1rem;
}
/* .header{
position: sticky;
top: 0;
z-index: 1;
width: 100%;
/* margin-bottom: 60px; */
float: right;
max-width: 400px;
}
/*acccordepn*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: "Inter", sans-serif;
padding: 20px;
}
.question {
color: #555;
padding: 15px;
font-weight: 700;
font-size: 16px;
border: 1px solid #ccc;
background: #efefef;
}
.question:hover {
cursor: pointer;
}
.answer {
color: #777;
padding: 15px;
font-weight: 400;
font-size: 13px;
border: 1px solid #ccc;
border-top: none;
}
/*donner meme hauteur aux images */
img,
svg {
height: 143.5px;
}
/*pour afficher l alerte sur les images */
button.articleBtn {
border: 0;
background: none;
text-decoration: underline;
cursor: pointer;
}
.maJolieAlert {
position: absolute;
z-index: 10;
left: 10%;
background-color: #8695b7;
color: #090908;
height: 150px;
width: 200px;
font-size: 20px;
}
.maJolieAlert:before {
content: "";
position: fixed;
z-index: -10;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #0007;
}
.maJolieAlert>div {
border: 0.25em solid black;
border-radius: 0.25em;
padding: 0.25em;
background: #fff;
}
</style>
</head>
<body style="background-color:#cec1c1;" onLoad="document.getElementById('attente').style.display='none'">
<!-- debut container global-->
<div class="container" style="background-color:#87CEEB;padding-left: 5px;padding-right: 5px; ">
<!-- debut du panier-->
<div id="A">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;margin-top:15px;border-left: 1rem solid;border-top: 1rem solid;border-right: 1rem solid;">Prix net <i id="prix_depart_haut"></i> euros </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Votre remise de 25 % <i id="remise_haut"></i> euros </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix apres remise <i id="nouveau_prix_haut"></i> euros </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;"> <i id="livraison-detail_haut"></i> </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">frais fixe <i id="frais-fixe_haut"></i> euros </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:20px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix total <i id="nouveau_prix_total_haut"></i> euros </div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="padding-left: 5px;padding-right: 5px;background-color: beige;display: block;margin-left: auto;margin-bottom:15px;border-left: 1rem solid;border-right: 1rem solid;border-bottom: 1rem solid;"> Nombre de produit(s) dans le panier : <i id="countart_haut"></i> <a class="example-image-link" href="https://phil.pecheperle.be/test9.php#ancre" title="monsite">voir panier</a>
<i id="total_qte_haut"></i>
</div>
</div>
</div>
</div>
<!-- fin du panier-->
<!-- debut du du code sous le panier -->
<div class="visiblediv">
<!-- debut image entete--><img src="https://phil.pecheperle.be/image/top_image_perle-a-la-perle.jpg" alt="baniere pour la pêche à la perle" style="margin-left:auto;margin-right:auto;margin-top:-320px;height:212px;width:100%;">
<!-- id attende chargement page -->
<div id="attente">
<p style="text-align: center;font-size: 24px;">Veuillez patienter svp la page est en cours de chargement ne touchez a rien ...</p>
</div>
<!-- debut container article-->
<div class="container " style ="padding-left: 5px;padding-right: 5px;">
<!-- debut accordeon article
<div class="col-md-12 text-end"> -->
<div id="faq_slide">
<div class="question">Perles de 2 mmm</div>
<div class="answer" style ="padding-left: 5px;padding-right: 5px; padding-top:15px;padding-bottom:15px;">
<!-- debut perle-->
<div class="card-deck row">
<!-- perle 2001-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2001</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de 50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
<!-- perle 2002-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2002</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2002" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" data-nom="2002" data-prix="1.00" data-qte="1" data-checkbox="2002" >
<option selected value="0">0 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2002" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
<!-- perle 2003-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2003</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2003.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2003.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2003" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" data-nom="2003" data-prix="1.00" data-qte="1" data-checkbox="2003" >
<option selected value="0">0 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2003" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
<!-- perle 2005-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2005</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2005.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2005.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2005" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" data-nom="2005" data-prix="1.00" data-qte="1" data-checkbox="2005" >
<option selected value="0">0 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2005" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
<!-- perle 2006-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2006</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2006.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2006.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2006" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" data-nom="2006" data-prix="1.00" data-qte="1" data-checkbox="2006" >
<option selected value="0">0 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2006" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
<!-- perle 2007-->
<div class="col-xl-2 col-lg-4 col-md-6 col-sm-6 col-xs-12 " style="margin-bottom: 15px;padding-left: 5px;padding-right: 5px;">
<div class="card">
<h3 class="card-title centrer_titre_texte">2007</h3>
<div class="popupgallery">
<div class="position-relative product">
<a class="example-image-link" href="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2007.JPG" data-lightbox="example-set" data-title="Cliquez n'importe où en dehors de l'image ou le X à droite pour fermer.">
<div class="overlay w-100 h-100 position-absolute justify-content-center">
<p class="align-self-center" style="text-align: center;">clic pour agrandir</p>
</div>
<img class="example-image" src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2007.JPG" alt="" width="100%" />
</a>
</div>
</div>
<div class="card-body" style=" padding-top: 1rem; padding-right: 0.25rem; padding-bottom: 1rem; padding-left: 0.25rem;">
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 0px;padding-left: 0;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2007" onchange="changeQte(this);" style="cursor:pointer;padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem;" data-nom="2007" data-prix="1.00" data-qte="1" data-checkbox="2007" >
<option selected value="0">0 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>
<option value="6">6 sachets dans le panier</option>
<option value="7">7 sachets dans le panier</option>
<option value="8">8 sachets dans le panier</option>
<option value="9">9 sachets dans le panier</option>
<option value="10">10 sachets dans le panier</option>
</select>
</div>
<div class="row mt-4">
<div class="form-check">
<!--<input class="form-check-input 2007" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>-->
<!--<label class="form-check-label" for="case_01" style ="font-size: 20px;background-color: #ffe300;color: red;font-weight: bold;"> remise de-50% </label>-->
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
</div>
</div>
</div>
</div><!-- fin rangee 1-->
<!-- fin rangee 4-->
</div>
</div>
</div><!-- fin accordeon genral-->
</div><!-- fin du container article-->
</div><!-- fin de visible-->
<div id="ancre" style="margin-top: 00px;"></div>
<!-- debut container entete-->
<!-- debut container bon de commande -->
<div class="container">
<div class="row">
<div class="col-md-4" style="background: #346780;display: block;margin-left: auto;margin-right: auto;margin-top: 15px;">
<h1 style="text-align: center;">Votre commande</h1> </div>
</div>
</div>
<!-- debut titre bon de commande -->
<div class="container"> <a class="btn btn-primary text-white" href="https://phil.pecheperle.be/test9.php#" role="button" style="color: #000000; font-weight: bold; font-size: 20px;margin-top: 15px;margin-bottom: 15px;">Retour haut page </a> </div>
<!-- debut titre ristourne accordee -->
<div class="container" style ="padding-right:5px;padding-left:5px;">
<!-- <div class="row"><div id="qte_minimum_report"></div> </div>-->
<div class="row">
<div class="col centrer_titre_texte"> Supprimer la ligne </div>
<div class="col centrer_titre_texte"> Article </div>
<div class="col centrer_titre_texte"> Prix unitaire </div>
<div class="col centrer_titre_texte"> Nombre sachet(s) </div>
<div class="col centrer_titre_texte"> Total </div>
</div>
<div class="container show-panier mx-auto" style=" width:100% ;margin-right:5px;margin-left:5px;padding-right: 5px;padding-left: 5px;" id="macommande" style="border-style: ridge; border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;"></div>
<br> </div>
<!-- frais fixe -->
<div class="row">
<div class="col-xl-7 col-lg-8 col-md-12 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;">
<span style="font-size:20px;">frais fixe</span> <i id="frais-fixe" style="font-size:20px;font-weight: bold;"></i> <span style="font-size:20px;font-weight: bold;">euros</span> </div>
</div>
<!-- dtotla panier vider panier , nombre articles -->
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
</div>
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 " style="display: block;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;">
<div class="text-end">
<button class="clear-panier btn btn-danger">Vider le panier</button>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 mt-3" style="padding-left: 5px;padding-right: 5px;background-color: beige;display: block;margin-left: auto;margin-bottom:15px;">
Nombre de produit(s) dans le panier : <i id="countart_bas"></i>
</div>
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:20px;display: block;margin-left: auto;margin-right: auto;margin-bottom: auto;margin-top: auto;">
<div style="font-size: 20px;">Prix total: <b><span class="total-panier" id="prix_total" ></span> euros</b></div>
</div>
</div>
</div>
<div id="B"></div>
<!-- debut coordonnees mondial relay -->
<!-- peux servir pour les options de livraisons -->
<!--
<div id="ref-fr" class="desc">
languageCode FR
</div>-->
</div>
<!-- conainer aveertissement avant paiement -->
<!-- script paiment paypal -->
<!-- fin accordeon answer -->
<!-- fin accordeon paiement -->
<!-- pour le onclick des articles
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> -->
<script src="panier.js"></script>
<!-- pour envoyer les infos vers mail.php -->
<!-- pour le menu des perles -->
<script type="text/javascript">
$("#faq_slide .answer").not(":first").hide();
$("#faq_slide .question").click(function(){
if($(this).next(".answer").is(":visible")) {
$(this).next(".answer").slideUp(300);
} else {
$(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
}
});
</script>
<!-- pour afficher modial relay quand on choisi mode envois mondial relay -->
<script language="javascript">
$(document).ready(function(){
$("div.desc").hide();
$("input[name$='choix_livraison']").click(function(){
var languageCode = $(this).data('lang');
$("div.desc").hide();
$("#ref-" + languageCode).show();
});
});
</script>
<!-- pour le panier volant -->
<script type="text/javascript">
function isVisible(e) {
let WH = $(window).height(), // Viewport height
WS = $(window).scrollTop(), // Scroll top
EH = $(e).height(), // Element height
EOT = $(e).offset().top; // Element offset top
return(EOT < (WH + WS - EH));
}
$(window).scroll(function(){
if(isVisible($('#B'))) {
$('#A').css("display", "none");
} else {
$('#A').css("display", "block");
}
});
</script>
<!--
pour le onclick des articles
<script type="text/javascript">
function fermeMaJolieAlert(event) {
event.target.parentNode.parentNode.remove();
}
function ouvreMaJolieAlert(event) {
let m;
m = "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);
}
</script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</div>
</body>
</html>
attends...... tu veux modifier le data-qte du SELECT sur lequel tu changes la valeur ?
pourquoi passes tu par la récupération du "nom" dans le aria .. pour ensuite cibler le select qui dispose du data-nom correspondant .... alors que... ben.. tu es déjà sur l'élément voulu ? si tu as plus alambiqué que ça fais moi signe :-)
ou alors.. expliques moi la raison si il y en a une ...
par ce que sinon.. il suffirait de faire
pourquoi passes tu par la récupération du "nom" dans le aria .. pour ensuite cibler le select qui dispose du data-nom correspondant .... alors que... ben.. tu es déjà sur l'élément voulu ? si tu as plus alambiqué que ça fais moi signe :-)
ou alors.. expliques moi la raison si il y en a une ...
par ce que sinon.. il suffirait de faire
function changeQte(element){
//on traite la variable qte
var qte = element.value;
//juste pour le debug
var old_dataqte = element.getAttribute("data-qte");
console.log('Valeur avant modif : ' , old_dataqte );
element.setAttribute("data-qte", ""+qte+"");
//juste pour le debug
var new_dataqte = element.getAttribute("data-qte");
console.log('Valeur après modif : ' , new_dataqte );
//on affiche le pop up
let m = "\ Le panier compte désormais ";
m += "<font color='red'><strong>";
m += qte;
m += "</strong></font>";
m += " sachet(s) de l'article \'";
m += element.getAttribute("data-nom");
//m += "\" a bien été ajouté au panier";
let e = document.createElement('div');
e.classList.add("maJolieAlert");
let s = "";
s += '<div><p>' + m + '</p>';
s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
e.innerHTML = s;
insertAfter(e, element);
}
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
Merci pour le code
en effet lorsque je clic dans le select
la valeur qui est prise compte est celle du data-qte qui est récupérée par le click avec cette fonction
a l'intérieur de celle-ci
il se passe ceci
donc a ce moment avant que la fonction changeQte puisse s exécuter car je n'ai pas encore choisi de quantité
la var qte_option prends la valeur 0 ou celle qui est dans le code html
et c 'est donc cette partie qui pose soucis
car le panier affiche 0 ou la valeur du data_qte du code html sur mon mobile et sur le pc aussi
puis je choisi une quantité dans le select
a ce moment la fonction changeQte est exécutée
et sur mon pc le nombre d article s affiche correctement
Mais sur le mobile cela reste a 0 ou la valeur du data_qte du code html
je viens de tester ton code
la console affiche ceci
0
Valeur avant modif : 1
Valeur après modif : 9
9
a tout hasard peux tu tester sur ton telephone
https://phil.pecheperle.be/panier/index2.php
si tu as le même phénomène
en effet lorsque je clic dans le select
la valeur qui est prise compte est celle du data-qte qui est récupérée par le click avec cette fonction
$('.ajouter-panier').click(function(event)
a l'intérieur de celle-ci
il se passe ceci
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();
donc a ce moment avant que la fonction changeQte puisse s exécuter car je n'ai pas encore choisi de quantité
la var qte_option prends la valeur 0 ou celle qui est dans le code html
et c 'est donc cette partie qui pose soucis
car le panier affiche 0 ou la valeur du data_qte du code html sur mon mobile et sur le pc aussi
puis je choisi une quantité dans le select
a ce moment la fonction changeQte est exécutée
et sur mon pc le nombre d article s affiche correctement
Mais sur le mobile cela reste a 0 ou la valeur du data_qte du code html
je viens de tester ton code
la console affiche ceci
0
Valeur avant modif : 1
Valeur après modif : 9
9
a tout hasard peux tu tester sur ton telephone
https://phil.pecheperle.be/panier/index2.php
si tu as le même phénomène