Un Layout, par l'aspect de ses composants, peut vous faire penser à tord que vous devez d'abord posséder une solide expérience en langage de programmation. Rien n'est plus faut. Un Layout est construit sur la base de quelques balises XML qui sont rapides et faciles à apprendre. En apprenant quelques concepts clefs et commandes de Layout, vous serez rapidement opérationnel pour modifier en toute confiance le design de votre boutique.

• Comment fonctionnent les Layouts
• Anatomie d'un Layout
• Règles du XML
• Exercices rapides pour vous rendre opérationnel

Back to TopComment fonctionnent les Layouts

Un Layout est un composant virtuel de l'application Magento. En modifiant les composants du Layout, vous pouvez construire votre page dans une optique de maintenance facilitée.

Diagram 1

Un Layout est la somme d'un Layout par défaut et de Layout de mise à jour qui sont composés de tags XML simples. Avec ces commandes de Layout, vous pouvez modifier/assigner des Blocks de contenu, les relations de Blocks structurels et aussi contrôler les fonctionnalités du front-end en chargeant ou non des blocks spécifiques de Javascript dans une page.

Les fichiers de Layout sont organisés dans une arborescence par module, chaque module disposant de sont propre fichier de Layout (par exemple, "catalogue.xml" est un fichier de Layout pour le module catalogue, "customer.xml" est pour le module utilisateurs, ...). Ces fichiers de Layout sont localisés dans app/design/frontend/your_interface/your_theme/layout/ et chaque fichier et découpé par des identifiants (handles) (voir diagram 1), chaque Handle (à l'exception de <default>) définissant ses propres directives à la page liée de la boutique.

Quelques fichiers de Layout peuvent contenir le Handle <default>. Quand il analyse les fichiers de Layout, Magento saisit d'abord les directives du Layout assignées dans l'identifiant <default> pour tous les fichiers de Layout, en les lisant suivant l'ordre défini dans app/etc/modules/Mage_All.xml. Il analyse ensuite les directives spécifiques à la page pour finaliser la construction de la page.

Le système a été construit dans l'optique de permettre des ajout et de suppression de modules sans affecter les autres modules du système.

Back to TopAnatomie d'un Layout

Un Layout contient un petit ensemble de balises XML qui donnent des instructions détaillées à l'application sur comment construire la page, que construire avec et le comportement de chaque block. La meilleure façon de découvrir les Layouts est de s'y attaquer directement. Afin que vous puissiez commencer cela, voici quelques propriétés comportementales de chaque balise XML de Layout.

Handle

Un Handle (diagram 1) est un identifiant par lequel l'application détermine quoi faire avec les directives qu'il comporte.

Si le nom du Handle est <default>, alors l'application sait que ces prochaines directives devront être chargées sur presque toutes les pages de la boutique avant de charger les Layouts spécifiques à chaque page (Nous disons 'presque toutes' car il y a certaine exceptions comme la page de popup pour les zoom d'image produit qui ne chargent pas le Handle <default>).

Si Magento trouve des Handles autres que <default>, il assignera les directives contenues dans ce Handle à la page spécifiée par le Handle. Par exemple, <catalog_product_view> contient les directives de Layout pour la page de Visualisation Produit, alors que <catalog_product_compare_index> contient celles de la page de comparaison des produits. Les Handles sont des identifiants fixes qui ne doivent jamais être changés.

<block>

Magento détermine le comportement et la représentation visuelle de chaque module d'une page par l'intermédiaire de la balise <block>. Nous avons déjà mentionné les 2 types de Blocks que Magento utilise - Blocks structurels et Blocks de contenu. La meilleure façon de distinguer les deux et d'examiner le comportement qui leur est assigné par les attributs des balises. Un Block structurel contient habituellement l'attribut 'as', à travers lequel l'application est capable de communiquer avec les zones désignées (par la fonction getChildHtml) dans un Template. Vous pourrez remarquer plusieurs occurences de l'attribut 'as' dans le Layout par défaut, parceque par nature, le Layout par défaut est celui qui construit la base sur laquelle les Layouts spécifiques aux pages vont pouvoir se greffer. Par exemple, dans le Layout par défaut, il y a des Blocks de structure comme 'left', 'right', 'content' et 'footer' qui sont définis. Cela ne veut pas dire que ces Blocks ne peuvent pas exister dans les directives de Layout normales, mais pourquoi pas d'abord les définir dans le Layout par défaut, puis commencer à ajouter le contenu dans les Layouts spécifiques aux pages ? Avançons dans notre découvert des attributs disponibles pour les <block>.

• type – C'est l'identifiant de la class du module qui défini les fonctionnalités du Block. Cet attribut ne doit pas être modifié.
• name - C'est le nom par lequel les autres Blocks peuvent faire référence au Block dans lequel cet attribut est assigné (voir Diagram 3).
• before (et) after - Il y a deux façon de positionner un Block de contenu dans un Block struturel. before="-" et after="-" sont les commandes utilisées pour positionner les Block au tout début ou à la fin d'un Block structurel.
• template - Cet attribut détermine le Template qui représente les fonctionnalités du Block dans lequel les attributs sont assignés. Par exemple, si cet attribut est assigné catalog/category/view.phtml’, l'application chargera le fichier de Template 'app/design/frontend/template/catalog/category/view.phtml'. Pour apprendre comment les Layouts travaillent avec les Templates pour apporter un gros plus à votre boutique, lisez Construire votre propre thème
• action – <action> sert à contrôler les fonctionnalités du front-end comme le chargement ou non d'un Javascript. Une liste complète des méthodes d'action sera bientôt disponible, mais la meilleure façon d'apprendre ces différentes méthodes d'action reste encore de jouer avec dans les directives de Layout disponibles actuellement.
• as - C'est le nom par lequel un Template appel le Block dans lequel cette attribut est assigné. Quand vous voyez la fonction PHP getChildHtml('block_name') appelée depuis un Template, vous pouvez être sûr qu'elle fait référence au Block dont l'attribut 'as' a reçu le nom 'block_name'. (exemple: la méthode <?=$this->getChildHtml('header')?> dans une Template "Squelette" fait référence à <block as=“header”> )

<reference>

Diagram 3

<reference> est utilisé pour faire référence à un autre Block. En faisant référence à un autre Block, les directives dans <reference> seront appliquée au <block> dont il fait référence (voir diagram 3).

Pour faire une référence, vous devez cibler la référence par un Block en utilisant l'attribut 'name'. Cet attribut cible l'attribut 'name' de la balise <block>. Donc si vous voulez faire une référence par <reference name="right">, vous ciblerez le Block nommé <block name=" right ">.

Back to TopRègles du XML

Diagram 4

Si vous n'êtes pas familier avec l'XML, en rencontrant les directives de Layout pour Magento basées sur du XML, vous aurez certainement quelques questions à propos des règles que vous devrez suivre en modifiant ces fichiers XML.
Le seul ensemble de règles que vous devez connaître pour ce qui est du XML, est que quand une balise est ouverte, elle doit être obligatoirement suivie par une balise de fermeture (<xml_tag></xml_tag>) ou une fermeture directe (<xml_tag/>) exactement comme devraient l'êtres les balises d'un fichier (X)HTML.

Back to TopExercices rapides pour vous rendre opérationnel

Comme pour tout nouveau concept, nous savons que sans mettre les mains dedans, vous ne pourrez jamais vraiment saisir tout ce qui a été expliqué avec des mots. Donc voici quelques exercices pour que vous vous sentiez plus à l'aise en travaillant avec les Layouts. Pour réaliser ces exercices, vous devez avoir le Thème par défaut de Magento prêt et accessible.

Exercice #1: Dans le page de catégorie, déplacez la zone "My cart" de la colonne de droite à celle de gauche

1. Activez "Astuce chemin des gabarits" en allant dans l'admin puis Système -> Configuration. Quand vous êtes sur la page de configuration, sélectionnez la boutique sur laquelle vous travaillez en haut à gauche. Attendez que la page se recharge, puis sélectionnez la rubrique Développeur. Choisissez "oui" dans le champ pour "Astuce chemin des gabarits". Cliquez sur sauvegarder. Retournez sur le front de la boutique, et rechargez.
2. Quand la page se recharge, regardez le chemin de Template du Block 'My Cart' - il indiquera très probablement 'frontend/default/default/template/checkout/cart/sidebar.phtml'. En regardant le chemin, vous savez que ce Template est introduit par le module 'checkout'. Comment est-ce que vous le savez ? - frontend/default/default/template/checkout/cart/sidebar.phtml. Le chemin de Template est ainsi indiqué. Le nom de dossier qui suit immédiatement 'template' est le nom du module à travers lequel un Template est introduit.
3. Ouvrez layout/checkout.xml - parceque maintenant nous savons où faire les modifs pour le module 'checkout'.
4. Chercher 'checkout/cart/sidebar.phtml' (le nom du Template du Block 'My Cart') dans les directives du Layout. Vous trouverrez une zone qui ressemble à ceci :

   <reference name="right">
   	<block type="checkout/cart_sidebar" name="cart_sidebar" before="-" template="checkout/cart/sidebar.phtml"/">
   </reference">
   

   Changer par ce qui suit (Notez que tout ce que vous faites, c'est changer <reference name="right"> par <reference name="left">).

   <reference name="left">
   	<block type="checkout/cart_sidebar" name="cart_sidebar" before="-" template="checkout/cart/sidebar.phtml"/">
   </reference">
   

5. Rechargez le front de la boutique et vous verrez maintenant le changement s'opérer.

Exercice #2: Séparer les liens SEO dans la zone de pied - Au lieu d'avoir les liens dans une seule liste, isolez 'Advanced Search' pour qu'il passe dans la zone de tête.

1. Vous pouvez déjà vous douter que les liens SEO doivent être assignés quelque part dans le Layout sous le Block 'footer' parcequ'il est appelé à travers '<?=$this->getChildHtml()?>' de template/page/html/footer.phtml.
2. Ouvrez layout/page.xml et regardez à travers la liste d'enfants sous le Block 'footer' pour localiser un Block qui appellerait les liens de pied - Vous trouverez <block name="footer_links">, qui est ce qui appel les liens SEO. Maintenant que vous savez que la directive du Layout fait référence aux liens SEO par name="footer_links", vous devez maintenant faire une recherche dans tous les fichiers XML pour trouver <reference name="footer_links">. Vous trouverez les références pour le Block footer_links dans catalog.xml (lequel appel 'Site Map'), catalogsearch.xml (qui appel 'Search Terms' et 'Advanced Search') et contacts.xml (qui appel 'Contact Us').
3. Maintenant que vous avez identifié la zone des items individuels de lien SEO, vous allez maintenant pouvoir commencer l'étape d'isolation de 'Advanced Search' du groupe et le faire devenir un élément à part entière dans le header. D'abord retournez sur page.xml et créez un nouveau Block <block type="core/template_links" name="header_links" as="header_links" template="page/html/links.phtml"/> que vous insérez à l'intérieur de <block name="header">. Vous avez fait en sorte que les directives du Layout attendent ce lien dans header.phtml. Ouvrez template/page/html/header.phtml, et entrez <?=$this->getChildHtml('header_links')?> où vous voulez que le lien apparaisse.
4. Maintenant, allez dans catalogsearch.xml, et coupez ceci :

   <action method="addLink" translate="label title" module="catalogsearch">
   	<label>Advanced Search</label>
   	<url helper="catalogsearch/getAdvancedSearchUrl" />
   	<title>Advanced Search</title>
   </action>
   dans
   <reference name="footer_links">
   

   Créez de nouvelles lignes pour faire référence au nouveau Block header_links que vous avez créé, et insérez le code à l'intérieur comme ceci :

   <reference name="header_links">
   	<action method="addLink" translate="label title" module="catalogsearch">
   		<label>Advanced Search</label>
   		<url helper="catalogsearch/getAdvancedSearchUrl" />
   		<title>Advanced Search</title>
   	</action>
   </reference>
   

5. Maintenant, vous avez le lien vers la recherche avancée dans l'entête au lieu du pied.

Ceci marque la fin du guide du design pour Magento. Nous espérons que vous avez maintenant les connaissances nécessaires sur le fonctionnement du design sous Magento. Ce serait sympa de nous faire profiter de vos travaux en nous donnant vos liens dans le forum. Partagez avec nous vos designs, échangez à propos de cette documentation et posez toutes vos questions sur le forum de la communauté 'HTML, XHTML, CSS, Design Questions'.