Cette article reprend le tutoriel très complet de jguiss que vous trouverez ici : http://www.jguiss.com/2009/06/customiser-la-liste-des-produits-sur-magento/
Pour aller plus loin, on peut insérer dans cette vignette la valeur en pourcentage de la promotion. Vous trouverez le code pour y parvenir ici : http://internet-pau.com/magento/2010/06/calcul-automatique-des-promotions-en-pourcentage/
1- Créer un attribut
<?php /* AFFICHAGE DE LA VIGNETTE PROMO */
$vignette = $_product->getAttributeText('etiquette');
if (!empty($vignette)) { ?> // si l'attribut vignette est renseigné, on affiche le bloc vignette
<div> // on ajoute devant la class de style list (pour l'affichage dans list.phtml) et view pour view.phtml, car la class .-10% n'est pas valide contrairement à .list10
<?php if ($vignette != 'promotion' && $vignette != 'nouveaute' && $vignette != 'topvente') { ?> // si l'attribut de vignette est différent de promotion, nouveauté et topvente, alors on affiche le montant (10,11...)
-<?php echo $vignette; ?>% // on affiche la valeur de la promo
<?php } ?>
</div>
<?php } ?>
Dans l’admin Catalogue > Attributs > Gérer les attributs > Nouvel attribut
Créer attribut « etiquette » labels : « promotion, topvente, nouveaute,10,15,20… »
Définir les groupes d’attribut avec le nouvel attribut « etiquette »
2- Actualiser le Layout de chaque catégorie pour y insérer l’étiquette
Layout catalog : rechercher « product-list » et ajouter <action method=’addAttribute’><attribute>etiquette</attribute></action>
Ou bien, dans le XML de mise à jour d’agencement, section CMS, dans l’admin, ajouter :
<reference name='content'> <block type='catalog/product_list' name='product_list'> <action method='addAttribute'><attribute>etiquette</attribute></action> </block> </reference>
/app/design/frontend/default/blue/template/catalog/product/list.phtml
/app/design/frontend/default/blue/template/catalog/product/view.phtml
/app/design/frontend/default/blue/template/catalog/product/sales.phtml
/app/design/frontend/default/blue/template/catalog/product/new.phtml … ajouter :
<div class="<?php echo $_product->getAttributeText('etiquette')?>"></div>
Si on souhaite afficher le montant de la promo dans la vignette:
<?php /* AFFICHAGE DE LA VIGNETTE PROMO */
$vignette = $_product->getAttributeText('etiquette');
if (!empty($vignette)) { ?> // si l'attribut vignette est renseigné, on affiche le bloc vignette
<div> // on ajoute devant la class de style list (pour l'affichage dans list.phtml) et view pour view.phtml, car la class .-10% n'est pas valide contrairement à .list10
<?php if ($vignette != 'promotion' && $vignette != 'nouveaute' && $vignette != 'topvente') { ?> // si l'attribut de vignette est différent de promotion, nouveauté et topvente, alors on affiche le montant (10,11...)
-<?php echo $vignette; ?>% // on affiche la valeur de la promo
<?php } ?>
</div>
<?php } ?>
3- Modifier le fichier css style.css … ajouter :
/* Etiquette de promo... */
.item { position:relative; }
.topvente, .promotion, .nouveaute, .dix, .quinze, .vingt {
position:absolute;
float:right;
display:inline;
height:50px;
width:50px;
}
.topvente { background:transparent url(../images/topvente.png) no-repeat scroll 0 0; }
.promotion { background:transparent url(../images/promotion.png) no-repeat scroll 0 0; }
.nouveaute { background:transparent url(../images/nouveaute.png) no-repeat scroll 0 0; }
.dix { background:transparent url(../images/dix.png) no-repeat scroll 0 0; }
.quinze { background:transparent url(../images/lavillauroy/quinze.png) no-repeat scroll 0 0; }
.vingt { background:transparent url(../images/vingt.png) no-repeat scroll 0 0; }
Si on souhaite afficher le montant de la promo dans la vignette:
/* Etiquette de promo... */
.item { position:relative; }
.viewtopvente, .viewpromotion, .viewnouveaute {
position:absolute;
height:50px;
width:50px;
right:0;
top:0;
text-align:center;
font:bold 14px/44px Arial, Helvetica, sans-serif;
color:#FFF;
}
.listtopvente, .listpromotion, .listnouveaute {
float:right;
height:50px;
width:50px;
text-align:center;
font:bold 14px/44px Arial, Helvetica, sans-serif;
color:#FFF;
}
.viewtopvente, .listtopvente { background:transparent url(../images/topvente.png) no-repeat scroll 0 0; }
.viewpromotion, .listpromotion { background:transparent url(../images/promotion.png) no-repeat scroll 0 0; }
.viewnouveaute, .listnouveaute { background:transparent url(../images/nouveaute.png) no-repeat scroll 0 0; }