Ajouter une image à mon panier

Bonjour a tous
j'ai un panier fonctionnel avec 300 articles et 1 photo par article
Lorsque un membre ajoute un article dans le panier
le nom , la quantité et le prix sont récupéré et sont affiché dans le code html du panier
Mais j'aurais souhaiter ajouter l'image de l'article
pour l'instant j'ai ceci
Pièce jointe 613044

Attention ce code ne viens pas de moi ...je suis trop nul pour ça

Dans mon code html pour chaque article j'ai ceci

Code:

<a style="cursor:pointer; margin-bottom: 5px;" data-nom="2546" data-prix="1" data-qte="1" data-checkbox="2546" class="btn btn-primary ajouter-panier" onclick="ouvreMaJolieAlert(event);">ajouter au panier</a>

et donc cote javascript je récupère
la quantité
le nom
et le prix

voici l'extrait de code du panier

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
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) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					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 += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}
 
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		return Number(totalpanier.toFixed(decimal));
	}
 
	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(decimal);
			panierCopy.push(itemCopy)
		}
		return panierCopy;
	}
 
	return obj;
})();
 
function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
	//	let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    //	data_qte.removeAttribute("data-qte");
    //	data_qte.setAttribute("data-qte", ""+qte+"");
	//var qte = element.value;
	//var t = $(element);
	//var label = t.attr("aria-label");
	//let data_qte =  document.querySelector("[data-nom='"+ label +"']");
	//data_qte.removeAttribute("data-qte");
	//data_qte.setAttribute("data-qte", ""+qte+"");
 
}
 
 
$('.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);
	if ($(this).attr('data-qte'))
	{
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix, 1);
	afficherpanier();
});
 
$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});
 
$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});
 
function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 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
       console.log(panierArray[i].quantite );
       console.log(countart );
       console.log(countart2 );
	}

j'avais pensé a ajouter un data-imager dans le html

et ensuite modifier le code cette façon

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
var MonPanier = (function() {
	panier = [];
	function Item(nom, prix, quantite,imager) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.imager = imager;
	}
 
	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,image) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					panier[item].quantite ++;
				}
				savepanier();
				return;
			}
		}
		var item = new Item(nom, prix, quantite,imager);
		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 += Number(panier[item].quantite);
		}
		return Number(totalquantite);
	}
 
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
		return Number(totalpanier.toFixed(decimal));
	}
 
	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(decimal);
			panierCopy.push(itemCopy)
		}
		return panierCopy;
	}
 
	return obj;
})();
 
function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
	//	let data_qte =  document.querySelector("[data-nom='"+ label +"']");
    //	data_qte.removeAttribute("data-qte");
    //	data_qte.setAttribute("data-qte", ""+qte+"");
	//var qte = element.value;
	//var t = $(element);
	//var label = t.attr("aria-label");
	//let data_qte =  document.querySelector("[data-nom='"+ label +"']");
	//data_qte.removeAttribute("data-qte");
	//data_qte.setAttribute("data-qte", ""+qte+"");
 
}
 
 
$('.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);
	if ($(this).attr('data-qte'))
	{
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix,imager, qte_option);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix,imager, 1);
	afficherpanier();
});
 
$('.clear-panier').click(function() {
	MonPanier.clearpanier();
	afficherpanier();
});
 
$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});
 
function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 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].imager + "</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
       console.log(panierArray[i].quantite );
       console.log(countart );
       console.log(countart2 );
	}

vous en pensez quoi