Customiser Magento

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 ?

Tout d’abord il faut créer un nouvel « attribut » :

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

attribute

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

options

Ajoutez le nouvel attribut non assigné (ici « promonew ») dans le groupe « Default » :

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

group

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 !

categorie

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 » !

product

20 commentaires

  1. Si vous faîtes un copié/collé il vous faut retaper les guillemets…
    Et faut que je fasse un update pour optimiser les CSS.

    Merci pour vos commentaires 😀

  2. Extension prometeuse mais qui, semble t’il ne fonctionne pas avec la version 1323 de magento. dommage.et merci pour le partage

  3. Certainement une erreur de ma part puisque, souhaitant absolument cette extension j’ai reinstaller la version 130 de magento et j’ai aussi une erreur
    j’ai du mal interpreter la procedure
    pourrais tu nous dire , qd tu dis >123< faut il « coller » a un endroit specifique de boxes le css
    Merci par avance des reponses à venir si tu acceptes de nous eclairer

  4. Merci julien de ta reponse
    Affaire reglée : les copier coller n’etait pas bon et en reinscrivant tout j’avais commis des erreurs
    l’extension fonctionne donc avec la version 1323 de magento
    juste un probleme car la vignette promonew ne se met pas sur l’angle de la photo mais a cote
    je vais me servir avec une grande joie du travail super qui a ete fait
    merci

  5. Ok pour le test mais j’ai une erreur de redirection, je suis sur une config multi sites … ? sinon c a l’air pratique … mais dans mon cas ca ne marche pas mgt v 1.3.1
    LK

  6. Je suis aussi en multi-sites, 4 avec différents URL et aucun problème de redirection.

    Malgré que ma version soit « Magento ver. 1.2.0.1 » (et que du coup j’ai pas testé sur une V 1.3.1) je ne pense pas que le problème provienne de mes modifs…

  7. Bon bein ca veut pas …. du tout meme en placant directement dans le layout : catalog.xml — la je vois plus ce que cela pourrati etre … ?

  8. Bonjour,
    J’ai l’impression d’avoir suivi à la lettre les consignes mais j’ai un problème : Erreur 500 quand je tente d’ouvrir ma catégorie.Faut-il juste copier-coller le CSS à la fin de boxes.css ?
    J’aimerais bien pouvoir utiliser ce tuto alors au secours !
    Merci pour votre aide.

  9. Salut tout le monde,

    APrès avoir créé l’attribut et l’avoir ajouté à un group, je me rend compte que « $_product->getAttributeTex(‘promonew’) » qui doit normalement récupérer la valeur de l’option du produitne donne rien.

    J’ai fait un test avec « $_product->getResource()->getAttribute(‘promonew’)->getFrontend()->getLabel($_product) » et la j’obtient bien le titre (a savoir « badge »).

    J’ai également essayé avec « $_product->getResource()->getAttribute(‘promonew’)->getFrontend()->getValue($_product) » mais la cela me renvoie la valeur « Non ».

    Franchement je ne sais plus comment faire.

    Quelqu’un a t’il une idée??

  10. Après avoir refait le tuto à 5 reprises, je pense qu’il doit y avoir un problème avec ma version de Magento 1.4 !!!

    D’ailleurs je n’ai pas le meme code dans le fichier list.phtml


    count() ?>

    La seule chose que ca m’ajoute c’est deux point noir à gauche de l’image produits …???

    Quelq’un a eu le meme problème avec cette version de Magento??
    Une idée peut etre ??

  11. Salut julien et tout le monde,
    d’abord merci pour ce tuto bien utile.
    J’ai un problème pour appliquer ta méthode : c’est le fichier list.phtml qui me pose problème.
    En effet, je suis parti sur un template blank sur une 1.3.2.4 sur lequel ne figure pas dans le list.phtml et qui sont remplacé par des et .
    Dans quel element placer les classes item et grid -row qui sont reprises dans le css (je n’ai pas de boxes.css dans mon skin donc je met les classes dans styles.css) ?
    J’ai essayé de remplacer les span par une div mais ca ne ma

    Merci pour ton aide.
    Pascal

  12. Petite correction post precedent (les balises html que je mentionne ne ressortent pas dans le post)
    En effet, je suis parti sur un template blank sur une 1.3.2.4 sur lequel ne figure pas les ol class grid-row et li class item dans le list.phtml et qui sont remplacé par des tr et td sans classes.

    Merci.

  13. Merci pour vos commentaires.

    Dès que j’ai le temps je vais refaire ce tutoriel sur la dernière version de Magento car il me semble qu’il y ait beaucoup d’erreurs…

  14. Ce tuto m’intéresse grandement mais j’ai les mêmes problèmes que ceux cités dessus ? Y’a t’il eu une mise à jour depuis ? (je n’ai pas trouvé sur le site)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *