Customiser Magento Open Source

Vous avez remarqué les petites images en haut à droite de mes produits dans les pages catégories ? Vous voulez savoir comment rajouter des images pour vos promotions ou pour tout simplement améliorer le design de votre ecommerce magento ?

Cet article date d’une dizaine d’années, je vous conseille pas de faire ces modifications sur un site Ecommerce Magento en 2021. Pour vous pouvez toujours télécharger Magento Open Source ici : https://magento.com/products/magento-open-source

La plate-forme de commerce pour les développeurs et les petites entreprises. La plate-forme d’e-commerce Magento Open Source vous offre les fonctionnalités dont vous avez besoin pour créer intégralement et développer une boutique en ligne unique.

Afficher des icônes sur vos produits

Tout d’abord il faut créer un nouvel “attribut” :

Catalogue > Attributs > Gérer les attributs > Nouvel attribut

Ensuite spécifiez des noms d’options SANS ESPACE pour chaque type de situation.

Ajoutez le nouvel attribut non assigné (ici “promonew”) dans le groupe “Default” :

Catalogue > Attributs > Gérer les groupes attributs > Default

Ensuite il faut actualiser le “Layout” de chaque catégorie ou vous souhaitez voir apparaître vos petites vignettes avec ce code :

<span style="color: #ccffcc;"><em><reference name="content">
<block type="catalog/product_list" name="product_list">
<action method="addAttribute"><attribute>promonew</attribute></action> </block> </reference></em></span>

Remplacer “promonew” par le nom de votre attribut !

Ensuite il vous faut éditer le fichier :

/app/design/frontend/default/blue/template/catalog/product/list.phtml

Rajouter :

<span class="<?php echo $_product->getAttributeText('promonew')?>"></span>

Dessous ce passage :

<?php // Grid Mode ?>
<div class="listing-type-grid catalog-listing">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%4==0): ?>
<ol class="grid-row">
<?php endif; ?>
<li class="item">
<span class="<?php echo $_product->getAttributeText('promonew')?>"></span>

N’oubliez pas de remplacer à nouveau “promonew” par le nom de votre attribut.

Ensuite vous allez rajouter un peu de CSS à votre fichier boxes.css

.item {
position:relative;
}
.grid-row span.vingt {
background:transparent url(../images/vingt.png) no-repeat scroll 0 0;
display:block;
height:50px;
position:absolute;
right:3px;
top:2px;
width:50px;
}
.grid-row span.trente {
background:transparent url(../images/trente.png) no-repeat scroll 0 0;
display:block;
height:50px;
position:absolute;
right:3px;
top:2px;
width:50px;
}

Ceci est un exemple pour les options “vingt” et “trente”. Créez des petites images et ajustez les CSS selon votre thème.

Ensuite rendez vous dans une fiche produit et choisissez votre “Badge” !

• Magento