bonsoir a tous
Je m'aperçois avec l'utilisation que mon panier manque d'une image qui devrait être envoyé dan le manier en javascript
De nouveau je me tourne vers vous pour vous demander de 'aide
j'ai effectue la correction , mais je doute que cela soit bon
voici donc ce que j'ai pour l'instant a chaque fois que j'ajoute un article dans mon panier
https://zupimages.net/up/22/06/n9jp.jpg
je souhaiterais donc sur chaque ligne ajouter l'image du produit qui pourrait s'agrandir lors d'un clic
Attention ce code ne viens pas de moi ...je suis trop nul pour ça
Dans mon code html pour chaque article j'ai ceci
donc on récupère bien le nom , le prix et la quantité du checkbox
Mais comment y ajouter l'image ?
j'ai essayé data-image ...
voici le code source
voici comment je pense le modifier
Amicalement
Je m'aperçois avec l'utilisation que mon panier manque d'une image qui devrait être envoyé dan le manier en javascript
De nouveau je me tourne vers vous pour vous demander de 'aide
j'ai effectue la correction , mais je doute que cela soit bon
voici donc ce que j'ai pour l'instant a chaque fois que j'ajoute un article dans mon panier
https://zupimages.net/up/22/06/n9jp.jpg
je souhaiterais donc sur chaque ligne ajouter l'image du produit qui pourrait s'agrandir lors d'un clic
Attention ce code ne viens pas de moi ...je suis trop nul pour ça
Dans mon code html pour chaque article j'ai ceci
<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>
donc on récupère bien le nom , le prix et la quantité du checkbox
Mais comment y ajouter l'image ?
j'ai essayé data-image ...
voici le code source
//on cree la variable MonPanier
var MonPanier = (function() {
panier = [];
//fonction
function Item(nom, prix, quantite) {
this.nom = nom;
this.prix = prix;
this.quantite = quantite;
}
//la fonction qui sauve le panier
function savepanier() {
sessionStorage.setItem('MonPanier', JSON.stringify(panier));
}
//la fonction qui lit le panier
function loadpanier() {
panier = JSON.parse(sessionStorage.getItem('MonPanier'));
}
if (sessionStorage.getItem("MonPanier") != null) {
loadpanier();
}
//on cree la variable obj
var obj = {};
//on cree l objet ajouter_produit_dans_panier
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();
}
//on cree le nom et la quandite
obj.setquantiteForItem = function(nom, quantite) {
for(var i in panier) {
if (panier[i].nom === nom) {
panier[i].quantite = quantite;
break;
}
}
};
//on cree l objet enlever_produit_de_panier
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();
}
//on cree lobjet enleve tous les produits
obj.enlever_produit_de_panier_tous = function(nom) {
for(var item in panier) {
if(panier[item].nom === nom) {
panier.splice(item, 1);
break;
}
}
savepanier();
}
//on cree l objet clear panier
obj.clearpanier = function() {
panier = [];
savepanier();
}
//on cree l'objet qtotaluantite
obj.totalquantite = function() {
var totalquantite = 0;
for(var item in panier) {
totalquantite += Number(panier[item].quantite);
}
return Number(totalquantite);
}
//on cree l'objet total panier
obj.totalpanier = function() {
var totalpanier = 0;
for(var item in panier) {
totalpanier += panier[item].prix * panier[item].quantite;
}
return Number(totalpanier.toFixed(decimal));
}
//on cree l'objet pour lister le panier
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;
})();
//fonction qui transmet l'element a la var qte
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+"");
}
//on ajoute au panier
$('.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 );
}
voici comment je pense le modifier
//on cree la variable MonPanier
var MonPanier = (function() {
panier = [];
function Item(nom, prix, quantite,imager) {
//fonction
this.nom = nom;
this.prix = prix;
this.quantite = quantite;
this.imager = imager;
}
//fonction qui sauve le panier
function savepanier() {
sessionStorage.setItem('MonPanier', JSON.stringify(panier));
}
//fonction qui lit le panier
function loadpanier() {
panier = JSON.parse(sessionStorage.getItem('MonPanier'));
}
if (sessionStorage.getItem("MonPanier") != null) {
loadpanier();
}
//on cree la variable objet
var obj = {};
//on cree ajouter_produit_dans_panier
obj.ajouter_produit_dans_panier = function(nom, prix, quantite,imager) {
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();
}
//on cree obj.setquantiteForItem
obj.setquantiteForItem = function(nom, quantite) {
for(var i in panier) {
if (panier[i].nom === nom) {
panier[i].quantite = quantite;
break;
}
}
};
//on cree obj.enlever_produit_de_panier
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();
}
//on cree obj.enlever_produit_de_panier_tous
obj.enlever_produit_de_panier_tous = function(nom) {
for(var item in panier) {
if(panier[item].nom === nom) {
panier.splice(item, 1);
break;
}
}
savepanier();
}
//on cree obj.clearpanier
obj.clearpanier = function() {
panier = [];
savepanier();
}
//on cree obj.totalquantite
obj.totalquantite = function() {
var totalquantite = 0;
for(var item in panier) {
totalquantite += Number(panier[item].quantite);
}
return Number(totalquantite);
}
//on cree obj.totalpanier
obj.totalpanier = function() {
var totalpanier = 0;
for(var item in panier) {
totalpanier += panier[item].prix * panier[item].quantite;
}
return Number(totalpanier.toFixed(decimal));
}
//on cree obj.listpanier
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;
})();
//on trnasmet la valeur du checbox a qte
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+"");
}
//on ajoute l'article au panier
$('.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 );
}
Amicalement