Variables liste gammes

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Lorsque vous créez des modèles de listes gammes, vous disposez de variables dynamiques vous permettant de positionner les éléments constituant chaque présentation de gamme de la liste à l'emplacement souhaité : les codes DYN. La liste de gammes présentera ensuite une boucle de ce modèle pour chaque gamme qui la composera. Vous pourrez aussi, sur cette fonction, paramétrer les espacement entre chaque gamme de la liste, le nombre de colonnes, de gammes sur la page, ...

Liste des codes DYN : Présentation

Codes DYN Correspondance
*Nom* Nom de la gamme
*Vignette* Vignette de la gamme
*Resume* Résumé de la gamme
*Infos* Lien « plus d'infos »


Liste des codes DYN : Avancés

Codes DYN Correspondance
*classPairImpair* Nombre pair & impair pour un affichage alterné par exemple


Exemple d'application

Je veux intégrer que sur mes listes de gammes chaque gamme soit représentée par sa vignette, et au survol seulement apparaissent les informations de type nom, résumé, et lien plus d'infos comme l'exemple suivant : http://demo.powerboutique.com/meubles,fr,2,41.cfm

Je vais créer un modèle de liste gammes, qui contiendra les codes DYN que je veux faire apparaitre pour chaque gamme.

De plus, je vais, dans les rayons concernés, insérer dans les balises metas complémentaires (onglet référencement du rayon) le js nécessaire au fonctionnement du survol.


Contenu des balises meta complémentaires des rayons concernés

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict()
(function($){
function _getDir($el,event){
var w = $el.width(),
h	= $el.height(),
cx = $el.offset().left + w/2,
cy = $el.offset().top + h/2,
x = (event.pageX - cx) * (w>h?(h/w) : 1),
y = -(event.pageY - cy) * (h>w?(w/h) : 1),
direction = Math.round( ( (Math.atan2(x,y) + Math.PI) / (Math.PI/2)) + 2 ) % 4;
var directions = {
0 : {left:0, top:-h},
1 : {left:w, top:0},
2 : {left:0, top:h},
3 : {left:-w,top:0}
}
return directions[direction];
}
$('.thumb').on('mouseenter',function(event){
$(this).find('.alt').stop().css(_getDir($(this),event)).animate({top:0, left:0}, 300);
});
$('.thumb').on('mouseleave',function(event){
$(this).find('.alt').stop().animate(_getDir($(this),event), 300);
});
})(jQuery);
</script>
<style type="text/css">
.thumb{
width: 156px; height: 119px; float:left;
position: relative; overflow: hidden;
margin: 10px;
}
.alt{
position:absolute; top:0; left:-100%;
width: 146px; height: 109px;
padding:5px;
background:rgba(141,187,30,0.8);
color:#FFF; font-size:20px;
}
#lien_categorie_nom_famille{
font-size:16px !important;
color:black !important;
display:block !important;
}
</style>


Contenu html de mon modèle de liste gammes

<div class="thumb">
*Vignette*
<div class="alt">
*Nom*
*Resume*
<br>
*Infos*
</div>
</div>