Assigner une valeur a une variable suivant un choix

Résolu
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -
bonjour a tous
me voila a présent dans le bon de commande pour que les utilisateurs de mon site puisse passer des commandes parmi plus de 200 produits

en fouillant j'ai trouve ce modèle clé en main que je souhaiterais modifier

dans un premier temps j'ai ajouter des modes de livraisons qui sont au nombre de 4 et qui n existait pas dans le modèle que j'ai trouvé

Mais je suis confronte a un premier petit soucis le choix du mode de la livraison s'effectue a la ligne 213et c'est a moi a le determiner

j'aurais souhaiter que cela soit l utilisateur qui puisse choisir
par exemple si il choisi mondial relay Belgique que la VAR livraison puisse contenir 2
que si il choisit poste belgique que la VAR livraison puisse contenir 3
que si il choisit mondial relay france que la VAR livraison puisse contenir 4
que si il choisit la poste france que la VAR livraison puisse contenir 5

Merci de l aide

voici le code 

<!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">
    <meta name="author" content="1FORMATIK.com">
    <title>Comment créer un panier en JavaScript</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  </head>
<body>
<div class="container bg-light rounded">
<div class="row">
<div class="col-md-12 mt-3">
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 01 (8.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="01">
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
</select>
</div>
<div class="col-md-2">
<div class="form-check">
<input class="form-check-input produit_001" type="checkbox" data-nom="Option 1" data-prix="6.00" id="case_01">
<label class="form-check-label" for="case_01">
Option 1 (+6.00 €)
</label>
</div>
<div class="form-check">
<input class="form-check-input produit_001" type="checkbox" data-nom="Option 2" data-prix="5.00" id="case_02">
<label class="form-check-label" for="case_02">
Option 2 (+5.00 €)
</label>
</div>
</div>
<div class="col-md-4 text-end">
<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 02 (15.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="02">
 <option value="XS">XS</option>
 <option value="S">S</option>
 <option value="M">M</option>
 <option value="L">L</option>
 <option value="XL">XL</option>
 <option value="2XL">2XL</option>
 <option value="3XL">3XL</option>
 <option value="4XL">4XL</option>
</select>
</div>
<div class="col-md-6 text-end">
<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<p>Produit 03 (12.00 €)</p>
</div>
<div class="col-md-8 text-end">
<a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Votre commande</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
Nombre de produit(s) dans le panier : <span class="total-count"></span>
<br /><br />
<table width="100%" class="show-panier" id="macommande"></table>
<br />
<br /><div >choisir un mode de livraison </div>

<div>*Prix total: <b><span class="total-panier" id="prix_total">0.00</span> euros</b></div>
<br />
<i id="livraison-detail">*Livraison incluse</i>


<div class="text-end"><button class="clear-panier btn btn-danger">Vider le panier</button></div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Adresse de livraison</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<input class="form-control" type="text" name="nom" value="" id="nom" placeholder="Nom">
<br>
<input class="form-control" type="text" name="prenom" value="" id="prenom" placeholder="Prénom">
<br>
<input class="form-control" type="text" name="cp" value="" id="cp" placeholder="Code postal">
<br>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="Ville">
<br>
<input class="form-control" type="text" name="email" value="" id="email" placeholder="e-Mail">
<br>
<textarea class="form-control" id="message" placeholder="Message Optionnel"></textarea>
<br>
<div class="text-end"><button type="button" class="btn btn-success" id="commander">Commander</button></div>
<br>
<div id="qte_minimum_report"></div>
</div>
</div>
<div class="modal" id="mymodal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
<h5 class="modal-title">Commande confirmée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Merci de votre commande</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">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="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Une erreur est survenue</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  </div>
</div>
  </div>
</div>
</div>
<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>
<script>
function commander(nom,prenom,cp,email,commande,prix_total,message,ville){
$.ajax({
url : 'mail.php',
type : 'GET', 
data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville, 
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"){$('#mymodal_erreur').modal('show');}
}
});
}
$('#commander').click( function(){
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var cp = document.getElementById("cp").value;
var ville = document.getElementById("ville").value;
var email = document.getElementById("email").value;
var commande = JSON.stringify(panier);
var prix_total = document.getElementById("prix_total").innerHTML;
var message = encodeURIComponent(document.getElementById("message").value);
commander(nom,prenom,cp,email,commande,prix_total,message,ville);
});


// 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe

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_mondial_relay_belgique = 5; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4; 

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2; 

// 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(2));
}

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(2);
  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();
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<tr>"
      + "<td>" + panierArray[i].nom + "</td>" 
      + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
      + "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
      + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
      + " = " 
      + "<td>" + panierArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-panier').html(output);
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique  +" euros.";
  }
  
    if (Livraison == 3)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique  +" euros.";
  }
  
      if (Livraison == 4)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
  }
  
       if (Livraison == 5)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
  }
  
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
  }
  $('.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();

</script>
</body>
</html>

17 réponses

Résumé de la discussion

La problématique centrale concerne l’intégration d’un choix de modes de livraison au sein d’un bon de commande, afin que la VAR livraison varie selon le mode sélectionné. Des quatre modes ajoutés, le but est d’associer à chacun un forfait livraison spécifique et affichable dynamiquement, par exemple Mondial Relay Belgique et Poste Belgique. Pour l'instant, le code prévoit une variable Livraison et des forfaits préconfigurés (belge et français) mais ne relie pas le choix utilisateur au calcul dynamique du montant total. En cas de mise en œuvre, il serait utile d'utiliser une structure associant une table de correspondance entre mode et montant et d’alimenter la VAR livraison en conséquence, pour éviter de modifier manuellement le paramétrage.

Généré automatiquement par IA
sur la base des meilleures réponses
  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    Bonjour,

    Déjà, faudrait les ajouter aussi côté HTML ... pour l'instant je ne les y voit pas.
    (en utilisant une liste déroulante... ou des boutons radios par exemple)

    Une fois que ça sera fait, il te sera facile de récupérer la "valeur" du mode de livraison choisi de la même façon que le nom, prénom, cp ... de ton code js.
    1
  2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    bonjour Jordane
    Merci pour l aide
    voila je viens de modifier mon code je le reposte entièrement
    apparemment les id sont récupéré de cette façon 

    var prenom = document.getElementById("prenom").value;


    donc dans mon cas je devrais me retrouver avec ceci 

    var mondial_relay_belgique = document.getElementById("mondial_relay_belgique").value;
var poste_belgique= document.getElementById("poste_belgique").value;
var mondial_relay_france = document.getElementById("mondial_relay_france").value;
var poste_france = document.getElementById("poste_france").value;




    <!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">
    <meta name="author" content="1FORMATIK.com">
    <title>Comment créer un panier en JavaScript</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  </head>
<body>
<div class="container bg-light rounded">
<div class="row">
<div class="col-md-12 mt-3">
<div class="row mt-3">
<div class="col-md-4">
   
    

</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
       <img src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" style ="width: 150px;
height: 150px;" alt="canard"/>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <p>Produit 01 (8.00 €)</p>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <div class="col-md-4 text-end">
<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
    </div>
    </div>
</div>


</div>
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 02 (15.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="02">
 <option value="XS">XS</option>
 <option value="S">S</option>
 <option value="M">M</option>
 <option value="L">L</option>
 <option value="XL">XL</option>
 <option value="2XL">2XL</option>
 <option value="3XL">3XL</option>
 <option value="4XL">4XL</option>
</select>
</div>
<div class="col-md-6 text-end">
<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<p>Produit 03 (12.00 €)</p>
</div>
<div class="col-md-8 text-end">
<a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Votre commande</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
Nombre de produit(s) dans le panier : <span class="total-count"></span>
<br /><br />
<table width="100%" class="show-panier" id="macommande"></table>
<br />
<br />
<p>Select a maintenance drone:</p>

<div>
  <input type="radio" id="mondial_relay_belgique" name="envois" value="mondial_relay_belgique"
         checked>
  <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>

<div>
  <input type="radio" id="poste_belgique" name="envois" value="poste_belgique">
  <label for="poste_belgique">envois par poste belgique 4 euros</label>
</div>

<div>
  <input type="radio" id="mondial_relay_france" name="envois" value="mondial_relay_france">
  <label for="mondial_relay_france">Envois par mondial relay france 3 euros</label>
</div>

<div>
  <input type="radio" id="poste_france" name="envois" value="poste_france">
  <label for="poste_france">envois par poste france 2 euros</label>
</div>

<div>*Prix total: <b><span class="total-panier" id="prix_total">0.00</span> euros</b></div>
<br />
<i id="livraison-detail">*Livraison incluse</i>


<div class="text-end"><button class="clear-panier btn btn-danger">Vider le panier</button></div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Adresse de livraison</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<input class="form-control" type="text" name="nom" value="" id="nom" placeholder="Nom">
<br>
<input class="form-control" type="text" name="prenom" value="" id="prenom" placeholder="Prénom">
<br>
<input class="form-control" type="text" name="cp" value="" id="cp" placeholder="Code postal">
<br>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="Ville">
<br>
<input class="form-control" type="text" name="email" value="" id="email" placeholder="e-Mail">
<br>
<textarea class="form-control" id="message" placeholder="Message Optionnel"></textarea>
<br>
<div class="text-end"><button type="button" class="btn btn-success" id="commander">Commander</button></div>
<br>
<div id="qte_minimum_report"></div>
</div>
</div>
<div class="modal" id="mymodal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
<h5 class="modal-title">Commande confirmée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Merci de votre commande</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">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="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Une erreur est survenue</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  </div>
</div>
  </div>
</div>
</div>
<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>
<script>
function commander(nom,prenom,cp,email,commande,prix_total,message,ville){
$.ajax({
url : 'mail.php',
type : 'GET', 
data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville, 
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"){$('#mymodal_erreur').modal('show');}
}
});
}
$('#commander').click( function(){
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var cp = document.getElementById("cp").value;
var ville = document.getElementById("ville").value;
var email = document.getElementById("email").value;
var commande = JSON.stringify(panier);
var prix_total = document.getElementById("prix_total").innerHTML;
var message = encodeURIComponent(document.getElementById("message").value);
commander(nom,prenom,cp,email,commande,prix_total,message,ville);
});


// 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe

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_mondial_relay_belgique = 5; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4; 

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2; 

// 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(2));
}

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(2);
  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();
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<tr>"
      + "<td>" + panierArray[i].nom + "</td>" 
      + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
      + "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
      + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
      + " = " 
      + "<td>" + panierArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-panier').html(output);
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique  +" euros.";
  }
  
    if (Livraison == 3)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique  +" euros.";
  }
  
      if (Livraison == 4)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
  }
  
       if (Livraison == 5)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
  }
  
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
  }
  $('.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();

</script>
</body>
</html>
    0
  3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    je viens d essayer de cette manière
    mais le total ne s effectue pas et les frais de livraison non plus 

    <!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">
    <meta name="author" content="1FORMATIK.com">
    <title>Comment créer un panier en JavaScript</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  </head>
<body>
<div class="container bg-light rounded">
<div class="row">
<div class="col-md-12 mt-3">
<div class="row mt-3">
<div class="col-md-4">
   
    

</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
       <img src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" style ="width: 150px;
height: 150px;" alt="canard"/>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <p>Produit 01 (8.00 €)</p>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <div class="col-md-4 text-end">
<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
    </div>
    </div>
</div>


</div>
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 02 (15.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="02">
 <option value="XS">XS</option>
 <option value="S">S</option>
 <option value="M">M</option>
 <option value="L">L</option>
 <option value="XL">XL</option>
 <option value="2XL">2XL</option>
 <option value="3XL">3XL</option>
 <option value="4XL">4XL</option>
</select>
</div>
<div class="col-md-6 text-end">
<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<p>Produit 03 (12.00 €)</p>
</div>
<div class="col-md-8 text-end">
<a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Votre commande</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
Nombre de produit(s) dans le panier : <span class="total-count"></span>
<br /><br />
<table width="100%" class="show-panier" id="macommande"></table>
<br />
<br />
<p>Select a maintenance drone:</p>

<div>
  <input type="radio" id="mondial_relay_belgique" name="envois" value="mondial_relay_belgique"
         checked>
  <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>

<div>
  <input type="radio" id="poste_belgique" name="envois" value="poste_belgique">
  <label for="poste_belgique">envois par poste belgique 4 euros</label>
</div>

<div>
  <input type="radio" id="mondial_relay_france" name="envois" value="mondial_relay_france">
  <label for="mondial_relay_france">Envois par mondial relay france 3 euros</label>
</div>

<div>
  <input type="radio" id="poste_france" name="envois" value="poste_france">
  <label for="poste_france">envois par poste france 2 euros</label>
</div>




<div>*Prix total: <b><span class="total-panier" id="prix_total">0.00</span> euros</b></div>
<br />
<i id="livraison-detail">*Livraison incluse</i>


<div class="text-end"><button class="clear-panier btn btn-danger">Vider le panier</button></div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Adresse de livraison</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<input class="form-control" type="text" name="nom" value="" id="nom" placeholder="Nom">
<br>
<input class="form-control" type="text" name="prenom" value="" id="prenom" placeholder="Prénom">
<br>
<input class="form-control" type="text" name="cp" value="" id="cp" placeholder="Code postal">
<br>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="Ville">
<br>
<input class="form-control" type="text" name="email" value="" id="email" placeholder="e-Mail">
<br>
<textarea class="form-control" id="message" placeholder="Message Optionnel"></textarea>
<br>
<div class="text-end"><button type="button" class="btn btn-success" id="commander">Commander</button></div>
<br>
<div id="qte_minimum_report"></div>
</div>
</div>
<div class="modal" id="mymodal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
<h5 class="modal-title">Commande confirmée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Merci de votre commande</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">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="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Une erreur est survenue</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  </div>
</div>
  </div>
</div>
</div>
<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>
<script>
function commander(nom,prenom,cp,email,commande,prix_total,message,ville){
$.ajax({
url : 'mail.php',
type : 'GET', 
data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville, 
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"){$('#mymodal_erreur').modal('show');}
}
});
}
$('#commander').click( function(){
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var cp = document.getElementById("cp").value;
var ville = document.getElementById("ville").value;
var email = document.getElementById("email").value;
var commande = JSON.stringify(panier);
var prix_total = document.getElementById("prix_total").innerHTML;
var message = encodeURIComponent(document.getElementById("message").value);
commander(nom,prenom,cp,email,commande,prix_total,message,ville);
});


// 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe

//var Livraison = document.getElementById("poste_france").value;

if(document.getElementById("mondial_relay_belgique").value) {
  var Livraison = document.getElementById("mondial_relay_belgique").value;
}
else if(document.getElementById('poste_belgique').value) {
   var Livraison = document.getElementById("poste_belgique").value;
}
else if(document.getElementById('mondial_relay_france').value) {
   var Livraison = document.getElementById("mondial_relay_france").value;
}
else if(document.getElementById('poste_france').value) {
   var Livraison = document.getElementById("poste_france").value;
}


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

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_belgique = 5; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4; 

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2; 

// 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(2));
}

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(2);
  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();
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<tr>"
      + "<td>" + panierArray[i].nom + "</td>" 
      + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
      + "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
      + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
      + " = " 
      + "<td>" + panierArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-panier').html(output);
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique  +" euros.";
  }
  
    if (Livraison == 3)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique  +" euros.";
  }
  
      if (Livraison == 4)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
  }
  
       if (Livraison == 5)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
  }
  
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
  }
  $('.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();

</script>
</body>
</html>
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      bonjour,

      il me semble que cela n'a aucun sens de tester la valeur de la variable Livraison.

      Lis ici comment récupérer le radio bouton choisi. https://www.skillsugar.com/how-to-get-the-selected-radio-button-value-in-javascript

      Si tu préfères en français, tu peux faire une recherche "javascript récupérer valeur radio bouton".
      0
      1. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
         
        bonjour yg_be

        Merci pour la réponse et le lien très intéressant
        je viens d essayer de cette façon pour récupérer la value

        mais rien ne s affiche lorsque je choisis un mode d envois 

        var Livraison= document.querySelector('input[name="envois"]:checked').value;

console.log(Livraison);
        0
      2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
         
        c 'est bon je pense que cela fonctionne
        je confirme de suite
        0
  4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Malheureusement cela ne fonctionne pas
    j obtiens les frais d envois lorsque je bouge le checked du code html de ligne
    donc si je l ajoute a la première ligne j ai les frais d envois d la première ligne
    si je le place a la deuxième ligne j ai les frais d envois de la deuxième ligne

    voici le code html 
    <div>
  <input type="radio" id="mondial_relay_belgique" name="envois" value="2" >
  <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>

<div>
  <input type="radio" id="poste_belgique" name="envois" value="3" checked >
  <label for="poste_belgique">envois par poste belgique 4 euros</label>
</div>

<div>
  <input type="radio" id="mondial_relay_france" name="envois" value="4">
  <label for="mondial_relay_france">Envois par mondial relay france 3 euros</label>
</div>

<div>
  <input type="radio" id="poste_france" name="envois" value="5">
  <label for="poste_france">envois par poste france 2 euros</label>
</div>


    var Livraison= document.querySelector('input[name="envois"]:checked').value;

console.log(Livraison);
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Tu as bien mis les deux lignes de code dans une fonction en réaction à une action de l'utilisateur, de façon à ce que ce soit exécuté au bon moment?
      1

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

    Posez votre question
  6. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci pour la reponse
    je suis désolé mais je ne comprends pas trop ce que tu veux dire
    je redonne le code complet 

    <!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">
    <meta name="author" content="1FORMATIK.com">
    <title>Comment créer un panier en JavaScript</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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

  </head>
<body>
<div class="container bg-light rounded">
<div class="row">
<div class="col-md-12 mt-3">
<div class="row mt-3">
<div class="col-md-4">
   
    

</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
       <img src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" style ="width: 150px;
height: 150px;" alt="canard"/>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <p>Produit 01 (8.00 €)</p>
    </div>
    </div>
     <div class="row">
    <div class="col-sm">
     <div class="col-md-4 text-end">
<a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
    </div>
    </div>
</div>


</div>
<div class="row mt-3">
<div class="col-md-4">
<p>Produit 02 (15.00 €)</p>
</div>
<div class="col-md-2">
<select class="form-control" id="02">
 <option value="XS">XS</option>
 <option value="S">S</option>
 <option value="M">M</option>
 <option value="L">L</option>
 <option value="XL">XL</option>
 <option value="2XL">2XL</option>
 <option value="3XL">3XL</option>
 <option value="4XL">4XL</option>
</select>
</div>
<div class="col-md-6 text-end">
<a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<p>Produit 03 (12.00 €)</p>
</div>
<div class="col-md-8 text-end">
<a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" class="btn btn-primary ajouter-panier">ajouter au panier</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Votre commande</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
Nombre de produit(s) dans le panier : <span class="total-count"></span>
<br /><br />
<table width="100%" class="show-panier" id="macommande"></table>
<br />
<br />

<p>Select a maintenance drone:</p>

<div>
  <input type="radio" id="mondial_relay_belgique" name="envois" value="2" >
  <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>

<div>
  <input type="radio" id="poste_belgique" name="envois" value="3" >
  <label for="poste_belgique">envois par poste belgique 4 euros</label>
</div>

<div>
  <input type="radio" id="mondial_relay_france" name="envois" value="4" checked="checked">
  <label for="mondial_relay_france">Envois par mondial relay france 3 euros</label>
</div>

<div>
  <input type="radio" id="poste_france" name="envois" value="5">
  <label for="poste_france">envois par poste france 2 euros</label>
</div>




<div>*Prix total: <b><span class="total-panier" id="prix_total">0.00</span> euros</b></div>
<br />
<i id="livraison-detail">*Livraison incluse</i>


<div class="text-end"><button class="clear-panier btn btn-danger">Vider le panier</button></div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<h4>Adresse de livraison</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<input class="form-control" type="text" name="nom" value="" id="nom" placeholder="Nom">
<br>
<input class="form-control" type="text" name="prenom" value="" id="prenom" placeholder="Prénom">
<br>
<input class="form-control" type="text" name="cp" value="" id="cp" placeholder="Code postal">
<br>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="Ville">
<br>
<input class="form-control" type="text" name="email" value="" id="email" placeholder="e-Mail">
<br>
<textarea class="form-control" id="message" placeholder="Message Optionnel"></textarea>
<br>
<div class="text-end"><button type="button" class="btn btn-success" id="commander">Commander</button></div>
<br>
<div id="qte_minimum_report"></div>
</div>
</div>
<div class="modal" id="mymodal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
<h5 class="modal-title">Commande confirmée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Merci de votre commande</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">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="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>
  </div>
  <div class="modal-body">
<div id="commande_report">Une erreur est survenue</div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  </div>
</div>
  </div>
</div>
</div>
<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>
<script>
function commander(nom,prenom,cp,email,commande,prix_total,message,ville){
$.ajax({
url : 'mail.php',
type : 'GET', 
data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville, 
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"){$('#mymodal_erreur').modal('show');}
}
});
}
$('#commander').click( function(){
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var cp = document.getElementById("cp").value;
var ville = document.getElementById("ville").value;
var email = document.getElementById("email").value;
var commande = JSON.stringify(panier);
var prix_total = document.getElementById("prix_total").innerHTML;
var message = encodeURIComponent(document.getElementById("message").value);
commander(nom,prenom,cp,email,commande,prix_total,message,ville);
});



</script>
</body>
</html>


    et le panier en js 

    // 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe

//var Livraison = document.getElementById("poste_france").value;
//if (document.getElementById('r1').checked) {
  //rate_value = document.getElementById('r1').value;

//if(document.getElementById("mondial_relay_belgique").checked) {
  //var Livraison = document.getElementById("mondial_relay_belgique").value;
//}
//else if(document.getElementById('poste_belgique').checked) {
  // var Livraison = document.getElementById("poste_belgique").value;
//}
//else if(document.getElementById('mondial_relay_france').checked) {
  // var Livraison = document.getElementById("mondial_relay_france").value;
//}
//else if(document.getElementById('poste_france').checked) {
  // var Livraison = document.getElementById("poste_france").value;
//}

var Livraison= document.querySelector('input[name="envois"]:checked').value;

console.log(Livraison);


//var Livraison = document.querySelector('input[name="envois"]:checked').value;


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

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_belgique = 5; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4; 

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2; 

// 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(2));
}

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(2);
  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();
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<tr>"
      + "<td>" + panierArray[i].nom + "</td>" 
      + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
      + "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
      + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
      + " = " 
      + "<td>" + panierArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-panier').html(output);
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique  +" euros.";
  }
  
    if (Livraison == 3)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique  +" euros.";
  }
  
      if (Livraison == 4)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
  }
  
       if (Livraison == 5)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
  }
  
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
  }
  $('.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();
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Pourquoi as-tu choisi de mettre ce nouveau code à cet endroit, en lignes 32 et 34 de panier.js?
      Pourquoi pas ailleurs?
      Comprends-tu comment l'ensemble de ce programme fonctionne?
      1
  7. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci pour la reponse
    car l ancien code était a cet endroit
    ligne 15 que j ai modifie
    de 
    var Livraison =2;

    en pour les essais 
    //var Livraison = document.getElementById("poste_france").value;


    oui je pense savoir
    puisque j'ai déjà ajouter des lignes au niveau du panier
    de 40 a 53
    et de
    215 a 237
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      A quel moment le code que tu ajoutes doit-il s'exécuter?
      A l'endroit où tu l'as ajouté, à quel moment s'exécute-t-il?
      1
  8. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    il doit s'exécuter lorsque je choisis le mode de livraison

    je pense que tu veux me faire comprendre q il s'exécute trop tard ?

    pourtant je l ai place au même endroit que le précèdent d'origine...
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Tu veux qu'il s'exécute chaque fois qu'un des boutons radio est pressé? Est-ce utile? Pourquoi pas à la finalisatio du panier?

      Ne peux-tu pas déterminer quand il s'exécute, en regardant la console? Est-ce avant ou après le choix du mode de livraison?
      1
  9. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    Merci pour l aide
    en fait je désire que cela soit exécuter chaque fois que l'on presse sur le bouton radio
    car il y a toujours des gens qui changeront d avis suivant le total

    en fait des que je lance la page
    les frais de livraison sont mis automatiquement a cause du checked du code html
    Mais lorsque je clic sur un bouton les frais restent pareil
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Si tu veux programmer une action à chaque clic d'un élément tel qu'un radio bouton, tu peux utiliser onclick de façon à ce qu'une fonction soit exécutée à chaque clic.
      1
  10. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    en fait la seule chose que je désire c'est que l utilisateur puissent choisir un mode de livraison et que les frais puissent s ajouter
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Tu dois décider quand faire cela.
      Si tu veux le faire à chaque clic d'un bouton radio, ajoute onclick="ChoixLivraison()" dans la définition du bouton, et calcule les frais dans la fonction ChoixLivraison().
      1
    2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
       
      merci pour l aide
      je dois donc réaliser mon code html comme ceci par exemple 
      <div>
  <input type="radio" id="mondial_relay_belgique" name="envois" value="2" onclick="ChoixLivraison()"  >
  <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>

      et dans le code javascsript

      par contre comment je calcule les frais avec la fonction ChoixLivraison()
      0
    3. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      A la réflexion, il suffit peut-être d'appeller la fonction afficherpanier() à chaque clic du bouton radio.
      C'est alors dans cette fonction qu'il faut obtenir la valeur sélectionnée: 
      Livraison= document.querySelector('input[name="envois"]:checked').value;
      1
    4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
       
      Merci pour le code
      mais c'st toujours pareil c est la valeur du bouton avec checked qui est la valeur par défaut
      quoi que je puisse choisir
      0
    5. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      qu'as-tu programmé?
      0
  11. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    oui je comprends
    revoici le fichier js 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe

//var Livraison = document.getElementById("poste_france").value;
//if (document.getElementById('r1').checked) {
  //rate_value = document.getElementById('r1').value;

//if(document.getElementById("mondial_relay_belgique").checked) {
  //var Livraison = document.getElementById("mondial_relay_belgique").value;
//}
//else if(document.getElementById('poste_belgique').checked) {
  // var Livraison = document.getElementById("poste_belgique").value;
//}
//else if(document.getElementById('mondial_relay_france').checked) {
  // var Livraison = document.getElementById("mondial_relay_france").value;
//}
//else if(document.getElementById('poste_france').checked) {
  // var Livraison = document.getElementById("poste_france").value;
//}
//var Livraison= document.querySelector('input[name="envois"]:checked').value;

//console.log(Livraison);
var Livraison= document.querySelector('input[name="envois"]:checked').value;


//var Livraison = document.querySelector('input[name="envois"]:checked').value;


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

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_belgique = 5; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4; 

// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3; 

// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2; 

// 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(2));
}

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(2);
  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();
});

function afficherpanier(){
  var panierArray = MonPanier.listpanier();
  var output = "";
  for(var i in panierArray) {
    output += "<tr>"
      + "<td>" + panierArray[i].nom + "</td>" 
      + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
      + "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
      + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
      + " = " 
      + "<td>" + panierArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-panier').html(output);
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique  +" euros.";
  }
  
    if (Livraison == 3)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique  +" euros.";
  }
  
      if (Livraison == 4)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
  }
  
       if (Livraison == 5)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
  }
  
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
  }
  $('.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();
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      En #20, j'ai écrit qu'il fallait, dans la fonction afficherpanier(), obtenir la valeur sélectionnée, à l'aide de l'instruction suggérée.

      Je ne vois pas où tu as fait cela dans afficherpanier().
      1
  12. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    je pense que je m y perds totalement

    j ai bien ajouter afficherpanier() a chaque clic du bouton radio

    Mais ensuite je ne comprends pas trop ce que je dois faire
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Vois-tu dans ton code la déclaration d'une fonction nommée afficherpanier()?

      As-tu envisagé de commencer par des exercices simples en javascript?
      1
  13. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    non je ne pas de déclaration de fonction nommée afficherpanier()
    je suis en plein dans le php pour l instant avec lequel je me bat durement mdrrrrrr

    pour ce qui est du javascript c'est encore pire

    mais apparemment pour la déclarer
    serait a réaliser comme ceci 

    function afficherpanier(){
  Livraison= document.querySelector('input[name="envois"]:checked').value;
}
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      Prends peut-être un peu plus de temps pour examiner ton code.
      1
  14. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    ok
    merci pour ton aide
    0
  15. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    de tout ce que j'ai pu lire depuis tantôt
    on traite toujours du bouton checked qui est déjà coche des le départ
    mais j'ai pas encore trouve un sujet qui parle

    d une boucle qui passe les boutons en revue , afin de savoir ce que le bouton contient
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      as-tu examiné ton code, et trouvé la déclaration de la fonction nommée afficherpanier()?
      1
    2. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
       
      bonjour yg_be

      si je te disais que j'ai passé une nit blanche a chercher je suis sur et certain que tu me croirais pas et pourtant
      j'ai tente mille et un code que j'ai trouvé mais a chaque fois j'obtiens la valeur du bouton ou il y a checked

      Concernant ta solution
      la seule fonction que j ai trouve est celle ci dans laquelle j'ai ajouter la ligne 
      Livraison= document.querySelector('input[name="envois"]:checked').value;

      function afficherpanier(){
var panierArray = MonPanier.listpanier();
var output = "";
for(var i in panierArray) {
output += "<tr>"
+ "<td>" + panierArray[i].nom + "</td>"
+ "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
+ "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
+ "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
+ "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
+ " = "
+ "<td>" + panierArray[i].total + "</td>"
+ "</tr>";
}
Livraison= document.querySelector('input[name="envois"]:checked').value;
$('.show-panier').html(output);
if (Livraison == 1)
{
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
}
if (Livraison == 2)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique +" euros.";
}
if (Livraison == 3)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique +" euros.";
}
if (Livraison == 4)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
}
if (Livraison == 5)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
}
if (Livraison == 0)
{
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
}
$('.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 = "";
}

}
      0
    3. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      Contrairement à ce que tu écrivais le 5 janv. 2022 à 15:22, tu as donc bien une fonction nommée afficherpanier().

      Elle est bien exécutée chaque fois que tu cliques un des boutons?
      1
    4. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
       
      oui en effet mais j'ai pris le temps de bien regarder et je l ai trouvée

      lorsque le lance la page
      il y a déjà une erreur dans la console
      0
    5. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
       
      et si tu supprimes la ligne 273?
      0
  16. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    je m excuse c est encore le navigateur qui décorne
    plus de message d erreur
    par contre quoi que je puisse choisir comme frais de livraison
    c est toujours 0

    voici le dernier code j 
    // 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/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe
//var Livraison = document.getElementById("poste_france").value;
//var Livraison=2;

//var Livraison = document.querySelector('input[name="envois"]:checked').value;

//alert (Livraison);


//if (document.querySelector('poste_belgique').checked = true){
//var Livraison=5;
//}
//if (document.getElementById('poste_belgique').checked) {
//var Livraison=2;
//}
//if(document.getElementById("mondial_relay_belgique").checked) {
//var Livraison=3;
//}
//else if(document.getElementById('poste_france').checked) {
// var Livraison=4;
//}
//else if(document.getElementById('mondial_relay_france').checked) {
//var Livraison=5;
//}
//else if(document.getElementById('poste_france').checked) {
//var Livraison = document.getElementById("poste_france").value;
//}
//var Livraison= document.querySelector('input[name="envois"]:checked').value;
//console.log(Livraison);
//var Livraison = document.querySelector('input[name="envois"]:checked').value;
// % du prix total total correspondant au prix de la livraison


//const Livraison = Number(document.querySelector("input[type='radio'][name='envois']:checked").value);


var Poucentage_Livraison = 25;
// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_belgique = 5;
// Forfait de la livraison en euro
var Forfait_Livraison_poste_belgique = 4;
// Forfait de la livraison en euro
var Forfait_Livraison_mondial_relay_france= 3;
// Forfait de la livraison en euro
var Forfait_Livraison_poste_france= 2;
// 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(2));
}
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(2);
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();
});
function afficherpanier(){
var panierArray = MonPanier.listpanier();
var output = "";
for(var i in panierArray) {
output += "<tr>"
+ "<td>" + panierArray[i].nom + "</td>"
+ "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>"
+ "<td class='form-inline'><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' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
+ "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>"
+ "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>"
+ " = "
+ "<td>" + panierArray[i].total + "</td>"
+ "</tr>";
}
$('.show-panier').html(output);
if (Livraison == 1)
{
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
}


Livraison= document.querySelector('input[name="envois"]:checked').value;


if (Livraison == 2)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique +" euros.";
}
if (Livraison == 3)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique +" euros.";
}
if (Livraison == 4)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros.";
}
if (Livraison == 5)
{
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros.";
}
if (Livraison == 0)
{
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(2));
}
$('.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();


    et le code du menu html pour les livraisons 

    <p>Select un mode de livraison :</p>
<div>
<input type="radio" id="mondial_relay_belgique" name="envois" value="2" afficherpanier()  >
<label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label>
</div>
<div>
<input type="radio" id="poste_belgique" name="envois" value="3" afficherpanier()  >
<label for="poste_belgique">envois par poste belgique 4 euros</label>
</div>
<div>
<input type="radio" id="mondial_relay_france" name="envois" value="4" checked="checked" afficherpanier()  >
<label for="mondial_relay_france">Envois par mondial relay france 3 euros</label>
</div>
<div>
<input type="radio" id="poste_france" name="envois" value="5" afficherpanier() >
<label for="poste_france">envois par poste france 2 euros</label>
</div>
    0
    1. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588
       
      moi j'ajouterais: 
      console.log("Livraison: " + Livraison);
      afin de vérifier ce qui se passe.

      Je trouve que la ligne 201 est bizarrement positionnée: pourquoi pas avant la ligne 194?
      1
      1. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
         
        Merci pour ton aide
        désolé je rentrais du bois

        alors c'est vrai que j avais mal positionne le code
        j'ai donc tout reis avant la ligne 194 

        Livraison= document.querySelector('input[name="envois"]:checked').value;
console.log("Livraison: " + Livraison);


        Mais lorsque je nettoie le navigateur et que je choisi un mode de livraison cela est toujours a 0 et rien ne s affiche dans la console
        0
      2. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
         
        Tiens, les 
        onclick=
        ont disparu.
        1
      3. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention  
         
        oui juste je viens de les remettre , c est surement avec les essais que j'ai effectue cette nuit
        voici ce que la console me rapporte lorsque je clic dessus

        0
      4. yg_be Messages postés 23437 Date d'inscription   Statut Contributeur Dernière intervention   1 588 > flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention  
         
        Comme écrit le 5 janv. 2022 à 13:51, il suffit peut-être d'appeller la fonction afficherpanier() à chaque clic du bouton radio.

        Donc: 
        onclick="afficherpanier()"
        .
        0
  17. Tomhate
     
    Salut,
    où est définit(créé) la valeur(ou fonction?) ChoixLivraison?
    Je vois la valeur (variable) Livraison mais pas de ChoixLivraison, aurais je mal lu? Parce que le programme ne la trouve pas non plus. Une erreur quand vous avez fait des modifications et non remis toutes les lignes du code?

    L'idée est de récupérer la valeur au moment où celle ci est changée quand l'utilisateur choisit le mode de livraison ou alors il faut faire comme on vous a dit au début (ce qui paraît plus logique) et le faire quand le formulaire est validé ce qui a aussi l'avantage de séparer le tarif total des articles du choix du mode de livraison.

    Pour comprendre le principe voici un exemple plus simple du cas d'attribuer la valeur de la variable au moment du changement (avec un onChange sur un select mais on peut très bien le faire sur un clic si on veut et bien sûr avec des boutons radio si on veut)

    https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

    Assurez vous d'avoir compris cette partie particulière du programme avant de l'intégrer à l'ensemble et d'ajouter la partie en AJAX qui fait appel au serveur PHP.

    Le principe c'est qu'une partie du programme(un bout de code) est intégré à la logique globale(algorithme qui est la logique complète permettant d'arriver au but/fonctionnalité finale) comme des briques(ou plutôt des embranchements/événements possibles) qui permettent d'arriver à une logique humaine à partir de raisonnement plus simpliste(donc accessible à un ordinateur).

    Je veut dire que avant d'arriver au raisonnement de l'ensemble il faut s'assurer d'avoir compris chaque partie du programme(son rôle et son utilisation dans des séquences/objets et/ou lors d'événements-un clic souris-) pour pouvoir les assembler.

    note sur les concepts de base de la programmation:
    "mais lorsque je place en commentaire ces 4 variables"

    Non il n'y a pas 4 variables mais 4 valeurs possibles pour la même variable ce qui est nettement différent. Si vous n'avez pas compris le principe d'attribution des variables(la variable et le conteneur , la valeur ce qui est contenu dedans) et celui des fonctions(qui cas exceptionnel du JavaScript est très similaire aux variables ou plutôt l'inverse) je comprends que vous ayez des difficultés à comprendre les autres concepts qui en découlent(leur utilisation).

    De la même manière:

    "par exemple si il choisi mondial relay Belgique que la VAR livraison puisse contenir 2
    que si il choisit poste belgique que la VAR livraison puisse contenir 3
    que si il choisit mondial relay france que la VAR livraison puisse contenir 4
    que si il choisit la poste france que la VAR livraison puisse contenir 5 "

    Une variable par définition peut contenir ce qu'on veut(en tout cas en JavaScript qui est un langage de programmation non typé ). Ce n'est qu'une boîte qui peut être crée vide(et c'est souvent le cas par convention et de manière pratique pour regrouper toutes les variables ensemble pour lire et comprendre plus facilement le fonctionnement du programme).
    Donc la valeur 2,3,4,5 n'a pas à être considéré dans le programme(cela pourrait être 10, 15, 22 le programme fonctionnerait pareil) mais uniquement qu'une variable du programme contient une valeur numérique qui sera utilisée (une fois attribuée c'est à dire que sa valeur est définie - comme dans l'exemple en lien -) quelque que soit la valeur (et ici pour une simple addition).

    De la même manière si vous comprenez d'où vient la valeur 0 de cette variable dans votre programme vous comprendrez comment attribuer une autre valeur à cette variable(2,3,4 ou 5 ou n'importe quel nombre que l'on veut).
    Il faut suivre l'enchainement des commandes successives(ou pas si on utilise un événement comme le clic il peut se produire à n'importe quel moment donc hors de toute chaîne mais pas hors de la logique de l'ensemble du programme nommé algorithme).

    J'espère être clair et vous aider parce que vous n'avez pas la bonne logique(les bases et l'algorithme qui définit les étapes successives pour arriver au but voulu).

    Peut-être l'exemple que vous avez pris est un peu complexe pour vos connaissances, c'est pour cela que j'ai mis un exemple qui ne traite qu'une partie de la logique complète: le onChange qui attribue à une variable une valeur en texte qui est ensuite utilisé par le programme pour être affichée dans la page.
    Si vous avez cette notion(qui est le cœur de votre question/problème: attribuer à une variable une valeur en fonction de quelle case est cochée) le reste est nettement plus évident à faire, en tout cas il ne reste plus grand chose(faire l'addition et l'afficher puis utiliser le total obtenu pour l'envoyer au serveur où PHP va prendre le relais)
    0
    1. Tomhate
       
      Pour compléter l'explication des principes en programmation:
      l'informatique veut dire que les éléments sont informels, une variable est traitée en tant que variable, cela veut dire que ce n'est pas la valeur mais le rôle qui lui est dévouée(indiquer la valeur d'un choix multiple quelle que soit cette valeur).
      Le formalisme est dans la logique mathématique(math de Boole) et algorithmique (organisation de différents "blocs de code" qui dans leur ensemble permettent un résultat final/concept humain à partir de raisonnements nettement plus simplistes, exemple: la variable marqueVoiture a pour valeur "Mercedes"), la syntaxe et autres règles des éléments et leur utilisations(ex: l'attribution d'une valeur à une variable, récupérer une valeur notée dans le HTML - qui lui ne possède pas de variable mais uniquement des valeurs et autres possibilités/concepts utiles).
      1
      1. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190 > Tomhate
         
        Merci pour cette explication
        tout cela semble tellement logique que l'on s'y perds souvent
        0
  18. flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   190
     
    waouhhhhhhh enfin
    un très très grand merci

    cela fonctionne enfin c est vraiment génial

    je souhaiterais quand même tirer un coup de gueule pour le non respect de toutes les personnes qui sont aidées et qui ne font aucun retour

    Lorsque je vois le nombre de personnes aidées et le peu de retour ca me rends malade
    0

Discussions similaires

quel est la différence absolu et relative
chacha -
Cass -

9 réponses
vérifiez la variable d'environnement TEMP
erwan38 -
F4 -

72 réponses
additionner nombres dans cellules avec texte
kawimaki -
kawimaki -

6 réponses
Copier automatiquement la valeur d'une cellule
mj1974 -
mj1974 -

5 réponses
Cellules en surbrillance selon une TextBox
Wyrgle -
jordane45 -

1 réponse