Modifier mon panier

Version imprimable

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'avance un grand merci

voici la mini partie du html pour le select

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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 );
});

Bonjour,

D'après ce que je vois, le code été adapté aux cases à cocher (checkbox) et maintenant tu veux les remplacer par des <select>.

D'abord, je crois que la première liste est liée au "Produit 1" (et pas 2 comme c'est montré dans le code HTML)

et donc l'attribut data-nom du premier bouton est à corriger : <a style="cursor:pointer;" data-nom="Produit 01" ...... ></a>.

La méthode setquantiteForItem() permet d'actualiser la quantité de chaque item, il faut donc l'utiliser lorsqu'on modifie la valeur du select, donc sur l'événement change :
Code:

1 2 3 4 5 6 7 $('#01,#02').change(function() { let nom = $('[data-select="' + $(this).attr('id') + '"]').data('nom'), qte = $(this).val(); MonPanier.setquantiteForItem(nom, qte); console.log('refresh panier :', MonPanier.listpanier()); });
Corriger aussi la méthode ajouter_produit_dans_panier en supprimant l'incrémentation de la quantité, et recalculer le total à chaque ajout :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 obj.ajouter_produit_dans_panier = function(nom, prix, quantite) { for (var item in panier) { if (panier[item].nom === nom) { panier[item].quantite=quantite; panier[item].total=Number(quantite*prix).toFixed(2); console.log(panier[item].quantite); savepanier(); return; } } var produit = new Item(nom, prix, quantite); produit.total = Number(prix * quantite).toFixed(2); panier.push(produit); savepanier(); }
Puis l'ajout du produit au panier devient :
Code:

1 2 3 4 5 6 7 8 9 10 $('.ajouter-panier').click(function(event) { event.preventDefault(); var nom = $(this).data('nom'); var prix = Number($(this).data('prix')) ; var qte =document.getElementById($(this).data('select')).value ; MonPanier.ajouter_produit_dans_panier(nom, prix, qte); console.log('panier :',panier); //afficherpanier();//cette fonction est indéfinie ... });

23/01/2022, 08h11
flexi2202

bonjour
tout d abord un immense merci de bien vouloir t'occuper de mon problème c'est génial

les casses a cocher j'en ai pas besoin

j'ai juste besoin du select

Mais lors de l exécution j'ai une erreur dans ma console et cela se produit bien évidement dans une partie du code que je n'ai pas posté car je ne pensais que cela aurait pu avoir une telle influence ...

Dans le même temps je vois que l'auteur a fait une mise a jour sur son site et a ajouter ce fameux select , donc cela peux faciliter les choses

je te laisse le découvrir

https://www.1formatik.com/scripts/panier/

Mais malheureusement

Le select ne fonctionne pas normalement

en effet si on choisi 3 comme quantité le panier affiche bien 3
Mais si l utilisateur change d'avis et choisi 1
Le panier affiche 4(3+1)
si il change encore d'avis et choisi 2
Le panier affiche 6 (3+1+2)

je lui ai envoyé un message ...

il faudrait que le panier de l article soit réinitialiser avec la nouvelle valeur en quantité

Je ne vois pas l utilité de reposter le code entier du panier puisque l auteur a modifié le code pour intégrer ce fameux select
23/01/2022, 14h35
Toufik83

Bonjour,

j'ai testé mon code avant de le poster, et je n'avais aucune erreur.

Est ce que tu as fait les modifications que je t'ai proposé dans ma réponse ou pas ?

Seule la fonction afficherpanier() qui pourrait générer une erreur vu que tu ne l'as pas mis dans ton premier post.

bonjour

Merci pour la réponse et ton aide

en effet l erreur venait de afficherpanier()
c'est vrai que je ne l avais pas poster car je ne pensais que cela irait jusqu' a affecter ce code

voici le code en entier si tu veux bien y jeter un oeil merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
// 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].quantite=quantite;
	panier[item].total=Number(quantite*prix).toFixed(2);
        console.log(panier[item].quantite);
        savepanier();
        return;
      }
    }
    var produit = new Item(nom, prix, quantite);
    produit.total = Number(prix * quantite).toFixed(2);
    panier.push(produit);
    savepanier();
  }
 
 
$('#01,#02').change(function() {
  let nom = $('[data-select="' + $(this).attr('id') + '"]').data('nom'),
    qte = $(this).val();
  MonPanier.setquantiteForItem(nom, qte);
  console.log('refresh panier :', MonPanier.listpanier());
});
 
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 = $(this).data('nom');
  var prix = Number($(this).data('prix')) ;
  var qte =document.getElementById($(this).data('select')).value ;
  MonPanier.ajouter_produit_dans_panier(nom, prix, qte);	
  console.log('panier :',panier);
  //afficherpanier();//cette fonction est indéfinie ...
});
 
$('.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;
  }
  }
  }
  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).toFixed(2));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Forfait_Livraison +" 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();

24/01/2022, 10h49
Toufik83

Bonjour,

Il va falloir modifier la fonction afficherpanier() et supprimer toutes les instructions liées aux <checkbox>.
24/01/2022, 17h20
flexi2202

bonjour

Merci de ton aide
Mais dans ce cas on va choisir la facilite
je vais prendre le panier dont l'auteur a fait une nouvelle version