Panier d'achat javascript

Signaler
-
 roger -
Salut à tous,

j'ai un petit souci, et j'ai beau retourner dans tous les sens la questions je ne parviens pas à y arriver...

Voilà je dois fair eun panier d'achat avec les cookies et tout sa ... mais avant toute chose j'ai un mouseover sur des articles pour que ce dernier apparaisse en grand ( imgCategorieGrosse.src = srcPetite;)

Mais le problème est que j'aimerai faire correspondre un prix avec cet article qui apparait en gros, et chaque article aurait son prix qui lui est propre...

Je ne sais pas si je suis clair, en tout cas voici mon code !

Merci pour votre aide =D

code :


// JavaScript Document




var tabImgAlbums = ["album1.jpg","album2.jpg"];

var tabImgTshirts = ["tshirt1.jpg","tshirt2.jpg"];
var tabPrixAlbums = [12.95,12];
var tabPrixTshirts = [12.95,12];

var gNbItemDansPanier =0;
var gItem = "";
var gCategorie = "";
var gQuantité ="" ;
var gPrix="";
var gPanierAchats = "";

window.onload = function()
{
eleBody = document.body;
afficherItem("Albums", "albums/album1.jpg");

categorieAlbums.onclick = function()
{
afficherItem("Albums", this.src);
afficherPrix("Albums");


}

categorieTshirts.onclick = function()
{
afficherItem("Tshirts", this.src);
afficherPrix("Tshirts");


}

montrerEnGros(this.src);

// onclick sur la grande image ajoute cette image 
imgCategorieGrosse.onclick = function()
{
ajouterAuPanier(this, parseInt(nbrArticle.value));
}

}
//Ajout des images dans la divImages existante dans la page
function afficherItem(categorie, srcImage)
{
// Changer le texte de la span dont le id est categorieTexte pour afficher la categorie dans la colonne droite au dessus des petites images
//categorieTexte.innerHTML = categorie;
// variable pour  indiquer le chemin des images  
var cheminVersImages = "images/"+categorie+"/";

// Supprimer les images contenues dans la div nommée inCategoriePetites 
effacerEnfants(imgInCategoriePetite);

// La premiére image de cette catégorie est affichée en gros dans la colonne de droite
imgCategorieGrosse.src = cheminVersImages + eval( "tabImg" + categorie)[0];
//+ ajouterNoeudDeTexte(eval("tabPrix"+ categorie)[i], imgInCategoriePetite)

// Constituer en utilisant eval le nom de la variable tableau associé à cette catégorie et determiner le nombre d'item dans la catégorie
var nbrItemsDansCategorie = eval("tabImg" + categorie).length;

// Pour ajouter dans la colonne droite toutes les petites images
for (var i=0; i < nbrItemsDansCategorie ; i++)
{
//Pour bien associer les paramétres avec la fonction de la LibrairieDHTML_v2.js :
//ajouterImage(idImage, srcImage, altImage, classImage, evenement, action, eleParent)

// En utilisant eval pour constituer le nom de la variable tableau associé à cette catégorie 
ajouterImage("imgCategorie" + i,cheminVersImages + eval( "tabImg" + categorie )[i], eval( "tabImg" + categorie) [i], "imgInCategoriePetite","onmouseover","montrerEnGros(this.src)",imgInCategoriePetite);




}

}






function montrerEnGros(srcPetite)
{
imgCategorieGrosse.src = srcPetite;
}

function extraireCategorieEtItem(pSource)
{
var indiceImagesSlash = pSource.indexOf("images/");
var restantChaine = pSource.substring(indiceImagesSlash+7);
var indiceAutreSlash = restantChaine.indexOf("/");
gCategorie = restantChaine.substr(0,indiceAutreSlash);
var longueurCategorie = gCategorie.length;
var restantApresCategorie = restantChaine.substring(indiceAutreSlash+1);
var indicePoint = restantApresCategorie.indexOf(".");
gItem = restantApresCategorie.substring(0,indicePoint);
}

function extraireQuantite(pSource)

{
var indiceQuantite = pSource.indexOf(gItem +"/");
gQuantite = indiceQuantite.substr(0); 

}

function extrairePrix(pSource)

{
var indicePrix = pSource.indexOf(gQuantite +"/");
gPrix = indicePrix.substr(0); 
}

function ajouterAuPanier(pImage, gQuantité)
{
var srcImage = pImage.src;
alert(srcImage);
extraireCategorieEtItem(srcImage);
gPanierAchats += "-"+gCategorie+"/"+gItem + "/" + gQuantité + "/" + gPrix;


imgPanierAchats.style.visibility = "visible";
gNbItemDansPanier++;
if (gNbItemDansPanier == 1)
{
nbItemsDansPanier.innerHTML = " 1 item."
}
else
{
nbItemsDansPanier.innerHTML = gNbItemDansPanier + " items."
}


enregistrerPanier();
alert(gPanierAchats);
alert(gNbItemDansPanier);
}



function enregistrerPanier()
{
// test pour voir si le navigateur permet les cookies
    if (navigator.cookieEnabled)
{
ecrireCookie("cookiePanierAchats", gPanierAchats, 7);
}
else
{
alert("Cette application ne fonctionnera pas si vous ne permettez pas d'avoir des cookies.")
}
}

2 réponses

Messages postés
25
Date d'inscription
dimanche 19 février 2012
Statut
Membre
Dernière intervention
26 août 2013
2
1. Conseil: NE PAS UTILISER DE CARACTERES SPECIAUX DANS LE CODE !
2. met stp le code dans
 et </code >
et le code pour le mouseover sur un article est:
<code type="javascript">
function  AffEnGrand(articleN, toW, toH){
  document.getElementById(articleN).style.width = toW; // la largeur devient la valeur de toW
  document.getElementById(articleN).style.height = toH; // la largeur devient la valeur de toW
}
Salut !

Il existe des plugins de panier prêt à utiliser en js comme simplecart.

Si tu veux faire le tien de manière à vraiment maitriser tous les aspects voici un tuto sur le sujet (avec jQuery) http://buzut.fr/2015/02/21/realiser-un-panier-en-javascript/