Assigner une valeur a une variable suivant un choix

Résolu/Fermé

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 5 janv. 2022 à 08:49
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 6 janv. 2022 à 13:08

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>

A voir également:

Assigner une valeur a une variable suivant un choix
Liste déroulante de choix excel - Guide
Attribuer une valeur à une cellule texte excel ✓ - Forum Excel
Affecter la valeur d'une cellule à une variable vba ✓ - Forum Bureautique
Excel renvoyer la valeur d'une cellule en fonction d'une autre - Forum Logiciels
Formule excel si contient texte alors valeur ✓ - Forum Excel

17 réponses

Réponse 1 / 17

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
5 janv. 2022 à 08:59

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.

Réponse 2 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 5 janv. 2022 à 09:28

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>

Réponse 3 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 09:55

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>

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 10:13

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".

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179 > yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024
5 janv. 2022 à 10:22

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);

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179 > flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024
5 janv. 2022 à 10:29

c 'est bon je pense que cela fonctionne
je confirme de suite

Réponse 4 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 5 janv. 2022 à 10:52

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);

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 11:25

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?

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

Posez votre question

Réponse 5 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 5 janv. 2022 à 11:36

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 11:49

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?

Réponse 6 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 11:58

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 12:02

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?

Réponse 7 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 12:08

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...

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 12:18

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?

Réponse 8 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 5 janv. 2022 à 13:02

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 13:17

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.

Réponse 9 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 13:20

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
Modifié le 5 janv. 2022 à 13:31

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().

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()

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471 > flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024
5 janv. 2022 à 13:51

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;

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

qu'as-tu programmé?

Réponse 10 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 14:26

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 15:00

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().

Réponse 11 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 15:07

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 15:16

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?

Réponse 12 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 15:22

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;
}

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
5 janv. 2022 à 15:40

Prends peut-être un peu plus de temps pour examiner ton code.

Réponse 13 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
5 janv. 2022 à 15:41

ok
merci pour ton aide

Réponse 14 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 5 janv. 2022 à 23:47

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

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
6 janv. 2022 à 08:31

as-tu examiné ton code, et trouvé la déclaration de la fonction nommée afficherpanier()?

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 = "";
}

}

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?

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

et si tu supprimes la ligne 273?

Réponse 15 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
6 janv. 2022 à 10:19

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>

yg_be Messages postés 22707 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 19 avril 2024 1 471
6 janv. 2022 à 10:34

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?

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

Tiens, les

onclick=

ont disparu.

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

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()"

Réponse 16 / 17

Tomhate
Modifié le 6 janv. 2022 à 12:48

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)

Tomhate
Modifié le 6 janv. 2022 à 12:59

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).

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179 > Tomhate
6 janv. 2022 à 13:08

Merci pour cette explication
tout cela semble tellement logique que l'on s'y perds souvent

Réponse 17 / 17

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
6 janv. 2022 à 12:54

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

Discussions similaires

programme qui n'affiche pas le mot secret

ou sont les bananes ?

Problème de restrictions

[EXCEL] - Attribuer une valeur numérique à un mot

VBA : Range avec références variables..

Discussions similaires

Newsletters