Les layouts magento partie 2

octobre 24, 2009 12 Commentaires

Suite au précédent tutoriel sur l’introduction au layout, voici un complément pour comprendre comment magento regroupe les différentes vues possibles pour un module dans un même layout (Pour le module recherche de magento il y a plusieurs vues frontend, la page index de la recherche, la page result). Dans ce tutoriel nous allons étudier le fonctionnement du layout catalogsearch.xml qui est rattaché au module catalogsearch.

Le layout catalogsearch.xml

Magento regroupe toutes les différentes « vues » d’un module dans un même layout. Exemple :
pour la recherche de magento, plusieurs URL de page sont possibles, soit la page index de la recherche avancée qui est

http:www/magento/catalogsearch/advanced (quand l'internaute arrive sur la page de recherche avancée)

Soit le résultat de la recherche avancée :

http:www/magento/catalogsearch/advanced/result (page de résultat).

Magento ne créer pas deux layout pour structurer les différentes vues du frontend (index et result). Il regroupe tout dans le même layout => catalogsearch.xml sous forme de noeud XML correspondant aux vues du frontend traité par le module. Grâce au model view controler magento récupère le noeud du layout correspondant à l’URL demandée. Pour la recherche avancée magento utilise le layout catalogsearch.xml. Ce layout contient plusieurs noeuds principaux en voici deux :

<catalogsearch_advanced_index>
code ....
</catalogsearch_advanced_index>
 
<catalogsearch_advanced_result>
code ...
<catalogsearch_advanced_result>

Chacun de ces noeuds traite une vue de la recherche dans magento :

catalogsearch_advanced_index => pour la page d’index de la recherche avancée.
catalogsearch_advanced_result => pour le résultat de la recherche avancée. etc..

Voici le code de catalogsearch_advanced_index :

<catalogsearch_advanced_index>
 
        <!-- Mage_Catalogsearch -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
            <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
        </reference>
        <reference name="content">
            <block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/form.phtml"/>
            <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
        </reference>
    </catalogsearch_advanced_index>

C’est le même principe vu dans le tutoriel des layouts. Magento place les éléments à l’intérieur des blocs de structure. Il Définit un template de gabarit si besoin, etc..

Vous pouvez ainsi créer une structure de page en fonction des vues du module (index, result..).
Pour comprendre comment magento lie les layouts et définit les noeuds principaux du layout lissez le tutoriel sur le Model view controler.

Liens complémentaires

Layout et magento partie 1

Design
12 commentaires : “Les layouts magento partie 2”
  1. bob dit :

    super ce tuto sur les layouts qui son difficiles à comprendre sans cet explicatif !!!

  2. bob dit :

    Bonjour
    j’ai une question.
    j’ai lu les 2 tutoriaux sur les layout magento mais j’ai pas trouvé de réponse.
    A quoi correspond dans un layout le root et default

  3. admin dit :

    Bonjour
    je fait faire une dernier tutoriel sur les layout. Pour présenter les méthodes importantes des layout et aussi ces noeud XML default et root.
    Mais pour te répondre root c’est l’action racine la première action. Souvent utilisée pour changer l’agencement des pages magento.
    default est appliqué à toutes les pages.

  4. Phel dit :

    Ré ) j’ai du mal avec les layout est ce que tu as fais l’autre tuto

  5. wanted971 dit :

    Hello et merci pour ton blog
    Je me dépatouille et m’égare parmis tous les fichiers et dossiers, j’ai bien réussi à trouver un bloc de contenu mais je ne comprends toujours pas quoi et comment modifier afin que mon left inclue également un bloc reprenant les différentes catégories et un autre bloc reprenant la liste de mes magasins. J’en profite, bons voeux 2010 à tous

  6. cédric rousset dit :

    Pour le bloc reprenant la liste des catégories j’ai fait un tutoriel ici http://bloggento.fr/menu-vertical-magento-comment-lister-les-categories-et-sous-categories-/2461

    Pour la liste des magasins de magento, je n’ai pas en tête le code, je te laisse Degas mettre en place la liste des catégories ^^ le temps que je le retrouve.

    meilleurs voeux également

  7. fatima dit :

    Salut,
    merci pour ce super tuto.j’ai une question dans la page catalogsearch.xml il y a la méthode remove qui prend comme name « right », j’ai essayé de trouver ce nom dans la template 2columns-right.phtml mais j’arrive pas . Merci de me préciser ou se trouve le nom qu’on déclare dans la méthode remove.Merci d’avances

  8. cédric rousset dit :

    Bonjour,
    On déclare dans la méthode remove le nom du block. Si dans un layout il y a écrit remove name= »right » tu supprimes toutes la colonne. Pour supprimer une élément particulier ex la newsletter il faut indiquer son nom

    <remove name="right.newsletter"/>

    ou ça référence as= »"

  9. yannick dit :

    ces explications me permettent de passer un cap ( d’horn peu etre ! ) dans la compréhension de magento – merci pour ce partage

  10. cédric rousset dit :

    De rien bon courage pour les prochains cap :)

  11. siemens dit :

    bonjour!
    vous parlez de quel tuto, est ce que je lis là haut ou il y a un lien sur lequel cliqué qui nous permettrait de télécharger le tuto en question, je le dis parce que je ne comprends pas tout ce que je lis plus haut
    merci!

  12. Hossam Nadorien dit :

    Très bonne explication , merci beaucoup .

Poster un commentaire

(obligatoire)

(obligatoire)