Blog Magento

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; }