Sujet Précédent Sujet Suivant

Comment assembler 2 variables ensembles

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - Modifié le 8 janv. 2022 à 16:35
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 9 janv. 2022 à 22:20
Bonjour a tous

depuis ce matin j 'effectue des retouches dans le code javascipt de mon bon de commande
je sis parvenu a faire quelques petites choses

Mais a présent je suis bloque face a un petit soucis qui sera vite réglé par vos soins , ca fait un bon moment que je cherche , mais en vain ..

donc voila le problème le bon de commande que j'ai trouvé
permet de choisir un mode de livraison et aussi une ristourne

Mais je dois choisir dans le programme de base d'après la valeur d'une variable
soit les frais de livraison
soit une ristourne
pour le calcul global
mais je souhaite avoir les deux

voici le morceau de code ou je souhaiterais assembler les deux morceaux

le premier morceau qui calcule les frais de livraison ajouter au panier 

$('.total-panier').html(prix_et_livraison.toFixed(0));
document.getElementById('livraison-detail').innerHTML = "<div class='row'><div class='col'></div><div class='col'>Livraison </div><div class='col ' style='text-align:center;'>Méthode</div><div class='col'> (" + nom_choix_livraison + ") :</div><div class='col'> " + prix_choix_livraison +" euros.</div></div><div class='row'>" + "<div class='col'></div><div class='col'></div><div class='col'></div> <div class='col'>Frais fixe </div><div class='col'>" + Forfait_Livraison + " : " +" euro.</div></div>";


et le deuxième morceau qui calcule le pourcentage 
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";



et le code complet du panier 

// Mon petit panier JS
// https://www.1formatik.com

// 0 pour désactiver les commandes par lot
// 1 pour activer la fonctionnalité de commande par lot
var Qte_Minimum = 0;

// Nombre de produits minimum par lot
var Qte_Minimum_Valeur = 6; 

// 0 pour désactiver l'ajout du prix de 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
var Livraison = 3;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison = 25;

// 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 correctes, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits</font>";
var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correcte</font>";
var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits";

// ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function(){
panier = [];
function Item(nom, prix, quantite) {
this.nom = nom;
this.prix = prix;
this.quantite = quantite;
}

function savepanier(){
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) {
for(var item in panier) {
  if(panier[item].nom === nom) {
panier[item].quantite ++;
savepanier();
return;
  }
}
var item = new Item(nom, prix, 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 += panier[item].quantite;
}
return totalquantite;
}

obj.totalpanier = function(){
var totalpanier = 0;
for(var item in panier) {
  totalpanier += panier[item].prix * panier[item].quantite;
}
return Number(totalpanier.toFixed(0));
}

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(0);
  panierCopy.push(itemCopy)
}
return panierCopy;
}

return obj;
})();

$('.ajouter-panier').click(function(event) {
  event.preventDefault(); 
  var nom_option = "";
  var prix_option = 0;
  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;
  MonPanier.ajouter_produit_dans_panier(nom, prix, 1);
  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();
 }}
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;'>"
      + "<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) + ")</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;'><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;'>" + panierArray[i].total + "</div>" 
      +  "</div><br>";
  }
  $('.show-panier').html(output);

  if (Livraison == 3)
  {
const cases = document.querySelectorAll('input[name="choix_livraison"]');
for (const x of cases) {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;
let prix_et_livraison = MonPanier.totalpanier() + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
document.getElementById('amount').value = prix_et_livraison;
$('.total-panier').html(prix_et_livraison.toFixed(0));
document.getElementById('livraison-detail').innerHTML = "<div class='row'><div class='col'></div><div class='col'>Livraison </div><div class='col ' style='text-align:center;'>Méthode</div><div class='col'> (" + nom_choix_livraison + ") :</div><div class='col'> " + prix_choix_livraison +" euros.</div></div><div class='row'>" + "<div class='col'></div><div class='col'></div><div class='col'></div> <div class='col'>Frais fixe </div><div class='col'>" + Forfait_Livraison + " : " +" euro.</div></div>";

$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
break;
  }
  }
  }
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Forfait_Livraison +" euros.";
  }
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(0));
  }

  $('.total-panier-modal').html(MonPanier.totalpanier());
  $('.total-quantite').html(MonPanier.totalquantite());
  if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0))
  {
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
  }
  else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (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 = "";
  }  
}

$('.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();
A voir également:

13 réponses

Réponse 1 / 13
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
8 janv. 2022 à 18:53
oh la la ....
Déjà.. si tu prenais le soin d'indenter correctement ton code.... ça le rendrait vachement plus lisible pour toi et pour nous....
Je te le dis à chaque fois.. mais visiblement ça ne rentre pas !

Ensuite...
Pourquoi boucler sur toutes les cases.. alors que tu pourrais te contenter de celles qui sont selectionnées.
Dans une de tes précédentes question, le code permettant ceci t'avais déjà été donné.
En plus.. pourquoi faire autant de mélange de "pure" javascript et de jquery ??

Vu que jquery est chargé dans ta page.. autant l'utiliser..
donc, par exemple, regarde ce que fait 
var cases = $('input[name="choix_livraison"]:checked');


Esuite.. n'hésites pas à ajouter des console.log dans ton code pour essayer de comprendre ce que valent tes différentes variables........

Et enfin.. nous expliquer, ce que tu obtiens ... et ce que tu souhaites avoir serait pas mal pour qu'on comprenne ton problème.


Je te laisse remettre ton code au propre, ajouter les consoles.log .. puis revenir vers nous si ton souci persiste avec ton nouveau code et des explications plus détaillés.
1
Réponse 2 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 8 janv. 2022 à 17:43
je viens d 'essayer ceci mais sans succès

j'ai modifier la ligne 195 de cette manière 


let prix_et_livraison = MonPanier.totalpanier() + Number(prix_choix_livraison) + Number(Forfait_Livraison ) + Number(Poucentage_Livraison ) ;


et au niveau de la ligne de la ligne 18 ceci 

var Poucentage_Livraison = (totalpanier()/(100/Poucentage_Livraison).toFixed(0));
0
Réponse 3 / 13
yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025 Ambassadeur 1 559
8 janv. 2022 à 18:50
bonjour,
Que veux-tu assembler? Tu veux les superposer, les fusionner, ... ?

"sans succès": qu'obtiens-tu, que souhaites-tu?

"je dois choisir dans le programme de base d'après la valeur d'une variable": quelle ligne, quelle variable, ... ?
0
Réponse 4 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 19:21
bonjour yg_be

Merci de ton aide
cela fait encore une fois un bon moment que je cherche

dans le bon de commande initial
il y a au début du code 3 variables 

// 0 pour désactiver l'ajout du prix de 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
var Livraison = 3;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison = 25;

// Forfait de la livraison en euro
var Forfait_Livraison = 1;



dans la première je peux choisir 1 2 ou 3

mais je ne trouve pas comment ajouter une remise éventuelle lorsque je choisi l option 3
j'ai réussi a ajouter un forfait , mais je n arrive pas a ajouter une remise éventuelle


lorsque je modifie par exemple comme j'ai modifie ici plus haut j obtiens juste le prix définit par défaut

donc la modification que j effectue mets le bazar dans le calcul final

le calcul du total s'effectue a partir de la ligne 195 et la variable % a la ligne 18
0
yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025 1 559
8 janv. 2022 à 19:39
Tu as donc un code qui ne donne pas le résultat que tu souhaites.
Tu nous expliques, pas très clairement, ce que tu crois que fait ce code, et que, quand tu modifies ce code, cela donne un autre résultat, qui n'est pas celui que tu souhaites.

Tant que tu ne nous expliques pas le résultat que tu souhaites, comment pouvons nous t'aider?

N'utilise pas le code pour expliquer le résultat que tu souhaites. Donne plutôt des exemples.
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025
8 janv. 2022 à 20:00
merci pour l intervention
je pense quand j utilise totalpanier() dans la définition de la variable var Poucentage_Livraison
cela ne fonctionne pas tout simplement car il n'y a encore rien dans totalpanier()

car j'ai fait des essais en y inscrivant un nombre quelconque et cela fonctionne
donc mon soucis c'est que mettre a la place de totalpanier() pour le calcul du %

pour l instant lorsque je réalise une commande le résultat total est l addition du contenu du panier + les frais de livraison +les frais forfaitaires

je souhaiterais ajouter en plus une remise éventuelle en %
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 20:12
voila le code indenter
je pensais qu'il l'était suffisamment le revoici ci dessous
en fait je travaille a l envers
lorsque j'ai bien compris comment tout fonctionne tellement que je trifouille dedans je mets pleins de commentaires

Jordane tu me parle de ajax et javascript alors que j'ai déjà du mal avec le php mdrrr

je pense avoir compris ce que font les différentes variables juste que je ne parviens pas a récupérer la variable du total du panier pour l'utiliser pour mon calcul de la remise en %

ce que j obtiens c'est que comme je n'utilise pas la bonne variable dans mon calcul de % le code me donne la valeur par défaut définie dans le html

car lorsque j utile par exemple ceci 

var Poucentage_Livraison = (1000(100/Poucentage_Livraison).toFixed(0));
mon code fonctionne
tandis qu'avec ceci cela ne fonctionne pas donc j'ai donc au total de mon panier ni le prix forfaitaire ni le prix de livraison
ne sont calculé

je ne comprends pas trop 

var cases = $('input[name="choix_livraison"]:checked');


car je sais ce que fais cette variable
elle additionne pour l instant le panier + les frais de livraison+ le forfait et pas encore le % de remise

pour ce qui est des consol log oui cela est une idée

en attendant voici déjà mon code sans les consol log pour l'instant
je reviens tantôt 

// Mon petit panier JS
// https://www.1formatik.com

// 0 pour désactiver les commandes par lot
// 1 pour activer la fonctionnalité de commande par lot
var Qte_Minimum = 0;

// Nombre de produits minimum par lot
var Qte_Minimum_Valeur = 6;

// 0 pour désactiver l'ajout du prix de 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
var Livraison = 3;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison = 15;

// 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 correctes, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits</font>";
var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correcte</font>";
var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits";

// ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function(){
    panier = [];

//affectation
    function Item(nom, prix, quantite) {
        this.nom = nom;
        this.prix = prix;
        this.quantite = quantite;
    }
	
//affectation sauvegarde panier
    function savepanier(){
        sessionStorage.setItem('MonPanier', JSON.stringify(panier));
    }

//lire le panier
    function loadpanier(){
        panier = JSON.parse(sessionStorage.getItem('MonPanier'));
    }
    if (sessionStorage.getItem("MonPanier") != null) {
        loadpanier();
    }

    var obj = {};
	
//ajout dans le panier
    obj.ajouter_produit_dans_panier = function(nom, prix, quantite) {
        for (var item in panier) {
            if (panier[item].nom === nom) {
                panier[item].quantite++;
                savepanier();
                return;
            }
        }
        var item = new Item(nom, prix, quantite);
        panier.push(item);
        savepanier();
    }

// quanditee du panier
    obj.setquantiteForItem = function(nom, quantite) {
        for (var i in panier) {
            if (panier[i].nom === nom) {
                panier[i].quantite = quantite;
                break;
            }
        }
    };

//enlever objet panier
    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();
    }

//total quanditee
    obj.totalquantite = function(){
        var totalquantite = 0;
        for (var item in panier) {
            totalquantite += panier[item].quantite;
        }
        return totalquantite;
    }

    obj.totalpanier = function(){
        var totalpanier = 0;
        for (var item in panier) {
            totalpanier += panier[item].prix * panier[item].quantite;
        }
        return Number(totalpanier.toFixed(0));
    }

//list du panier
    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(0);
            panierCopy.push(itemCopy)
        }
        return panierCopy;
    }

    return obj;
})();

//ajout au panier
$('.ajouter-panier').click(function(event) {
    event.preventDefault();
    var nom_option = "";
    var prix_option = 0;
    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;
    MonPanier.ajouter_produit_dans_panier(nom, prix, 1);
    afficherpanier();
});

//effacer panier
$('.clear-panier').click(function(){
    MonPanier.clearpanier();
    afficherpanier();
});

//choix livraison
$('.choix_livraison').click(function(){

    const cases = document.querySelectorAll('input[name="choix_livraison"]');
    for (const x of cases) {
        if (x.checked) {
            afficherpanier();
        }
    }
});

//affiche le panier
function afficherpanier(){
    var panierArray = MonPanier.listpanier();
    var output = "";
    for (var i in panierArray) {
        output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;'>" +
            "<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) + ")</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;'><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;'>" + panierArray[i].total + "</div>" +
            "</div><br>";
    }
    $('.show-panier').html(output);

//choix du mode de livraison 4 choix
    if (Livraison == 3) {
        const cases = document.querySelectorAll('input[name="choix_livraison"]');
        for (const x of cases) {
            if (x.checked) {
                let nom_choix_livraison = x.dataset.nom;
                let prix_choix_livraison = x.value;
                let prix_et_livraison = MonPanier.totalpanier() + Number(prix_choix_livraison) + Number(Forfait_Livraison) + Number(Poucentage_Livraison);
                document.getElementById('amount').value = prix_et_livraison;
                $('.total-panier').html(prix_et_livraison.toFixed(0));
                document.getElementById('livraison-detail').innerHTML = "<div class='row'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") :</div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison + " euros.</div></div><div class='row'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + Forfait_Livraison + " : " + " euro.</div></div>";
                break;
            }
        }
    }
    if (Livraison == 1) {
        $('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison))).toFixed(0));
        document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison + "% du prix total.";
    }
    if (Livraison == 2) {
        $('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison).toFixed(0));
        document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Forfait_Livraison + " euros.";
    }
    if (Livraison == 0) {
        $('.total-panier').html(((MonPanier.totalpanier())).toFixed(0));
    }

    $('.total-panier-modal').html(MonPanier.totalpanier());
    $('.total-quantite').html(MonPanier.totalquantite());
    if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0)) {
        document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
    } else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (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 = "";
    }
}

//effacer un article
$('.show-panier').on("click", ".effacer-item", function(event) {
    var nom = $(this).data('nom')
    MonPanier.enlever_produit_de_panier_tous(nom);
    afficherpanier();
})

//retirer un article
$('.show-panier').on("click", ".moins-item", function(event) {
    var nom = $(this).data('nom')
    MonPanier.enlever_produit_de_panier(nom);
    afficherpanier();
})

//ajouter un article
$('.show-panier').on("click", ".plus-item", function(event) {
    var nom = $(this).data('nom')
    MonPanier.ajouter_produit_dans_panier(nom);
    afficherpanier();
})

//quanditee des objets
$('.show-panier').on("change", ".item-quantite", function(event) {
    var nom = $(this).data('nom');
    var quantite = Number($(this).val());
    MonPanier.setquantiteForItem(nom, quantite);
    afficherpanier();
});

afficherpanier();
0
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
8 janv. 2022 à 20:31
Jordane tu me parle de ajax et javascript alors que j'ai déjà du mal avec le php mdrrr

Non.. là je te parle de javascript ... et que de javascript ... ( et de la librairie jquery qui n'est rien de plus que du javascript... et que tu utilises déjà ailleurs dans ton code )


je ne comprends pas trop

var cases = $('input[name="choix_livraison"]:checked');

car je sais ce que fais cette variable
elle additionne pour l instant le panier + les frais de livraison+ le forfait et pas encore le % de remise

Heuu.. non... elle n'additionne rien du tout ...
Cette ligne de code te permet de SELECTIONNER que les cases COCHEES ( checked )
A toi d'en faire ce que tu veux ensuite.


Et pour ce qui est de ton problème .... c'est que tu places du code un peu n'importe où .. sans savoir à quoi il sert ni comment fonctionne le programme.

Il faudrait déjà que tu comprennes la portée des variables.
La différence entre les déclarer en dehors de fonctions.. et les declarer dedans
La différence entre les mots clés LET VAR et CONST

Et puis...surtout .. il faudrait juste que tu essayes de comprendre l'algorithmie du code.... (ça .. c'est valable peut importe le langage de programmation... )
- Par exemple.. à quel moment (après quelle action) ce calcul doit-il se faire ?
- Les données à utiliser pour le calcul sont disponibles à quel(s) endroit(s) dans ton code et/ou ta page html ?
- A quel(s) endroit(s) souhaites tu afficher ce résultat ?
- Lors du calcul.. que valent chaque variables ? ( mettre des console.log pour le savoir )

Et en js, pour t'y aider à voir plus clair .. tu peux abondamment utiliser des console.log dans ton code ( et regarder ensuite dans la console JS de ton navigateur) ce que ça t'affiche...
Pour l'instant.. je n'en voie aucun dans ton code...
1
Réponse 6 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 22:31
jordane merci pour cette large explication mais je pense que l on c'est mal compris

c'est que je ne connais pas grand chose en javascript mais quand même mdrrr
je me doutais bien qu'avec ce code j'allais checker quelque chose
je vais voir ce que cela donne
a présent que je suis seul et tranquille ... 

var cases = $('input[name="choix_livraison"]:checked');


je parlais de ce morceau de code qui additionne , d ailleurs j'ai déjà réussi a ajouter les frais de forfaitaires
cela était facile .... 
  if (Livraison == 3) {
        const cases = document.querySelectorAll('input[name="choix_livraison"]');
        for (const x of cases) {
            if (x.checked) {
                let nom_choix_livraison = x.dataset.nom;
                let prix_choix_livraison = x.value;
                let prix_et_livraison = MonPanier.totalpanier() + Number(prix_choix_livraison) + Number(Forfait_Livraison) + Number(Poucentage_Livraison);
                document.getElementById('amount').value = prix_et_livraison;
                $('.total-panier').html(prix_et_livraison.toFixed(0));
                document.getElementById('livraison-detail').innerHTML = "<div class='row'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") :</div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison + " euros.</div></div><div class='row'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + Forfait_Livraison + " : " + " euro.</div></div>";
                break;
            }
        }
    }

et a présent comme tu peux le voir j'ai essayé d'ajouter le pourcentage de la remise qui est d ailleurs déjà calculé un peu plus loin

a ce niveau 
{
        $('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison))).toFixed(0));
        document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison + "% du prix total.";


donc le calcul est le suivant 

((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison))).toFixed(0)


donc j'ai besoin de 
MonPanier.totalpanier

pour mon calcul

donc je dois savoir ce que contient MonPanier et totalpanier

pour monpanier cela se trouve ici 

var MonPanier = (function(){
    panier = [];


pour ce qui est du totalpanier cela se trouve ici 

    obj.totalpanier = function(){
        var totalpanier = 0;
        for (var item in panier) {
            totalpanier += panier[item].prix * panier[item].quantite;
        }
        return Number(totalpanier.toFixed(0));
    }


je suis presque sur que 

var Poucentage_Livraison =((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison))).toFixed(0))


est place trop haut dans le code car a ce moment il n'y a encore rien dans le panier
0
jordane45 Messages postés 38389 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 janvier 2025 4 729
8 janv. 2022 à 22:49

je suis presque sur que

var Poucentage_Livraison =((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison))).toFixed(0))

est place trop haut dans le code car a ce moment il n'y a encore rien dans le panier

Oui c'est bien ça...
D'où l'importance de bien comprendre le fonctionnement du script ... et de réflechir à l'algorithmie ( la logique..) que tu souhaites mettre en place...
Tu pourrais, sur papier pour commencer, écrire (voir même décrire..) les différentes étapes de ton code...
En gros...
Si je clique sur machin
Je dois récupérer les données qui se trouvent.....
Puis faire l'opération mathématique... budule * truc ...
Et enfin.. stocker la donnée dans la variable toto ....

Une fois que tu auras posé à plat les différentes étapes .. là il sera temps d'adapter le code à ce fonctionnement souhaité...

car pour l'instant... ta façon de coder me fait plutôt penser à ça
2
Réponse 7 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 23:06
Merci pour me réconforter dans ce que j'ai compris

disons que c'est vrai que j'ai l'esprit souvent ailleurs , je pense que cela est l'âge et la maladie que je traine derrière moi ...(perte de mémoire)non pas l'alzheimer mdrrrr

c'est vrai que si le code part du haut vers le bas tout est logique , je parle bien sur du javascript ...

ces codes ne viennent pas de moi , j'essaye toujours de trouver ce qui me semble valable avec tout ce que j'ai déjà appris ici

je sais pas comme tu as su que j'étais dans cet état ...avec mon site qui connaît un certain succès , je dois répondre a pas de question sur la pêche et puis ma compagne qui pense que je m'amuse ....quand je m'arrache les cheveux avec ces codes
0
Réponse 8 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 23:24
je viens de faire mon premier essai avec les log

j'ai écrit ceci 
 console.log(Poucentage_Livraison );


en prenant comme exemple ceci 

console.log("The value of str is " + str);


mais rien ne s'affiche dans la console ...ou alors je fais un truc mal
0
yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025 1 559
8 janv. 2022 à 23:28
essaie plutôt: 
console.log("Poucentage_Livraison: " + Poucentage_Livraison );

Si rien ne s'affiche, c'est que cette ligne de code n'est pas exécutée.
Ajoute alors d'autre console.log pour comprendre ce qui se passe.
Sois attentif à pouvoir différencier ce qui est loggé.
2
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025
8 janv. 2022 à 23:33
merci c'est gentil
ah oui en effet cela fonctionne mieux comme ca
donc si je comprends bien lorsque je lance ma page tout le code est lu et m'affiche ce que je veux ...
si je clic sur des boutons ou autre cela n' a plus d'impact dans la console ?

voici donc le retour
il me dit que la variable n'est pas définie

0
Réponse 9 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 janv. 2022 à 23:57
j'ai placer ce code a des endroits qui me sembles stratégique mais a chaque fois j'ai le message d'erreur comme ici plus haut 

var Poucentage_Livraison = ((MonPanier.totalpanier()) + (MonPanier.totalpanier() / (100 / Poucentage_Livraison)).toFixed(0)); 
     console.log("Poucentage_Livraison: " + Poucentage_Livraison );

je pensais le poster a la ligne 141
après que tous les objets soient crées

ou alors a la ligne 181 juste avant function afficherpanier qui englobe le calcul de l addition des différentes variables


ou encore a la ligne 200 juste avant l addition des variables pour le prix final

car ces endroits cela fait déjà belle lurette que l'on connaît les valeurs MonPanier.totalpanier
0
yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025 1 559
9 janv. 2022 à 09:33
"cela fait déjà belle lurette": le code n'est pas exécuté de haut en bas.
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > yg_be Messages postés 23430 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 17 janvier 2025
9 janv. 2022 à 22:20
oui en effet et c'est bien pour ca que l'on s'yperds
0
Réponse 10 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 9 janv. 2022 à 00:13
plus d'erreur mais cela me retourne Poucentage_Livraison: 0NaN donc je dois encore chercher jusque quand j'aurais un %
0
Réponse 11 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
9 janv. 2022 à 00:47
enfin j'ai trouvé et encore une fois cela était de la logique
0
Réponse 12 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 9 janv. 2022 à 01:39
voici donc ma solution 



 {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison = 25;

let prix_et_livraison = (( (MonPanier.totalpanier()*0.75))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
document.getElementById('amount').value = prix_et_livraison;
$('.total-panier').html(prix_et_livraison.toFixed(2));
document.getElementById('livraison-detail').innerHTML = "<div class='row'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") :</div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison +" euros.</div></div><div class='row'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + Forfait_Livraison + " : " +" euro.</div></div>(" + Poucentage_Livraison + ") (" + ( (MonPanier.totalpanier()*0.25).toFixed(2)) + ")";
break;
  }
  }
0
Réponse 13 / 13
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
9 janv. 2022 à 01:41
encore un immense merci pour la leçon a présent je sais me servir de la console log
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
djakool4 -

158 réponses
Great Teacher Onizuka SAISON 2
remi1912 -
Sorrow -

35 réponses
Brancher 2 tv sur Freebox révolution
cecilya -
Consommateur -

28 réponses
3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses