Variables fiches articles

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Lorsque vous créez des modèles de fiches articles, vous disposez de variables dynamiques vous permettant de positionner les éléments constituant la fiche article à l'emplacement souhaité : les codes DYN

Liste des codes DYN : Présentation article

Codes DYN Correspondance
*CheminNavigation* Chemin de navigation (ex : Accueil - Rayon - Gamme - Article)
*Titre* Titre de l'article (ex : Gamme Produit Marque)
*Resume* Résumé de l'article
*Description* Description de l'article
*Prix* Bloc prix de l'article
*Poids* Poids de l'article
*RemisePourcentage* Valeur de la remise en pourcentage
*TauxTVA* Valeur de la TVA en pourcentage
*Ecotaxe* Ecotaxe de l'article
*RemiseQuantitative* Remise quantitative
*TexteDispo* Texte de disponibilité de l'article
*DelaiDispo* Délai de disponibilité de l'article
*TexteDelaiDispo* Texte de la fourchette qui correspond au délai de disponibilité
*Stock* Nombre d'articles disponibles
*AvisProduitResume* Moyenne des avis clients sur l'article
*AvisProduitDetails* Détail des avis clients sur l'article

Liste des codes DYN : Attributs sous-références et attributs simples

Codes DYN Correspondance
*AttributsSousRef* Attributs sous-références (déclinaisons d'article)
*AttributsSimple* Attributs simples

Liste des codes DYN : Images

Codes DYN Correspondance
*Image* Image de l'article
*FichierAttache* Fichier attaché de l'article
*ImagePromo* Image promotion si une remise est appliquée sur l'article

Liste des codes DYN : Ajout panier

Codes DYN Correspondance
*AjoutPanier* Bouton de sélection
*Quantite* Quantité

Liste des codes DYN : Liens

Codes DYN Correspondance
*lienImageZoom* Lien image zoom de l'article
*lienMail* Lien "Envoyer par email".
*lienRetour* Lien "Retour"
*lienFavori* Lien "Ajouter aux favoris"
*lienReseauxSociaux* Lien "Réseaux sociaux"

Liste des codes DYN : Références

Codes DYN Correspondance
*ReferenceCatalogue* Référence catalogue
*ReferenceConstructeur* Référence constructeur
*ReferenceFournisseur* Référence fournisseur
*ReferenceCodeEAN* Code EAN
*ReferenceCodeISBN* Code ISBN

Liste des codes DYN : Ventes croisées

Codes DYN Correspondance
*VentesCroisees1* Ventes croisées 1 (bloc)
*VentesCroisees2* Ventes croisées 2 (bloc)
*VentesCroisees3* Ventes croisées 3 (bloc)

Liste des codes DYN : Avancés

Codes DYN Correspondance
*ArticlePersonnalisable* Formulaire à renseigner par l'internaute pour la personnalisation de l'article. S'affiche uniquement en cas d'article personnalisable
*NomGammeBrut* Nom de la gamme dans laquelle se trouve l'article
*NomProduitBrut* Nom de l'article
*NomMarqueBrut* Marque de l'article
*LogoMarque* Logo de la marque de l'article
*Garantie* Garantie de l'article
*SousRefSansJavascript* Sous références de l'article sans le code javascript pour afficher les champs selon la sous-référence sélectionnée. Des variables en javascript sont définies sous forme de tableau
*PrixDeBaseBrut* Prix brut de l'article
*PrixDeBaseFrcBrut* Prix brut en francs de l'article
*PrixDeBaseUsdBrut* Prix brut en dollars de l'article
*PrixDeBaseHorsRemiseBrut* Prix brut de l'article avant la promotion si une remise est appliqué sur celui-ci
*PrixDeBaseHorsRemiseFrcBrut* Prix brut en francs de l'article avant la promotion si une remise est appliqué sur celui-ci
*PrixDeBaseHorsRemiseUsdBrut* Prix brut en dollars de l'article avant la promotion si une remise est appliqué sur celui-ci
*Remise* Affiche la valeur de la remise
*RemisePourcentageBrut* Affiche la valeur de la remise en pourcentage
*Illustration* Image 1 de l'article
*Illustration2* Image 2 de l'article
*Illustration3* Image 3 de l'article
*Illustration4* Image 4 de l'article
*Illustration5* Image 5 de l'article
*Zoom* Zoom 1 de l'article
*Zoom2* Zoom 2 de l'article
*Zoom3* Zoom 3 de l'article
*Zoom4* Zoom 4 de l'article
*Zoom5* Zoom 5 de l'article
*Vignette* Vignette de l'article
*UrlIllustration* Url de l'illustration 1 de l'article
*UrlIllustration2* Url de l'illustration 2 de l'article
*UrlIllustration3* Url de l'illustration 3 de l'article
*UrlIllustration4* Url de l'illustration 4 de l'article
*UrlIllustration5* Url de l'illustration 5 de l'article
*UrlZoom* Url du zoom 1 de l'article
*UrlZoom2* Url du zoom 2 de l'article
*UrlZoom3* Url du zoom 3 de l'article
*UrlZoom4* Url du zoom 4 de l'article
*UrlZoom5* Url du zoom 5 de l'article
*UrlVignette* Url de la vignette de l'article
*MarqueurAffiche* Nombre (renseigné pour chaque fiche article) permettant, via un script personnel (js) de gérer l'affichage d'images contextuelles (coup de coeur, nouveauté)
*ArticleSolde* Valeur permettant d'identifier si un article est en soldes, et afficher via un script personnel (js) une image correspondante
*AvisProduitResume* Affiche un résumé des avis produits
*AvisProduitDetails* Affiche le détail des avis produits

Liste des codes DYN : Blocs spécifiques

Codes DYN Correspondance
*CinqBlocs_5_onglets* 5 blocs sous forme d'onglet : description, caracteristiques, ventes croisees 1, ventes croisees 2, ventes croisees 3
*UnBloc_5_onglets* Bloc sous forme d'onglet description, caracteristiques, ventes croisees 1, ventes croisees 2, ventes croisees 3
*UnBloc_2_onglets* Bloc sous forme d'onglets : description, caracteristiques

Exemple d'application : l'animation lors des choix de sous-ref

Sur une fiche article, il est possible de personnaliser / créer une "animation" lors du choix d'une sous-référence dans le menu déroulant.
On entend par "animation", le lancement d'une fonction JS personnelle, qui peut éventuellement afficher des informations relatives à la sous-référence choisie.

Par exemple, les animations par défaut sont :

  • mise à jour du prix affiché
  • mise à jour de l'image
  • affichage de la description complémentaire correspondant à la sous-référence


La procédure pour personnaliser ces animations est la suivante :

  • 1. Dans le modèle de fiche article, insérer le code DYN *SousRefSansJavascript* qui supprime l'appel au fichier javascript par défaut.
  • 2. Créer un fichier sousRefs.js avec le code suivant :
sousRefs.js
  1 var sousRefs = {
  2     /*
  3      * Fonction miseAJourChoix2
  4      * 
  5      * Gere le remplissage du second choix selon les elements actifs sur le premier choix
  6      */
  7     miseAJourChoix2 :function (event) {
  8 
  9 		var selectionChoix1=sousRefs.choix_1.options[sousRefs.choix_1.selectedIndex].value;
 10 		if(selectionChoix1 != ""){
 11 			if (sousRefs.choix_2 != undefined) {
 12 			    // Sauvegarde la selection
 13 			    var selectionChoix2=sousRefs.choix_2.options[sousRefs.choix_2.selectedIndex].value;
 14 			   
 15 			    // Reduit le second menu a 1 element:
 16 			    sousRefs.choix_2.options.length=1;
 17 			    
 18 			    var listeChoix2;
 19 			    if (choix2List[selectionChoix1] == undefined)
 20 					// Pas de liste speciale pour ce choix, affiche la liste par defaut
 21 					listeChoix2 = choix2ListDefault;
 22 				else	
 23 					// Affiche les combinaisons valides
 24 					listeChoix2 = choix2List[selectionChoix1];
 25 		    
 26 				    for (var propriete in listeChoix2){
 27 						if (listeChoix2.hasOwnProperty(propriete)) {
 28 						    var valeurElementChoix2 = propriete;
 29 						   
 30 						    valeurElementChoix2 = valeurElementChoix2.replace(/\'/g, "\'");
 31 						   	valeurElementChoix2 = valeurElementChoix2.replace(/€/g, '€');
 32 						   
 33 						    var valeurOption = propriete;
 34 						    //valeurOption = valeurOption.replace(/€/g, '€');
 35 							valeurOption = valeurOption.replace(/\&euro\;/g, '€');
 36 							
 37 						    var opt = new Option(valeurOption, valeurElementChoix2);
 38 						    if (valeurOption == selectionChoix2) {
 39 								opt.selected=true;
 40 						    }
 41 						   
 42 						    sousRefs.choix_2.options[sousRefs.choix_2.options.length] = opt;
 43 						}
 44 				    }
 45 			}
 46 		}
 47 
 48 	sousRefs.miseAJourFiche(event);
 49     },
 50 
 51 
 52     /*
 53      * Fonction miseAJourFiche
 54      * 
 55      * Remplit la fiche produit avec les elements de la sous-reference active
 56      */
 57     miseAJourFiche : function(event) {
 58     
 59 	if (sousRefs.choix_1){valeur_choix_1 = sousRefs.choix_1[sousRefs.choix_1.selectedIndex].value;}else{valeur_choix_1 = "";}
 60 	if (sousRefs.choix_2){valeur_choix_2 = sousRefs.choix_2[sousRefs.choix_2.selectedIndex].value;}else{valeur_choix_2 = "";}
 61     
 62 	valeur_choix_2 = valeur_choix_2.replace(/€/g, '€');
 63 	indice = valeur_choix_1+valeur_choix_2;
 64     
 65 	// Reset sur la ref mere si pas de choix valide
 66 	if (sousRefs.choix_1 && valeur_choix_1 == "" ) {indice = ref_produit_mere;}
 67 	if (sousRefs.choix_2 && valeur_choix_2 == "" ) {indice = ref_produit_mere;}
 68     
 69 	//indice = indice.replace(/\"/g, '"');
 70 	var ref=listeRefs[indice];
 71 
 72 	if (ref) {
 73 	    //var $=document.getElementById;
 74 	    var myForm=document.formulaire;
 75 
 76 	    sousRefs.afficheElemSousRefs(myForm,ref);
 77 
 78 	    myForm.titre.value = ref.nomProduit;
 79 	    myForm.prix.value = ref.priceValue;
 80 	    myForm.ref.value = ref.refProduit;
 81 	    //myForm.prix.value = infosPrix;
 82    
 83 	    window.location.hash="#"+ref.refProduit;
 84 	    
 85 	    // ceci permet d'enlever le focus du menu déroulant lorsque le choix est fait pour éviter de changer la sélection en utilisant la roulette
 86 	    if(document.all) {
 87 		// ici ie
 88 		document.body.focus();
 89 	    } else {
 90 		// la firefox
 91 		document.getElementById('menu_sous_ref1_fiche_produit').blur();
 92 	    }
 93 	} else {
 94 	    window.console && console.log("Erreur, sous ref introuvable pour "+valeur_choix_1+"/"+valeur_choix_2);
 95 	}
 96     },
 97     
 98      /*
 99      * Fonction afficheElemSousRefs
100      * 
101      * Affichage des informations des sous-references
102      */
103      
104     afficheElemSousRefs : function (myForm,ref) {	
105 	if (document.getElementById("ref_fille"))
106 	    myForm.ref_fille.value = ref.refProduit;
107 	
108 	if (document.getElementById("zone_prix"))
109 	    document.getElementById("zone_prix").innerHTML=ref.price;
110 	
111 	if (document.getElementById("zone_texte"))
112 	    document.getElementById("zone_texte").innerHTML=ref.text;
113 	
114 	if (document.getElementById("zone_image") && ref.picture != "")
115 	    document.getElementById("zone_image").innerHTML=ref.picture;
116 
117 	if (document.getElementById("zone_ajout_panier_cross"))
118 	    document.getElementById("zone_ajout_panier_cross").innerHTML=ref.dispoArrayCross;
119 	
120 	if (document.getElementById("zone_texte_disponible_fiche_produit"))
121 	    document.getElementById("zone_texte_disponible_fiche_produit").innerHTML=ref.texteNonDispo;
122 	
123 	if (document.getElementById("zone_remise_quantitative"))
124 	    document.getElementById("zone_remise_quantitative").innerHTML=ref.remiseQuantitative;
125 	
126 	if (document.getElementById("zone_option_impact_prix"))
127 	    document.getElementById("zone_option_impact_prix").innerHTML=ref.optionPayante;
128 	
129 	if (document.getElementById("ficheProduitTexteDelaiDispo") && ref.delaiApproTexte != undefined)
130 	    document.getElementById("ficheProduitTexteDelaiDispo").innerHTML=ref.delaiApproTexte;
131 	
132 	if (document.getElementById("zone_ajout_panier"))
133 	    document.getElementById("zone_ajout_panier").innerHTML=ref.dispo;
134 	
135 	if (document.getElementById("zone_qte"))
136 	    document.getElementById("zone_qte").innerHTML=ref.qte;
137 	
138 	if (document.getElementById("ProduitRefCatalogue"))
139 	    document.getElementById("ProduitRefCatalogue").innerHTML=ref.ProduitRefCatalogue;
140 	
141 	if (document.getElementById("ProduitRefConstructeur"))
142 	    document.getElementById("ProduitRefConstructeur").innerHTML=ref.ProduitRefConstructeur;
143 	
144 	if (document.getElementById("ProduitRefFournisseur"))
145 	    document.getElementById("ProduitRefFournisseur").innerHTML=ref.ProduitRefFournisseur;
146 	
147 	if (document.getElementById("ProduitCodeEAN"))
148 	    document.getElementById("ProduitCodeEAN").innerHTML=ref.ProduitCodeEAN;
149 	
150 	if (document.getElementById("ProduitCodeISBN"))
151 	    document.getElementById("ProduitCodeISBN").innerHTML=ref.ProduitCodeISBN;
152 	   
153 	if(document.getElementById("remisePourcent"))
154 		document.getElementById("remisePourcent").innerHTML=ref.remisePourcent;
155 	
156 	if(document.getElementById("texte_ecotaxe_fiche_produit")){
157 			var ecotaxe = document.getElementById("texte_ecotaxe_fiche_produit");
158 			var ecotaxe_text = ecotaxe.getElementsByTagName("div")[0];
159 			ecotaxe_text.innerHTML = ref.EcotaxeDescriptif + " " + ref.EcotaxeValeur + " EUR";
160 			if(ref.EcotaxeValeur > 0){
161 				ecotaxe.style.display = "";
162 			}else{
163 				ecotaxe.style.display = "none";
164 			}
165 		}
166 	},
167 	
168     /* Fonction check
169      *  Valide la selection de sous-refs
170      *  appellé par la mise au panier
171      */
172     check : function() {
173     
174 	if (sousRefs.choix_1) {
175 	    var valeur_choix_1 = sousRefs.choix_1[sousRefs.choix_1.selectedIndex].value;
176 	    var options = "";
177 	
178 	    var titre_1 = document.getElementById("titre_sous_ref1_fiche_produit").innerHTML;
179 	
180 	    if( valeur_choix_1 == "" && titre_1 != "")
181 		options = options+"&nbsp;&nbsp;&nbsp;- "+titre_1+"<br/>";
182 				
183 	    if (sousRefs.choix_2) {
184 		var valeur_choix_2 = sousRefs.choix_2[sousRefs.choix_2.selectedIndex].value;
185 	
186 		var titre_2 = document.getElementById("titre_sous_ref2_fiche_produit").innerHTML;
187 	    
188 		if( valeur_choix_2 == "" && titre_2 != "")
189 		    options = options+"&nbsp;&nbsp;&nbsp;- "+titre_2+"<br/>";
190 		
191 	    }
192 	    if (options != "") {
193 		//affiche popup alerte lorsque les sous ref ne sont pas renseignés (ne va pas dans com_act)
194 		panier.alerte(textesAlerteAjout.titre,textesAlerteAjout.message,options,'',textesAlerteAjout.submit);
195 		return false;
196 	    }
197 	}
198 	return true;
199     },
200 
201     setChoice : function(choix,value) {
202 	choix.value=value;
203 	/*Ancienne methode (plus compatible ?):
204 	 for (var opt in choix.options) {
205 	    if (opt.value == value) {
206 		opt.selected="selected";
207 	    }
208 	}*/
209     },
210 
211     // Initialisation:
212     // 
213     init : function() {
214 
215 	sousRefs.choix_1 = document.formulaire.choix_1;
216 	sousRefs.choix_2 = document.formulaire.choix_2;
217 
218 	// Configure les handler JS + active les menus
219 	if (sousRefs.choix_1) {
220 	    sousRefs.choix_1.onchange=sousRefs.miseAJourChoix2;
221 	    sousRefs.choix_1.disabled=false;
222 	}
223 
224 	if (sousRefs.choix_2) {
225 	    sousRefs.choix_2.onchange=sousRefs.miseAJourFiche;
226 	    sousRefs.choix_2.disabled=false;
227 	}	    
228 
229 	// Analyse de l'url et affiche une sous ref directement si un hash valide est present:
230 	if (window.location.hash != "") {
231 	    var ref=window.location.hash.substr(1);
232 	    //window.console && console.log("Anchored ref passed:" +ref);
233 
234 	    // Recherche de la reference dans la base de refs filles
235 	    for (var indice in listeRefs) {
236 		if (listeRefs[indice].refProduit == ref) {
237 		    //window.console && console.log("Anchored ref found: ("+listeRefs[indice].choix_1+"/"+listeRefs[indice].choix_2+")");
238 		
239 		    if (sousRefs.choix_1) {
240 			sousRefs.setChoice(sousRefs.choix_1, listeRefs[indice].choix_1);
241 			sousRefs.miseAJourChoix2('skip');
242 		    }
243 		    if (sousRefs.choix_2)
244 			sousRefs.setChoice(sousRefs.choix_2, listeRefs[indice].choix_2);
245 			
246 		    sousRefs.miseAJourFiche();
247 		}
248 	    }
249 	}
250     }
251 };
252 
253 
254 
255 //console.log("Initialize sous refs");
256 sousRefs.init();

La fonction "afficheElemSousRefs" ligne 104 permet de gérer les animations lors du choix d'une sous-référence. Elle prend en paramètre l'objet qui permet d'accéder à des variables spécifiques à la sous-référence choisie.

  • 4. Placer le fichier dans l'espace de stockage de votre site.
  • 5. Appeler le JS personnalisé dans votre modèle de fiche article à la fin, par exemple :
<script type="text/javascript" src="../site/sousRefs.js"></script>



Exemple d'animation : création d'un div getStock dans le modèle de fiche article. Ajout du code suivant dans le fichier sousRefs.js dans la fonction "afficheElemSousRefs"  :

 1 if(document.getElementById("getStock")){
 2                 document.getElementById("getStock").innerHTML=ref.stock;
 3                 //document.getElementById("getStock").innerHTML+=ref.picture;
 4 
 5       $("#getStock").animate({ 
 6         width: "70%",
 7         opacity: 0.8,
 8         fontSize: "3em" 
 9       }, 1000 ,"swing");
10         
11     $("#getStock").animate({
12         width: "70%",
13         opacity: 0.8,
14         fontSize: "1em"
15       }, 1000 ,"swing");        
16         
17 }

Il faut ajouter au modèle fiche article le code suivant à l'endroit où l'on veut que la quantité soit affichée :

<div id="getStock"></div>

et un appel à jQuery juste avant l'appel au fichier sousRefs.js :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


La div recevra la valeur du stock, à positionner où l'on veut dans le modèle. Pour l'appel à JQuery le placer au début du modèle.

Liste des variables disponibles
Nom de la variable Explication du contenu Type de donnée Exemple de sortie
priceValue prix en euro numérique 240
priceFRCValue prix en franc numérique 1574.30
priceUSDValueArray prix en USD numérique 327.91
priceValueAvantPromo prix en euro avant promo numérique 240
priceFRCValueAvantPromo prix en franc avant promo numérique 1574.30
priceUSDValueAvantPromo prix en USD avant promo numérique 327.91
price bloc prix bloc HTML
remiseEuro remise en euro numérique 0.00
remisePourcent remise en % numérique avec le symbole % 10.00 %
remisePourcentBrut remise en % numérique 10
remiseQuantitative tableau des remises quantitatives bloc HTML
text texte spécifique à la sous référence bloc HTML
texteNonDispo texte de non disponibilités bloc HTML
stock stock numérique 10
nomProduit nom de la sous référence texte manche alu 42 vert
picture image de la sous référence bloc HTML
dispo bouton ajout panier si sous référence disponible bloc HTML
qte champ quantité ajout panier si sous référence disponible bloc HTML
delaiAppro délai d'approvisionnement en nombre de jours numérique 3
dispoArrayCross bouton ajout panier des articles associés bloc HTML
refProduit référence de la sous référence texte MAN1_0
optionPayante menu des options payantes de la sous référence bloc HTML
ProduitRefCatalogue référence de la sous référence texte MAN1_0
ProduitRefConstructeur référence constructeur de la sous référence texte
ProduitRefFournisseur référence fournisseur de la sous référence texte
ProduitCodeEAN référence EAN de la sous référence texte
ProduitCodeISBN référence ISBN de la sous référence texte
choix_1 choix choisi dans le menu 1 texte 42
choix_2 choix choisi dans le menu 2 texte vert
delaiApproTexte texte du délai d'approvisionnement texte en stock
EcotaxeDescriptif texte de l'ecotaxe bloc HTML
EcotaxeValeur valeur de l'ecotaxe numérique 1