Layout et magento partie 1

octobre 11, 2009 19 Commentaires

Les layout sont des fichiers XML qui définissent la structure d’une page. Ils définissent les différents blocks d’une page et forment une structure de blocks imbriqués. Ils permettent de modifier l’agencement des pages, d’ajouter, retirer,déplacer des éléments (blocs) et ajouter des fichiers CSS, JS . Ils se trouvent dans app\design\frontend\default\default\layout. Chaque module possède son layout comme catalog.xml

Les layout placent les éléments à l’intérieur des blocs de structures (header, footer, content,left…). Nous allons voir dans ce tutoriel le fonctionnement du layout contact.xml et page.xml.

Les layout chargent le gabarit des pages

Le gabarit des pages par défaut se charge dans le layout page.xml (par défaut il charge le template 3colums.phtml). Page.xml a une plus grande importance. C’est le layout par défaut, il charge la plupart des pages « Default layout, loads most of the pages ». Une fois le gabarit chargé, le layout va remplir les éléments du gabarit. Les éléments sont:

La balise head, le block header, le block content, le block  colonne de droite… (voir schéma bleu) Exemple : pour la balise head  le layout y fait référence grâce à ce code :

<block type="page/html_head" name="head" as="head">

Pour une référence au header magento utilise ce code :

<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links" as="topLinks"/>
<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
<block type="core/text_list" name="top.menu" as="topMenu"/>
</block>

ce code fait donc référence au header et ajoute des éléments « link » et « navigation » que vous pouvez voir en orange sur le schéma. Les layout architecturent les blocs d’une page, le rendu visuel se fera grâce aux templates.

layout

A droite le gabarit (blocs de structures) à gauche les blocs de contenu sont placés dans les blocs de structure par les layout

Modifier le gabarit des pages grâce au layout

Le  gabarit 3 colonnes peut être mis à jour dans les autres layout grâce à la méthode setTemplate. Voici le code de mise à jour pour  le layout contact.xml:

 <reference name="root">
 
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
 
<action method="setHeaderTitle" translate="title" module="contacts"><title>Contact Us</title></action>
 
</reference>

Le layout contact.xml définit un gabarit 2 colonnes avec une colonne à droite.

layout contact

layout contact

Vous  pouvez changer ce gabarit et le passer a 1 ou 3 colonnes.. ex : pour le passer en 3 colonnes.

  <action method="setTemplate"><template>page/3columns.phtml</template></action>

La page et maintenant en 3 colonnes.

page contact avec layout 3 columns

page contact avec layout 3 columns

Les layout permettent de placer les blocs de contenus

Magento ajoute donc des éléments (blocs) en les ciblant grâce à référence name =  « content » ou référence name = left..

Pour le layout contacts.xml,  magento appelle le block  form.phtml , il contient le formulaire de contact vue par l’internaute, il fait référence au template contacts/form.phtml qui contient le code permettant d’afficher le formulaire .

<reference name="content">
<block type="core/template" name="contactForm" template="contacts/form.phtml"/>
</reference>

Les layout pour supprimer un élément : la méthode remove

Les layout permettent également de supprimer un élément. Nous allons voir comment supprimer le panier de la colonne de droite. Il suffit de cibler la colonne avec « reference name = » et de la supprimer avec la méthode remove :

<reference name ="rigth">
<remove name="cart_sidebar"/>
</reference>

Les layout pour rajouter un élément dans la balise head d’une page CSS, JS

Les layout permettent également de rajouter des CSS ou JS dans la balise  head de la page. Si vous voulez importer un fichier CSS pour la page contact, c’est le même principe, ciblez la balise head avec « reference name = »  et  ajoutez :

<reference name="head">
<action method="addCss"><stylesheet>css/contact.css</stylesheet></action>
</reference>

Liens complémentaires

Les layouts magento partie 2

Design
19 commentaires : “Layout et magento partie 1”
  1. Seve dit :

    Bonsoir
    je termine un ajout de template avec un layout.
    Je cible la colonne de droite dans mon layout, j importe le template mais celui-ci s’ajoute également dans le footer

  2. cédric rousset dit :

    Bonjour Seve,
    Il faut que tu donnes un nom à ton template ex: name= »seve ».



    Dit moi si le block disparaît du footer.

  3. Seve dit :

    Merci Magento n affiche plus le blog en double quand je le nomme. Thanks

  4. geofbou dit :

    J’ai suivi ce tuto qui m’a permis de comprendre pas mal de choses car je commence tout juste à tripatouiller magento.
    j’aurais aimé comprendre comment fait on pour trouver le nom du module que l’on veut faire disparaitre ou apparaitre
    dans l’exemple « cart_sidebar ».

    <reference name ="rigth"

    si je veux supprimer « compare prdoduct » ou « rencetly viewed products » dans la colonne de droite en frontend dans la page contact. ou puis-je trouver le nom de ce module pour le supprimer avec la même methode que dans l’exemple ?

  5. cédric rousset dit :

    Bonjour,
    Tu le trouvera dans le layout approprié, dans ton cas contact.xml
    Je prépare un autre tutoriel sur les layout magento, ou je vais lister les élements que l’ont peut supprimer avec les layout. et avec leur nom ‘car_sidebar’ whishlist….
    Repasse dans quelques jours :)

  6. Tremblay dit :

    Bonjour,
    Tout d’abord merci pour ce blog car je sens que je vais en avoir bien besoin !
    Ensuite, il y a quelque chose que je ne comprends pas, dans le dossier app\design\frontend\default\default\ je n’ai que deux dossier : etc/ et locale/

    A peine commencé, déjà bloqué !
    Mais si je vais dans app\design\frontend\base\default\, j’ai les dossiers template/ layout/ et etc/

    Merci de m’éclairer car là je sèche un peu et Magento est tout nouveau pour moi !
    Bonne soirée

  7. cédric rousset dit :

    Bonjour,
    Dans la dernière version, il existe un nouveau niveau de dossier  » base « .
    Donc c’est normal. Peut-être que ce tutoriel t’aidera :)
    http://bloggento.fr/syteme-de-template-magento-1-4-/3071

    Les layout se trouvent dans le dossier base default ou
    default blank ou default modern ( de mémoire ) à vérifier.
    Bon courage n’hésite pas pour les questions.

  8. Tremblay dit :

    Bonsoir,
    Merci pour ta réponse très rapide, je n’avais pas vu pourtant je suis tous les jours sur ton site !
    Ok maintenant je comprends un peu mieux l’histoire avec le dossier « base » mais j’ai quelques questions :

    1. Lorsque je me rends sur la partie Administration, il y a fenêtre qui s’ouvre pour m’avertir qu’il existe une nouvelle version de Magento ! Mais je sûr d’avoir installer (même ré-installer) l

  9. Tremblay dit :

    Oups, je me suis embrouillé les pinceaux, désolé, je continue mon message :

    Mais je sûr d’avoir installer (même ré-installer) la dernière version de Magento !

    2. page.xml charge « page/2columns-right.phtml » et j’aimerais qu’il charge à la place « page/1column.phtml ». J’ai regardé, décortiqué page.xml mais je ne vois pas où est ce qu’il charge ce template ! Sur un forum, j’ai vu qu’il fallait passer par l’administration (CMS -> Page) mais j’obtient un « There has been an error processing your request » !

    3. Je dois par la suite, modifier le style (je suis parti du thème blank), est-ce difficile ?? :p

    Merci beaucoup ! Et bravo pour ce site qui en aide plus qu’un !

  10. Tremblay dit :

    Autre petite question sur laquelle je bloque depuis pas mal d’heures !
    Comment puis-je faire pour enlever les sortes de pubs (callouts) sur ma page home (http://uptonpark.biz/shop/index.php/) ?? Le seul moyen que j’ai trouvé, c’est de commenter la ligne getChildHtml(‘content’) . Si j’ai bien compris, cette fonction va récupérer le template qui a été assigné à content dans page.xml, nan ?

    Merci de m’éclairer !
    Bonne soirée !

  11. cédric rousset dit :

    Bonjour Tremblay,
    Pour la mise a jour de magento, cette message s’affiche tout le temps (même quand tu as la bonne version de magento) Donc n’en tiens pas compte. (tu peux désactiver les notifications).

    Pour le layout de ta page que tu veux passer en 1 colum. Si c’est la page d’accueil il vaut mieux le faire par le back office oui CMS gestion des pages => home et tu applique un layout 1colum.

    Partir du thème blank et plus difficile oui car il y a rien, il faut tout habillé. Mais c’est aussi plus propre et au final tu aura un css plus ligth et propre.

    Pour l’image callout regarde dans le layout catalog.xml

      <!-- <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
                    <action method="setImgSrc"><src>images/media/col_left_callout.jpg</src></action>
                    <action method="setImgAlt" translate="alt" module="catalog"><alt>Our customer service is available 24/7. Call us at (555) 555-0123.</alt></action>
                    <action method="setLinkUrl"><url>checkout/cart</url></action>
                </block>-->

    Bon courage !

  12. Tremblay dit :

    Bonjour,
    Quand je vais dans CMS -> Pages, j’obtient un « There has been an error processing your request » ! Commnent faire ?

    Merci !

  13. Tremblay dit :

    Ooutch, j’ai enfin réussi à accéder à CMS > Pages ! un problème d’encodage …
    Si ça arrive à quelqu’un, ajoutez ces deux lignes dans index.php à la racine :

    iconv_set_encoding(« internal_encoding », « UTF-8″);
    iconv_set_encoding(« output_encoding », « ISO-8859-1″);

    Une autre question : J’aimerais afficher les catégories sur ma page Home donc dans Content ? Quel genre de code dois-je rajouter ? (template, layout ?) et où ? (directement dans CMS > Pages ?)

    En tout cas merci beaucoup Cedric car tu m’as pas mal aidé !

    Bonne fin de journée !

  14. cédric rousset dit :

    Salut,
    Merci pour ton retour tremblay ça servira à d’autres membres.
    Pour les catégories dans la partie content de magent, tu peux suivre ce tutoriel
    http://bloggento.fr/menu-vertical-magento-comment-lister-les-categories-et-sous-categories-/2461

    dans le layout au lieu de mettre référence namne = left tu met content.

    ;)

  15. Tremblay dit :

    Rien ne s’affiche !
    J’ai rajouté le code xml dans l’onglet « custom design » de ma catégorie Root !
    Est-ce bien ça ?

    Merci!

  16. Tremblay dit :

    A la place, j’ai rajouté le code dans CMS > Pages > Home et ça marche !

  17. cédric rousset dit :

    Bonjour,
    Oui tu peux le rajouter dans CMS > gestion des pages > home, c’est conseillé dans ton cas puisque tu cherches à intervenir sur la page d’accueil de magento.
    Les layout ne vont plus avoir de secret pour toi :)

  18. alfrai dit :

    Bonjour !

    Comment s’inscrit-on (gratuitement) à la Newsletter du blog pour recevoir directement par e-mail les prochains tutoriels. J’ai beau chercher, je ne trouve aucun formulaire.

  19. cédric rousset dit :

    Voilà c’est ajouté sur la colonne droite. Je traduirai plus tard :)

Poster un commentaire

(obligatoire)

(obligatoire)