Petit soucis de débutant avec une condition
Résolu/Ferméflexi2202 Messages postés 3803 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 1 février 2025 - 20 août 2022 à 18:22
- Petit soucis de débutant avec une condition
- Excel cellule couleur si condition texte - Guide
- Logiciel de programmation pour débutant - Guide
- Comment imprimer une photo en petit ✓ - Forum Photo numérique
- Excel trier du plus grand au plus petit - Guide
- Petit 2 ✓ - Forum Bureautique
6 réponses
18 août 2022 à 22:20
Bonjour
Tu sembles déjà détenir la réponse...
Il faut que ton code JavaScript soit chargé après ton HTML et/ou ne s'exécute qu'une fois la page totalement chargée.
https://stackoverflow.com/questions/9899372/vanilla-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-whe
18 août 2022 à 23:36
Donc.. il semble que tu essaies de remplir un élément html ayant pour id "remise_10"
Quand on regarde ton code html .. tu n'as rien avec cet ID ...
Tu as confondu le contenu et l'id de l'élément
<p id="nouveau_prix_promo"></p>remise_10<br> <p id="message_remise_10"></p>prix normal<br>
Visiblement, le bon ID à utiliser dans ton JS c'est : nouveau_prix_promo
18 août 2022 à 23:48
Merci pour la réponse
pfffff je vais enlever el copier coller de mon pc ....
Merci pour ton aide et encore une fois quand on a la tête trop dans le code ...
Je souhaiterais quand même faire une petite remarque ...
Sans toi et yg_be je serais encore loin très loin
Mais grâce a vous deux a vos explications et a votre pédagogie cela va mieux
Lorsque je regarde du javascript je commence a comprendre
Alors que je me souviens il y a encore quelques mois je ne savais pas ce que c'était que console.log ou encore un var_dump pour php
j'ai appris tellement de choses ...
18 août 2022 à 22:36
bonsoir jordane
Merci pour la réponse et le lien
Pourtant c'est bien ce qui se passe mon appel a ma page panier.js se fait bien après le code en html
18 août 2022 à 22:59
N'ayant pas à disposition le code complet, encore une fois, impossible de savoir exactement comment tu le charges et comment tu l'utilises...
Modifié le 18 août 2022 à 23:14
voici le code du panier jordane
Mais je ne vois pas ou cela bloque puisque je ne suis pas dans une fonction
J'ai place ce code juste avant la fermeture de la condition globale pour le mode de livraison
// Mon petit panier version 1.0 // Antoine, https://www.1formatik.com //Configuration // Faut-il imposer un nombre de produits commandés minimum ? // 0 pour désactiver les commandes par lot // 1 pour activer la fonctionnalité de commande par lot var Qte_Minimum = 1; // Si la fonction est activé, quel est le nombre de produits minimum var Qte_Minimum_Valeur = 6; // Livraison // 0 pour désactiver un coût supplémentaire lié à la livraison // 1 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un pourcentage du prix total // 2 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe // 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix // Si vous activez l'option 3, pensez à supprimer la portion de code HTML correspondant aux modes de livraison //var Livraison = 3; // Si oprion 1, % du prix total total correspondant au prix de la livraison //var Poucentage_Livraison = 25; // Si option 2, forfait de la livraison en euro //var Forfait_Livraison = 19; // 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix //IMPORTANT LORSQUE JE CHOISIS 1 LES REMISES NE SONT PAS PRISES EN COMPTE //choisir 2 ou 3 var Livraison = 2; // % du prix total total correspondant au prix de la livraison var Poucentage_Livraison_opposse = 0.25; var Poucentage_Livraison = 0.75; var Poucentage_Livraison_affichee = 25; var prix_vide_modal = 0; var promotion_pourcentage = 90; var promotion_pourcentage_inverse = 10; //console.log(Poucentage_Livraison_affichee ); // Forfait de la livraison en euro //var Forfait_Livraison = 1; // Les messages concernant la fonctionnalité de commande par lot var txt_qte_minimum_bad = "<font color='red'>Attention les quantités ne sont pas corrects, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits minimum</font>"; var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correct</font>"; var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits"; // Comment affiche-t-on les prix du panier et du total // Pour rappel, les prix des produits sont à modifier via les attributs HTML data-prix dans le fichier index.php // 0 pour aficher aucune décimale : 19 euros // 2 pour afficher deux décimales : 19.00 euros var decimal = 2; // Ne pas modifier la suite sauf si vous désirez modifier le code var MonPanier = (function() { panier = []; function Item(nom, prix, quantite, url) { this.nom = nom; this.prix = prix; this.quantite = quantite; this.url = url; //console.log(url); } function savepanier() { sessionStorage.setItem('MonPanier', JSON.stringify(panier)); // console.log(setItem); // console.log(JSON.stringify(panier)); //console.log(('MonPanier', JSON.stringify(panier))); //console.log(sessionStorage.setItem('MonPanier', JSON.stringify(panier))); } function loadpanier() { panier = JSON.parse(sessionStorage.getItem('MonPanier')); } if (sessionStorage.getItem("MonPanier") != null) { loadpanier(); } var obj = {}; obj.ajouter_produit_dans_panier = function(nom, prix, quantite, url) { for (var item in panier) { if (panier[item].nom === nom) { if (quantite) { panier[item].quantite = Number(quantite); } else { panier[item].quantite++; } savepanier(); return; } } var item = new Item(nom, prix, quantite, url); //console.log(quantite); panier.push(item); savepanier(); } obj.setquantiteForItem = function(nom, quantite) { for (var i in panier) { if (panier[i].nom === nom) { panier[i].quantite = quantite; break; } } }; obj.enlever_produit_de_panier = function(nom) { for (var item in panier) { if (panier[item].nom === nom) { panier[item].quantite--; if (panier[item].quantite === 0) { panier.splice(item, 1); } break; } } savepanier(); } obj.enlever_produit_de_panier_tous = function(nom) { for (var item in panier) { if (panier[item].nom === nom) { panier.splice(item, 1); break; } } savepanier(); } obj.clearpanier = function() { panier = []; savepanier(); } obj.totalquantite = function() { var totalquantite = 0; for (var item in panier) { totalquantite += Number(panier[item].quantite); } return Number(totalquantite); } //prix total panier obj.totalpanier = function() { var totalpanier = 0; for (var item in panier) { totalpanier += panier[item].prix * panier[item].quantite; } return Number(totalpanier.toFixed(decimal)); } obj.listpanier = function() { var panierCopy = []; for (i in panier) { item = panier[i]; itemCopy = {}; for (p in item) { itemCopy[p] = item[p]; } itemCopy.total = Number(item.prix * item.quantite).toFixed(decimal); panierCopy.push(itemCopy) } return panierCopy; } return obj; })(); function changeQte(element) { var qte = element.value; var t = $(element); var label = t.attr("aria-label"); $("[data-nom='" + label + "']").attr('data-qte', qte); } $('.ajouter-panier').click(function(event) { event.preventDefault(); var nom_option = ""; var prix_option = 0; var url = $(this).data('url'); var option_checkbox = $(this).data('checkbox'); 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')); } } } 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); if ($(this).attr('data-qte')) { var qte_option = $(this).attr('data-qte'); MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url); } else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url); afficherpanier(); }); $('.clear-panier').click(function() { MonPanier.clearpanier(); afficherpanier(); }); $('.choix_livraison').click(function() { const cases = document.querySelectorAll('input[name="choix_livraison"]'); for (const x of cases) { if (x.checked) { afficherpanier(); } } }); //debut fonction panier function afficherpanier() { //on prepare les lignes qui vont ecevoirles articles var panierArray = MonPanier.listpanier(); var output = ""; var countart = 0; var countart2 = 0; var count = 0; for (var i in panierArray) { output += "<div class='row' style='border-style: ridge; border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>" + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>" + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='" + panierArray[i].url + "'data-lightbox='example-set'><img src=""" style='width:100px;height:100px;'></a>" + "</div>" + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + " euro</div>" + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>" + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>" + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>" + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" + "</div>"; count++; countart += panierArray[i].quantite; // somme des unités d'articles countart2 = countart //console.log(panierArray[i].quantite ); //console.log(countart ); //console.log(panierArray[i].quantite ); } $('.show-panier').html(output); //on commence le choix des livraisons //on se contentera du choix 3 si on applique une ristourne et du choix 2 sans ristourne //mode de livraison sans remise if (Livraison == 2) { //************************************************************************************* //on commence par récupérer des informations lorsque on clic sur un choix de livraison**** //on crée également des variables grâce au mode de livraison //**************************************************************************************** const cases = document.querySelectorAll('input[name="choix_livraison"]'); for (const x of cases) { //debut const x of cases if (x.checked) { //si une case est cochee on recupere 2 variables var nom_choix_livraison = x.dataset.nom; var prix_choix_livraison = x.value; //on definit le prix total et la livraison var prix_et_livraison = (((MonPanier.totalpanier()))) + Number(prix_choix_livraison); break; } } //on cree le total du panier $('.total-panier').html(prix_et_livraison.toFixed(decimal)); //pour afficher le detail de la livraison document.getElementById('livraison-detail').innerHTML = "(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)"; //different elements a afficher en html document.getElementById('nouveau_prix_total_haut').innerHTML = ((((MonPanier.totalpanier())))).toFixed(2); //on definit juste le total du panier let test = MonPanier.totalpanier(); //pour afficher sur le code php ces deux valeurs document.getElementById("prix_depart_haut").innerHTML = MonPanier.totalpanier(); document.getElementById("prix_depart").innerHTML = MonPanier.totalpanier(); //on recupere le id du bouton radio pour le code promo //grace a cette condition si on ne choisit pas de code promo alors les calucls se font normalement //debut controla bouton radio document.querySelectorAll("input").forEach(item => { item.addEventListener("change", () => { //console.log(item.id) if (item.id == "vert") { document.getElementById('amount').value = prix_et_livraison; if (test == 0) { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement.</span> </div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée"; document.getElementById('container').style.display = "none"; } else { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement.</span> </div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commandeazerty <br>Elle a bien été enregistrée"; document.getElementById('container').style.display = "block"; } } // fin de if item.id == "vert" }) //fin de item.addEventListener("change", () => }) //fin de document.querySelectorAll("input").forEach(item => //debut code promo en recuperant le nom //debut pour afficher le name via le input var form = document.getElementById("forms"); form.onclick = function(e) { e.preventDefault(); var name = document.getElementById("name").value; console.log(name); //********************************************************************************************************* //debut teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier*********** //********************************************************************************************************* if (name == 'azerty') { //on definit des variable pour afficher dans les documents getElementById let promo = ((((MonPanier.totalpanier()) * (promotion_pourcentage / 100)) + (Number(prix_choix_livraison)))); let code_promo = 10 let prix_promo_hors_transport = (MonPanier.totalpanier() * (promotion_pourcentage / 100)).toFixed(2); let prix_promo_avec_transport = ((MonPanier.totalpanier() * (promotion_pourcentage / 100)) + Number(prix_choix_livraison)).toFixed(2); //ici est defini le prix a afficher dans paypal document.getElementById('amount').value = ((MonPanier.totalpanier() * (promotion_pourcentage / 100)) + Number(prix_choix_livraison)).toFixed(2); //ici on envois sur index.php le prix total pour le comparer document.getElementById("nouveau_prix_promo").innerHTML = prix_et_livraison; //message que l'on va afficher avec le recapitilatif document.getElementById("print").innerHTML = "<div class='container' style ='font-size: 20px;font-weight: bold;'> <div class='row'><div class='col'style='text-align:right;background-color: #78b8df;text-align: center;'>Votre code est bon</div></div><div class='row'><div class='col'>Vous avez un coupon de <span style ='color: red;'>" + code_promo + "</span> % </div> </div><div class='row'><div class='col'>votre ancien prix etait de <span style ='color: red;'>" + prix_et_livraison + " </span>euros</div> </div><div class='row'><div class='col'>Le nouveau prix est de <span style ='color: red;'>" + prix_promo_hors_transport + " </span>euros </div></div><div class='row'><div class='col'>Les frais des livraisons sont de <span style ='color: red;'>" + Number(prix_choix_livraison) + "</span> euros</div></div><div class='row'><div class='col'>Le nouveau montant a payer frais de livraison inclus <span style ='color: red;'>" + prix_promo_avec_transport + " </span> euros </div></div></div></div>"; //on teste en plus de savoir si il y a quelque chose dans le panier c'est ce qui sera affiche dans la console de paypal if (test == 0) { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Votre panier est vide <br> ou<br>Votre commande a déjà été envoyée.<br>Verifiez votre boite mail (spams inclus)</span> <br><a href='https://phil.pecheperle.be' class='btn btn-primary ' role='button' aria-disabled='true'>abandon de commande </a> <br> <br> <a href='https://phil.pecheperle.be/panier/index270422.php' class='btn btn-primary ' role='button' aria-disabled='true'>Relancer la commnande </a></div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée"; document.getElementById('container').style.display = "none"; } else { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + promo.toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiementeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</span> </div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commande <br>Elle a bien été enregistrée"; document.getElementById('container').style.display = "block"; } } //********************************************************************************************************* //fin teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier*********** //********************************************************************************************************* //********************************************************************************************************* //debut teste savoir si le code promo est vides on affiche juste un message*********** //********************************************************************************************************* else if (name == '') { document.getElementById("print").innerHTML = "<div class='col'style='text-align:right;background-color: #78b8df; font-size: 20px;text-align: center;'>Vous devez entrer un code </div>"; } //********************************************************************************************************* //fin teste savoir si le code promo est vides on affiche juste un message*********** //********************************************************************************************************* //*********************************************************************************************************************** //debut teste en plus de savoir si le code promo est diffèrent de azerty si il y a quelque chose dans le panier*********** //*********************************************************************************************************************** else if (name != 'azerty') { //console.log("le code n'est pas bon "); document.getElementById("print").innerHTML = "<div class='col' style='text-align:right;background-color: #78b8df; font-size: 20px; text-align: center;'> votre code est mauvais </div>"; //on teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier if (test == 0) { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiement code est auvais .</span> </div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Votre commande n'a pas été enregistrée"; document.getElementById('container').style.display = "none"; } else { document.getElementById('nouveau_prix_total_modal').innerHTML = "<div class='col' style=''><span style='color: #050013;'> Dès réception du paiement de </span><br>" + ((((MonPanier.totalpanier()))) + Number(prix_choix_livraison)).toFixed(2) + " <span style='color: #050013;'>euro(s)<br>Votre commande vous sera envoyée.<br>Choississez un mode de paiementelectrique.</span> </div>"; document.getElementById('afficher_message_remerciement_commande').innerHTML = "Merci pour votre commande <br>Elle a bien été enregistrée"; document.getElementById('container').style.display = "block"; } //fin teste en plus de savoir si le code promo est azerty si il y a quelque chose dans le panier } //fin si le code promotion n'est pas bon } //fin de form.onclick = function(e) //fin code promo //apres toutes ces conditions je souhaiterais afficher un message suivant le nombre de sachets de perle //************************************ //test condition sur quanditee de perle //*********************************** //************************************ let total_perle_remise = MonPanier.totalquantite(); document.getElementById('remise_10').innerHTML = MonPanier.totalquantite(); console.log(total_perle_remise); if (total_perle_remise <= 10) { document.getElementById("message_remise_10").innerHTML = "vous avez mois de 10 perles "; } } // fin de //mode de livraison sans remise $('.total-panier-modal').html(MonPanier.totalpanier()); $('.total-quantite').html(MonPanier.totalquantite()); if ((Qte_Minimum == 1) && (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == -1) && (MonPanier.totalquantite() != 0)) { //document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad; } else if ((Qte_Minimum == 1) && ((Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 1) || (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 0)) && (MonPanier.totalquantite() != 0)) { //document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok; } else if (Qte_Minimum == 1) { //document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut; } else if (Qte_Minimum == 0) { //document.getElementById('qte_minimum_report').innerHTML = ""; } //document.getElementById('total_qte_haut').innerHTML = MonPanier.totalquantite(); document.getElementById('total_qte').innerHTML = MonPanier.totalquantite(); document.getElementById('total_qte_bas').innerHTML = MonPanier.totalquantite(); document.getElementById('total_qte_modal').innerHTML = MonPanier.totalquantite(); } //fin fonction panier $('.show-panier').on("click", ".effacer-item", function(event) { var nom = $(this).data('nom') MonPanier.enlever_produit_de_panier_tous(nom); afficherpanier(); }) $('.show-panier').on("click", ".moins-item", function(event) { var nom = $(this).data('nom') MonPanier.enlever_produit_de_panier(nom); afficherpanier(); }) $('.show-panier').on("click", ".plus-item", function(event) { var nom = $(this).data('nom') MonPanier.ajouter_produit_dans_panier(nom); afficherpanier(); }) $('.show-panier').on("change", ".item-quantite", function(event) { var nom = $(this).data('nom'); var quantite = Number($(this).val()); MonPanier.setquantiteForItem(nom, quantite); afficherpanier(); }); afficherpanier();
18 août 2022 à 23:15
C'est surtout le code HTML que je veux voir pour savoir à quel endroit tu charges ton fichier js
Modifié le 18 août 2022 à 23:32
ok jordane mais le compte html est immense a cause de toutes mes perles
je te donne juste la fin si cela n'est pas assez alors je ferais un gros nettoyage de mes articles
<p id="nouveau_prix_promo"></p>prix normal<br> <p id="nouveau_prix_promo"></p>remise_10<br> <p id="message_remise_10"></p>prix normal<br> <div class="container" style="margin-bottom: 300px;"> <div class="row"> <div class="col-12" style ="background-color: #d7dddd;max-width: 1200px;margin-bottom: 15px;"> <div class="text-end" style="margin-bottom: 80px;"> <button type="button" class="btn btn-success" id="commander"> <h3>Valider la commande</h3></button> </div> </div> </div> </div> <!-- </div> fin de answer--> </div> <!-- fin de l accordeon commande --> </div> <!-- fin de l accordeon commande --> </div> <!-- fin de l accordeon commande --> <!-- Les modals pour les erreurs --> <div class="modal" id="mymodal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header" style="display: block;margin-left: auto;margin-right: auto;"> <h3 class="modal-title" style="text-align:center;background-color: #ffe406;color:red;"> <span id="afficher_message_remerciement_commande"></span></h3> <i id="livraison-detail_haut"></i> <br> <h5>Il y a <span style="color:#f50813;" id="total_qte_modal"></span> article(s) dans le panier. </h5></div> <div class="modal-body" style="text-align:center"> <i id="nouveau_prix_total_modal" style="font-size: 22px;color: red;font-weight: bold;"></i> <br> <i id="nouveau_prix_total_modal" style="font-size: 22px;color: red;font-weight: bold;"></i> <div id="container" class="col-12" style="background-color: #d7dddd;max-width: 640px; margin-bottom: 15px;display: block; margin-left: auto; margin-right: auto; "> <p style="text-align: center;background-color: #9ba4a4;"> <strong>Pour le paiement par bancontact le compte paypal n'est pas nécessaire</strong></p> <script src="https://www.paypal.com/sdk/js?client-id=AWbjG_E24Z5TPJE4ImyfPPMHs5LMAQgFTQrRih7o0FDgR8PxnwsdufJXV3z3wR2-EHLvOQRVIeYRXQfb%C2%A4cy%3DEUR"></script> <!-- Set up a container element for the button --> <div id="paypal-button-container"></div> <script> paypal.Buttons({ // Sets up the transaction when a payment button is clicked createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ amount: { value: document.querySelector('#amount').value } }] }); }, // Finalize the transaction after payer approval onApprove: function(data, actions) { return actions.order.capture().then(function(orderData) { // Successful capture! For dev/demo purposes: console.log('Capture result', orderData, JSON.stringify(orderData, null, 2)); var transaction = orderData.purchase_units[0].payments.captures[0]; alert('Transaction ' + transaction.status + ': ' + transaction.id + '\n\nSee console for all available details'); // When ready to go live, remove the alert and show a success message within this page. For example: // var element = document.getElementById('paypal-button-container'); // element.innerHTML = ''; // element.innerHTML = '<h3>Thank you for your payment!</h3>'; //Or go to another URL: actions.redirect('https://pecheperle.be/panier/validation.php'); // Or go to another URL: actions.redirect('thank_you.html'); }); } }).render('#paypal-button-container'); </script> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary clear-panier " data-bs-dismiss="modal" id="mymodal" data-toggle="modal" data-target="#myModal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">commande erronnee <br> Vous avez propablement oublié <br> une information dans l'adresse de livraison <br>Veuillez verifier tous les champs </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_1" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre nom</span> <br> Ceci est important pour la livraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_2" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre prénom</span> <br> Ceci est important pour la livraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_3" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre adresse </span> <br> Ceci est important pour la livraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_4" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre code postal </span> <br> Ceci est important pour la livraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_5" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre ville </span> <br> Ceci est important pour la livraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur_6" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="commande_report">Vous avez propablement oublié <br> <span style="background-color: #ecd309;font-weight: bold;color: #f71212;font-size: 20px;">votre pays </span> <br> Ceci est important pour la ivraison <br>Veuillez verifier le champ </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> </div> </div> </div> </div> <!-- 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> --> <?php if ($remisepourcentage==0) {?> <script src=""></script> <!-- pour envoyer les infos vers mail.php --> <script> function commander(nom, prenom, adresse, cp, email, adressepoint, cppoint, villepoint, commande, prix_total, remise, nouveau_prix, prix_depart, total_qte_bas, message,promotioncases,nouveau_prix_promo,ville, pays, detail_livraison,cb_ID, cb_Nom, cb_Adresse, cb_CP, cb_VILLE, cb_PAYS) { $.ajax({ url: 'mail.php', type: 'POST', data: 'nom=' + nom + '&prenom=' + prenom + '&adresse=' + adresse + '&cp=' + cp + '&email=' + email + '&adressepoint=' + adressepoint + '&cppoint=' + cppoint + '&villepoint=' + villepoint + '&commande=' + commande + '&prix_total=' + prix_total + '&remise=' + remise + '&nouveau_prix=' + nouveau_prix + '&prix_depart=' + prix_depart + '&total_qte_bas=' + total_qte_bas + '&message=' + message + '&promotioncases=' + promotioncases + '&nouveau_prix_promo=' + nouveau_prix_promo +'&ville=' + ville + '&pays=' + pays + '&detail_livraison=' + detail_livraison + '&cb_ID=' + cb_ID + '&cb_Nom=' + cb_Nom + '&cb_Adresse=' + cb_Adresse + '&cb_CP=' + cb_CP + '&cb_VILLE=' + cb_VILLE + '&cb_PAYS=' + cb_PAYS, dataType: 'html', success: function(reponse) { if(reponse == "1") { //MonPanier.clearpanier(); afficherpanier(); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; $('#mymodal').modal('show'); } if(reponse == "0-1") { $('#mymodal_erreur_1').modal('show'); } if(reponse == "0-2") { $('#mymodal_erreur_2').modal('show'); } if(reponse == "0-3") { $('#mymodal_erreur_3').modal('show'); } if(reponse == "0-4") { $('#mymodal_erreur_4').modal('show'); } if(reponse == "0-5") { $('#mymodal_erreur_5').modal('show'); } if(reponse == "0-21") { $('#mymodal_erreur_21').modal('show'); } if(reponse == "0") { $('#mymodal_erreur').modal('show'); } } }); } $('#commander').click(function() { var nom = document.getElementById("nom").value; var prenom = document.getElementById("prenom").value; var adresse = document.getElementById("adresse").value; var cp = document.getElementById("cp").value; var ville = document.getElementById("ville").value; var pays = document.getElementById("pays").value; var email = document.getElementById("email").value; var adressepoint = document.getElementById("adressepoint").value; var cppoint = document.getElementById("cppoint").value; var villepoint = document.getElementById("villepoint").value; var commande = JSON.stringify(panier); var detail_livraison = document.getElementById("livraison-detail").innerHTML; var prix_total = document.getElementById("prix_total").innerHTML; var remise = document.getElementById("remise").innerHTML; var nouveau_prix = document.getElementById("nouveau_prix").innerHTML; var prix_depart = document.getElementById("prix_depart").innerHTML; var total_qte_bas = document.getElementById("total_qte_bas").innerHTML; var message = encodeURIComponent(document.getElementById("message").value); var promotioncases = document.querySelector('input[name=promotioncases]:checked').value; var nouveau_prix_promo = document.getElementById("nouveau_prix_promo").innerHTML; var cb_Nom = document.getElementById("cb_Nom").value; var cb_ID = document.getElementById("cb_ID").value; var cb_Adresse = document.getElementById("cb_Adresse").value; var cb_CP = document.getElementById("cb_CP").value; var cb_VILLE = document.getElementById("cb_VILLE").value; var cb_PAYS = document.getElementById("cb_PAYS").value; console.log(promotioncases); //console.log(cb_VILLE); commander(nom, prenom, adresse, cp, email, adressepoint, cppoint, villepoint, commande, prix_total, remise, nouveau_prix, prix_depart, total_qte_bas, message,promotioncases,nouveau_prix_promo, ville, pays, detail_livraison,cb_ID, cb_Nom, cb_Adresse, cb_CP, cb_VILLE, cb_PAYS); }); </script> <script type="text/javascript"> //<![CDATA[ // Initialiser le widget après le chargement complet de la page $(document).ready(function() { // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués $("#Zone_Widget").MR_ParcelShopPicker({ // // Paramétrage de la liaison avec la page. // // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais (ex: input hidden) Target: "#Target_Widget", // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais pour affichage TargetDisplay: "#TargetDisplay_Widget", // Selecteur de l'élément dans lequel sont envoysé les coordonnées complètes du point relais TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget", // // Paramétrage du widget pour obtention des point relais. // // Le code client Mondial Relay, sur 8 caractères (ajouter des espaces à droite) // BDTEST est utilisé pour les tests => un message d'avertissement apparaît Brand: "BDTEST ", // Pays utilisé pour la recherche: code ISO 2 lettres. Country: "FR", // Code postal pour lancer une recherche par défaut PostCode: "59000", // Mode de livraison (Standard [24R], XL [24L], XXL [24X], Drive [DRI]) ColLivMod: "24R", // Nombre de Point Relais à afficher NbResults: "7", // // Paramétrage d'affichage du widget. // // Activer l'affichage Responsive. Responsive: true, // Afficher les résultats sur une carte? ShowResultsOnMap: false, // Afficher les informations du point relais à la sélection sur la carte? DisplayMapInfo: true, // Fonction de callback déclenché lors de la selection d'un Point Relais OnParcelShopSelected: // Fonction de traitement à la sélection du point relais. // Remplace les données de cette page par le contenu de la variable data. // data: les informations du Point Relais function(data) { //span // $("#cb_ID").html(data.ID); // $("#cb_Nom").html(data.Nom); //$("#cb_Adresse").html(data.Adresse1 + ' ' + data.Adresse2); // $("#cb_Adresse").html(data.Adresse1); // $("#cb_CP").html(data.CP); // $("#cb_Ville").html(data.Ville); // $("#cb_Pays").html(data.Pays); //input hidden $("[name='IDmondial']").val(data.ID); $("[name='NOMmondial']").val(data.Nom); //$("[name='ADRESSEmondial']").val(data.Adresse1 + ' ' + data.Adresse2); $("[name='ADRESSEmondial']").val(data.Adresse1); $("[name='CPmondial']").val(data.CP); $("[name='VILLEmondial']").val(data.Ville); $("[name='PAYSmondial']").val(data.Pays); } // // Autres paramétrages. // //Filtrer les Points Relais selon le Poids (en grammes) du colis à livrer //Weight: "2000", // Spécifier le nombre de jours entre la recherche et la dépose du colis dans notre réseau // SearchDelay: "3", //Limiter la recherche des Points Relais à une distance maximum //SearchFar: "", // Liste des pays selectionnable par l'utilisateur pour la recherche: codes ISO 2 lettres //AllowedCountries: "FR,BE,NL,LU", // Force l'utilisation de Google Map si la librairie est présente? // EnableGmap: true, // Activer la recherche de la position lorsque le navigateur de l'utilisateur le supporte? // EnableGeolocalisatedSearch: "true", // Spécifier l'utilisation de votre feuille de style CSS lorsque vous lui donnez la valeur "0" // CSS: "1", // Activer le zoom on scroll sur la carte des résultats? //,MapScrollWheel: "false", // Activer le mode Street View sur la carte des résultats (attention aux quotas imposés par Google) // MapStreetView: "false" }); }); //]]> </script> <script> // tell the embed parent frame the height of the content if(window.parent && window.parent.parent) { window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "a9mxhow5" }], "*") } // always overwrite window.name, in case users try to set it manually window.name = "result" </script> </script> <script> // pour afficher modial relay quand on choisi mode envois mondial relay $(document).ready(function() { $("div.desc").hide(); $("input[name$='choix_livraison']").click(function() { var languageCode = $(this).data('lang'); $("div.desc").hide(); $("#ref-" + languageCode).show(); }); }); </script> <script> var btn = document.querySelector('#commander'); // addEventListener btn.addEventListener('click', function() { var total = document.getElementById('total_qte').innerHTML; //console.log('TOTAL', total); if(total == '0' || parseFloat(total) == 0) { // tu avais un espace entre la quote et le zéro.. alert("Aucun article sélectionner ou votre commande a déjà été envoyée"); //var p = document.createElement('p'); //p.innerText = 'Votre commande a déjà été envoyée'; //document.body.appendChild(p); } }); </script> <!-- <script src="https://phil.pecheperle.be/panierselect/script.js"></script> <script src="https://phil.pecheperle.be/panier/script.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>
18 août 2022 à 23:33
il y a une erreur lorsque je fais copier coller a la ligne 222
ceci n'es pas bon
<script src="""></script>
c est
<script src=""></script>
18 août 2022 à 23:35
regarde bien ces lignes:
<p id="nouveau_prix_promo"></p>prix normal<br> <p id="nouveau_prix_promo"></p>remise_10<br>
Tout te semble correct?
Modifié le 18 août 2022 à 23:49
yg_be
Merci pour la réponse
pfffff je vais enlever el copier coller de mon pc ....
Merci pour ton aide et encore une fois quand on a la tête trop dans le code ...
Je souhaiterais quand même faire une petite remarque ...
Sans toi et jordane je serais encore loin très loin
Mais grâce a vous deux a vos explications et a votre pédagogie cela va mieux
Lorsque je regarde du javascript je commence a comprendre
Alors que je me souviens il y a encore quelques mois je ne savais pas ce que c'était que console.log ou encore un var_dump pour php
j'ai appris tellement de choses ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question18 août 2022 à 23:24
bonjour,
Comme d'habitude, ne néglige pas d'indiquer à quelle ligne de code se produit le message d'erreur.
Montre nous la partie du code source HTML concernée. Ce code source est à récupérer dans le navigateur, quand la page est affichée.
Modifié le 18 août 2022 à 23:36
bonsoir yg_be
Merci pour la reponse
voici la ligne ou se produit l'erreur
document.getElementById('remise_10').innerHTML = MonPanier.totalquantite();
18 août 2022 à 23:36
regarde ma réponse
18 août 2022 à 23:50
oui je viens de la voir juste après celle de yg_be ou direct cela m'a fait tilt
19 août 2022 à 00:22
Le message d'erreur est pourtant clair: il te dit qu'il n'y a pas d'élément ayant cet Id 'remise_10'.
La première chose à faire est alors d'examiner le code source HTML pour y localiser l'élément ayant cet Id.
20 août 2022 à 18:22
oui en effet cela était très clair mais quand on a la tête dans le guidon ...
18 août 2022 à 23:49
encore merci a vous deux pour tout
18 août 2022 à 22:52
ce qui est bizarre c'est lorsque je remplace
par
je n'ai plus d'erreur