11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Besoin d aide pour modifier mon panier

bonjour a tous
je pensais ne plus devoir demander de l aide
Mais malheureusement mes connaissances en javascript sont encore trop limite
pourtant cela fait presque 2 jours que je cherche

J'ai donc mon fameux panier qui fonctionne
Mais dont j'essaye de l améliorer encore un peu

pour l'instant on peux ajouter les articles un a a un dans le panier
il n'y a pas un select pour choisir la quantité
donc si un utilisateur veux 30 fois le même article
il va devoir cliquer 30 fois

J'ai essaye de comprendre le code et j'ai déjà un peu modifié le code
avec un select dans le html

et une modification dans le javascript (déjà un bon début) Smiley biggrin
j'ai commence avec deux articles diffèrent pour faire un test
le premier select fonctionne bien et donc si je choisis 5
j'ai bien 5 articles dans ma console
par contre si l utilisateur change d'avis et qu 'il indique 5
le total du panier s'incrémente de 1
si il change encore d'avis et indique 3
le compteur s'incrémente de 1 et donc cela fait 7 car 5+1+1

donc j'ai un soucis au niveau de l incrémentation

d'anvance un grand merci

voici la mini partie du thml pour le select 
  <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="01">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
        </select>
      </div>
      <div class="col-md-6 text-end">
        <a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="01" class="btn btn-primary ajouter-panier">Add to Cart</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="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</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">Add to Cart</a>
      </div>
    </div>


et voici une partie du panier 

var Livraison = 3;



// 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 ++;
console.log(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;
  console.log(panier[item].quantite);
}
return totalquantite;
}

obj.totalpanier = function() {
var totalpanier = 0;
for(var item in panier) {
  totalpanier += panier[item].prix * panier[item].quantite;
  console.log(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;
  var test =document.getElementById(""+$(this).data('select')+"").value ;
  //MonPanier.ajouter_produit_dans_panier(nom, prix, 1);ancien code
  MonPanier.ajouter_produit_dans_panier(nom, prix, test);
  afficherpanier();
  console.log(test );
});
Modérateur
Bonjour,

Il est censé marcher partiellement, ce code ?

Chez moi ça ne fait rien du tout (apparement). Et vu sa longueur, je ne me suis pas encore lancé dans un déboggage.

Amicalement,
Modifié par parsimonhi (22 Jan 2022 - 21:38)
bonjour

Merci pour la réponse
je ne souhaitais pas mettre trop de code et je pensais qu'avec cette partie cela serait suffisant

mais voici le code total du panier 

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

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

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

// 0 pour désactiver l'ajout du prix de la livraison
// 1 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un pourcentage du prix total
// 2 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe
// 3 pour activer la fonctionnalité de choix du transporteur avec prix différents selon le choix
var Livraison = 3;

// % du prix total total correspondant au prix de la livraison
var Poucentage_Livraison_opposse = 0.25;
var Poucentage_Livraison = 0.75;
var Poucentage_Livraison_affichee = 25;
// Forfait de la livraison en euro
var Forfait_Livraison = 1;

// les messages concernant la fonctionnalité de commande par lot
var txt_qte_minimum_bad = "<font color='red'>Attention les quantités ne sont pas correctes, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits</font>";
var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correcte</font>";
var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits";

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

function savepanier() {
sessionStorage.setItem('MonPanier', JSON.stringify(panier));
}

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

var obj = {};

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

obj.setquantiteForItem = function(nom, quantite) {
for(var i in panier) {
  if (panier[i].nom === nom) {
panier[i].quantite = quantite;
console.log(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;
  console.log(panier[item].quantite);
}
return totalquantite;
}

obj.totalpanier = function() {
var totalpanier = 0;
for(var item in panier) {
  totalpanier += panier[item].prix * panier[item].quantite;
  console.log(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;
  var test =document.getElementById(""+$(this).data('select')+"").value ;
  MonPanier.ajouter_produit_dans_panier(nom, prix, test);
  afficherpanier();
console.log( test);
});

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

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

function afficherpanier() {
  var panierArray = MonPanier.listpanier();
  var output = "";
    var countart=0;
    var countart2=0;
  var count=0;
     for(var i in panierArray) {
             output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
        + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"     
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
            //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
       +  "</div>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
}

  $('.show-panier').html(output);

  if (Livraison == 3)
  {
     // % du prix total total correspondant au prix de la livraison
const cases = document.querySelectorAll('input[name="choix_livraison"]');
//const cases = document.querySelectorAll('input[name="ajout");
for (const x of cases) {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;
//console.log(panierArray[i] );

let prix_et_livraison = (( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
document.getElementById('amount').value = prix_et_livraison ;

$('.total-panier').html(prix_et_livraison.toFixed(2));

document.getElementById('livraison-detail').innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;visibility:hidden;'> (" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)</div>";

document.getElementById('remise').innerHTML =MonPanier.totalpanier()*Poucentage_Livraison_opposse ;

document.getElementById('nouveau_prix').innerHTML =(MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse));

document.getElementById('frais-fixe').innerHTML =Forfait_Livraison ;

document.getElementById("prix_depart").innerHTML  = MonPanier.totalpanier(); 

document.getElementById("countart_bas").innerHTML = countart;
break;
  }
  }
  }

  $('.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();


De mon cote je continue a chercher

amicalement
Modifié par flexi2202 (22 Jan 2022 - 22:31)
Modérateur
Bonjour,

flexi2202 a écrit :
je ne souhaitais pas mettre trop de code et je pensais qu'avec cette partie cela serait suffisant

Si on a qu'une partie du code, et qui en plus n'est pas la partie où on voit quelque chose, comment veux-tu qu'on trouve ?

Tu ne penses toute de même pas qu'on lit le code en une fois et qu'on se dit : "ha tiens, c'est là que ça va pas !" Smiley lol Smiley lol Smiley lol

Quand c'est un code d'une dizaine de lignes, c'est faisable, mais pas sur un code de 100 ou 200 lignes !

Amicalement,
bonsoir parsimonhi
Merci pour ta réponse

c'est tellement que je suis nul et que mon regard et mon attention ce sont arrêtés sur ce morceau de code

je pensais que tout ce qui concerne les quantités se trouvait la .... Smiley confused

Je viens encore de faire un essai mais ca ne fonctionne toujours pas Smiley decu

une chance que ce forum existe pour aider des personnes perdue comme moi Smiley eek

Amicalement
Bonsoir
ok pas de soucis cela est déjà super génial de m aider dans la finalisation de ce panier Smiley biggrin

a demain soir Smiley biggrin

Amicalement
Modérateur
Bonjour,

J'ai fini par aller voir le code d'origine de l'exemple du panier, car je m'en sortais pas avec ce que j'ai supposé être des essais de ta part.

Il prévoit bien l'histoire des quantités, mais pour que ça marche, il me semble qu'il faut que tu t'inspires du <select> pour le produit 03 et non pas le <select> du produit 02 comme dans le code que tu nous as montré. Si tu regardes attentivement le code d'exemple qu'il y a sur son site, tu verras la présence de onchange="changeQte(this);" dans le <select>. Sans l'utilisation de cette fonction (ou d'un équivalent), ça ne peut pas fonctionner comme attendu quand on a un produit dont le <select> doit changer les quantités. Je pense que c'est (au moins en partie) l'origine de tes problèmes.

Amicalement,
bonjour parsimonhi

Merci pour ta réponse
Je viens en effet de voir qu'une nouvelle mise a jour a été effectuée par l'auteur
Cette select du produit 3 n'existait pas dans la version précédente

Mais cela ne fonctionne pas correctement Smiley sweatdrop
car lorsque tu choisi quantité 3 cela ajoute bien 3
Mais si pas la suite tu changes d'avis et que tu veux mettre 1
le panier s' affiche a 4
en effet cela s additionne donc 3+1 ce qui est illogique
si tu sélectionne 3 il y a 3 dans le panier
si tu sélectionne 1après
il devrait avoir 1 et non pas 4

Amicalement
Modérateur
Bonjour,

flexi2202 a écrit :
Mais cela ne fonctionne pas correctement Smiley sweatdrop
car lorsque tu choisi quantité 3 cela ajoute bien 3
Mais si pas la suite tu changes d'avis et que tu veux mettre 1
le panier s' affiche a 4
en effet cela s additionne donc 3+1 ce qui est illogique
si tu sélectionne 3 il y a 3 dans le panier
si tu sélectionne 1après
il devrait avoir 1 et non pas 4

1) Bizarre ! Quand je mets 3, il ajoute 3, et quand je mets 1 ensuite si je change d'avis, il affiche bien 1.

2) Il n'est pas clair que ce que tu souhaites (et qui me semble bien être ce qu'il fait) soit le plus logique. Car le bouton dit "Ajouter au panier". Certains acheteurs vont donc s'attendre à ce que ça s'ajoute dans le panier. Il faudrait peut-être suggérer à l'auteur que quand il y a déjà quelque chose dans le panier concernant ce produit, le bouton "Ajouter dans le panier" change de libellé et devienne "Remplacer dans le panier".

Amicalement,
Meilleure solution
Bonjour

ah oui cela fonctionne a présent
il a refais une mise a jour entre temps
on est a la version 1.1 hier cela était la 1

Oui en effet c'est vrai que ce bouton ajouter n 'est plus très clair et bien évidement cela peux porter a confusion

ton idée est super bonne , je vais lui en faire part

ou alors il est possible d 'indiquer sur la ligne quantité 3 , un message du style
déjà 3 sachets de perles dans votre panier
par exemple
Modifié par flexi2202 (23 Jan 2022 - 17:54)
Sujet clos
Aller à