Magento : Design Personnalisé Layout

Vous pouvez changer l’apparence de la colonne de gauche ou de droite de votre template Magento en éditant directement le fichier xml mais ce n’est pas si simple car il faut éditer plusieurs fichiers et à de nombreux endroits.

Le plus simple est de le faire au niveau de l’interface d’administration et Magento permet de mettre à jour l’apparence (design) assez simplement.

Cliquer sur Catalog -> Manage Categories, cliquer sur votre catégorie et dans l’onglet « Design Personnalisé » et ajouter votre agencement dans le champ  « Mise à jour de l’agencement personnalisé », exemple :

<reference name="left"> 
 <action method="unsetChild"><name>cart_sidebar</name></action>
 <action method="unsetChild"><name></name></action>
 <action method="unsetChild"><name>right.poll</name></action> 
 <action method="unsetChild"><name>left.reports.product.viewed</name></action>
 <action method="unsetChild"><name>left.newsletter</name></action>
 <action method="unsetChild"><name>paypal.partner.right.logo</name></action>
 <block type="checkout/cart_sidebar" before="right.permanent.callout" name="cart_sidebar" template="checkout/cart/sidebar.phtml" />

Dans cette exemple, j’ai supprimé les block indésirables et ajouté mes blocks.

Note: J’ai édité le layout de mon template et il faut adapter au votre.

You pouvez également ajouter votre block CMS comme par exemple :

<block type="cms/block" name="steps"><action method="setBlockId"><block_id>steps</block_id></action>

Et créer votre Block Static avec l’identifiant « steps » avec ce que vous voulez.

Pour identifier le nom des blocks par défaut, il faut consulter le fichier xml de votre template dans le répertoire the app/design/frontend/default/<template>/layout.

Par exemple, le fichier category.xml:

        <reference name="left">
            <block type="catalog/product_compare_sidebar" after="cart_sidebar" name="" template="catalog/product/compare/sidebar.phtml"/>
            <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml" after="cart_sidebar">
                <action method="setImgSrc"><src>images/media/sidebar-banner.jpg</src></action>
                <action method="setImgAlt" translate="alt" module="catalog"><alt>Keep your eyes open for our special Back to School items and save A LOT!</alt></action>
                                <action method="setLinkUrl"><url>checkout/cart</url></action>

Comme vous le voyez, le block est défini dans ce fichier.

Des fois, magento crée des blocks en double et je vous conseille de tester sur votre système de développement au préalable.


You may be interrested by my Magento Module API  : Myapi_Myconf !

Nicolas Portais
Author Photographer

Ce contenu a été publié dans Non classé, avec comme mot(s)-clé(s) , , , , , , . Vous pouvez le mettre en favoris avec ce permalien.

11 réponses à Magento : Design Personnalisé Layout

  1. dit :

    Hi, Great post. Be sure to stop by and leave a comment on my blog.


  2. cannabis information dit :

    Spot on with this write-up, I really believe this site needs a lot more
    attention. I’ll probably be returning to read more, thanks for the advice!

  3. dit :

    Hi! Do you use Twitter? I’d like to follow you if that would be ok.

    I’m absolutely enjoying your blog and look forward to new posts.

  4. niềng răng dit :

    Thanks , I’ve just been searching for information about this topic for ages and yours is
    the best I’ve came upon so far. However, what about the bottom line?
    Are you sure concerning the supply?

  5. Mary dit :

    Excellent weblog here! Also your website loads up fast!

    What host are yoou using? Can I get your affliate hyperlink in your host?

    I desire my website loaded up as fast as yours lol

  6. sua nghe gold dit :

    I’m amazed, I must say. Rarely do I encounter a blog that’s both educative and
    interesting, and let me tell you, you have hit the nail on the head.
    The issue is an issue that not enough folks are speaking intelligently about.
    I am very happy that I found this during my search for something regarding this.

  7. Dario dit :

    Thank you for sharing superb informations.
    Your web-site is very cool. I’m impressed by the details that you’ve on this site.
    It reveals how nicely you understand this subject. Bookmarked this web
    page, will come back for more articles. You, my
    pal, ROCK! I found just the information I already searched everywhere and simply could
    not come across. What a perfect web-site.

  8. internet dit :

    Hey there! I know this is somewhat off topic but I was wondering
    which blog platform are you using for this site? I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of a good platform.

  9. internet dit :

    Please let me know if you’re looking for a article writer for your site.
    You have some really great articles and I feel I
    would be a good asset. If you ever want to take some of the load off,
    I’d love to write some material for your blog in exchange for a link back to
    mine. Please blast me an e-mail if interested.

  10. check here dit :

    Hey, I think your website might be having browser compatibility issues.
    When I look at your blog site in Safari, it looks
    fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, terrific blog!

Laisser un commentaire

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

Captcha (solve the arithmetic equation) * Time limit is exhausted. Please reload CAPTCHA.