Design pour Magento

Traduction réalisée par Dustea. Merci à elle ! Vous pouvez télécharger son fichier de traduction :
version Word
version PDF

Créer un nouveau theme

Comment dupliquer un nouveau thème :

Le premier pas sera de dupliquer la structure du dossier de thème « défault », on pourra ainsi toujours revenir à ce thème si on fait une erreur. La structure du template par défaut de Magento est montrée ci-dessous, il y a deux dossiers à dupliquer. Dupliquer signifie créer un nouveau dossier avec le même contenu que le dossier source. La méthode la plus simple est de copier le dossier du thème d’origine ou de le dupliquer avec un SSH (Secure Shell) ou un équivalent.

Structure de base du dossier des thèmes :

  1. /app/design/frontend/default/default/ - personnalisations du thème
Nous nommerons le nouveau thème (template) « new_theme ». La structure du dossier de thème ressemblera alors à :

Nouvelle structure du dossier des thèmes :

  1. /app/design/frontend/default/default – theme par défaut
  2. /app/design/frontend/default/new_theme/ - notre nouveau theme dupliqué
  3. /skin/frontend/default/default - emplacement des feuilles de style et des images du thème
  4. /skin/frontend/default/new_theme/ - notre nouveau dossier dupliqué de feuilles de style et d’images
On n’a pas besoin de dupliquer toute la structure : si un fichier requis est manquant dans le dossier du « new_theme », celui du dossier du thème par défaut sera utilisé.

Comment mettre en place le nouveau thème dans l’admin ?

Après avoir dupliqué les dossiers, on doit changer le thème dans la console d’administration de la boutique.

Etape 1 : Aller dans Système > Configuration > Design
Etape 2 : Dans le champ texte du thème, inscrire : new_theme
Etape 3 : Cliquer sur le bouton « Save config » en haut à droite.

Ajouter des feuilles de style et des librairies js (Partie I)

Les nouvelles feuilles de style (css) ou les librairies javascript/ajax (js) que nous voulons ajouter dans notre nouveau thème doivent également être copiées aux bons endroits :

Les feuilles de style (ou stylesheets)
Copiez les fichiers dans le dossier : /skin/frontend/new_template/default/css/ N’oubliez pas d’inclure toutes les nouvelles feuilles de style dans le fichier styles.css. Ajoutez :

  1. @import url('new_styles.css');
Après
  1. @import url('custom.css');

Librairies Javascript / AJAX
Créez un nouveau dossier nommé « custom_js » dans le dossier /js/ et copiez vos fichiers js dedans. Si vous utilisez des librairies javascript, c’est également le bon endroit pour les mettre.

Utiliser le XML pour changer l’agencement

Avec l’utilisation du XML, on peut changer presque tous les aspects de notre nouveau template. Par exemple, on peut définir une disposition alternative des colonnes pour une page en particulier, changer les informations META, l’encodage d’une page, le type de blocs utilisés sur chaque page etc. Les fichiers XML de chaque dossier font référence à la ‘vue’ (ou écran) que l’on veut changer. Chaque ‘vue’ a un fichier initLayout.xml qui en contrôle l’apparence. Chaque vue a également des fichiers XML additionnels qui s’ajoutent à ce qui existe par défaut.

Changer la section META

Le fichier principal pour les balises META et autres détails divers est config.xml et se trouve dans le dossier /app/design/frontend/new_template/default/etc/

Ci-dessous vous trouverez une description succincte des balises META et leurs valeurs possibles :

  1. <title>Magento Commerce</title>
C’est le nom de notre site de eCommerce. Ce texte apparaîtra dans la barre de titre du navigateur ou dans le browser tab. Ce texte est également très important pour l’optimisation des mots clés pour les robots de référencement.
  1. <media_type>text/html</media_type>
 C’est l’encodage par défaut, mieux vaut le laisser ainsi.
  1. <charset>utf8</charset>
 UTF8 is a variable-length character encoding for Unicode. It is able to represent any character in the Unicode standard, yet the initial encoding of byte codes and character assignments for UTF-8 is backwards compatible with the ASCII table. For these reasons, it is steadily becoming the preferred encoding for e-mail, web pages, and other places where characters are stored or streamed.

On peut bien sûr le changer pour n’importe quel autre encodage, (ex. ISO-8859-1 ou ISO-8859-2) mais c’est inutile à partir du moment où l’on enregistre nos fichiers avec l’encodage UTF8 qui va bien.

Vous trouverez plus d’informations sur l’UTF8 sur le wiki : http://en.wikipedia.org/wiki/UTF-8 et http://fr.wikipedia.org/wiki/UTF-8

  1. <description>Default Description</description>
La balise « description » permet d’inscrire une courte description de notre site. C’est grâce à elle que vous pouvez mettre une description pertinente de votre page qui apparaîtra dans les résultats des moteurs de recherche. La meilleure chose à faire est d’écrire une ou deux phrase(s) succincte(s) qui résume(nt) le contenu de votre page et qui contienne(nt) les mots clés appropriés.
  1. <keywords>Magento, Varien, E-commerce</keywords>
 La balise « keywords » sert à définir les mots clés les plus importants qui caractérisent le mieux le contenu de votre page. Pour de meilleurs résultats, l’idéal est de ne pas dépasser 500 caractères en 20 mots clés.
  1. <robots>*</robots>
 La balise « robots » indique aux robots des moteurs de recherche si une page doit être indexée ou non et si les liens qu’elle contient doivent être suivis. Les directives contenues dans cette balise sont séparées par des virgules. Les directives décrites ci-dessus sont définies par les valeurs : index, noindex, follow et nofollow, respectivement pour l’indexation ou non de la page et le suivi ou non des liens. Par défaut ces valeurs sont index et follow. Vous pouvez utiliser les valeurs all (qui équivaut à index, follow) et none (qui équivaut à noindex, nofollow). On peut remplacer simplement les directives par défaut de Magento par une des quatre lignes suivantes, mais ce n’est pas recommandé. Les options sont :

Index, follow,
Noindex, follow
Index, nofollow
Noindex, nofollow

Le fichier config.xml contient également deux balises additionnelles, qui n’ont aucun rapport avec les balises META mais qui sont utilisés comme valeur par défaut sur toutes les pages de notre boutique.

  1. <logo_src>images/logo.gif</logo_src>
La balise « logo_src » fait référence au fichier de logo que l’on souhaite utiliser sur notre site. L’image logo.gif est située dans le dossier /skin/frontend/new_template/default/images/ donc si on souhaite la changer, on peut soit faire un autre fichier de logo ou mettre un autre logo dans un nouveau dossier contenu dans celui-ci et changer de façon appropriée la valeur de la balise, soit, ce qui reste le plus simple, remplacer le fichier déjà en place en l’écrasant.

Comprendre la disposition en fichiers .XML

Introduction

Utiliser le XML plutôt que d’autres méthodes (telles que JSON, les fichiers .ini, les fonctions include ou require) nous permet de changer de nombreux aspects de notre page sans changer manuellement le fichier .phtml. Ce chapitre fait référence à notre thème par défaut, donc si on veut travailler sur un autre thème (comme on l’a fait plus haut), les chemins changent en conséquence.

Disposition et structure de page

Votre ‘core’ disposition est définie par default.xml qui se situe dans /app/design/frontend/default/layout/core/default.xml

Ce fichier fait deux choses :

Premièrement, il définit l’agencement par défaut des éléments de votre boutique. Par défaut, MAGENTO utilise un agencement à 3 colonnes, donc le fichier default.xml définit l’utilisation du fichier 3columns.phtml (situé dans votre dossier template/page/) :

  1. <layoutUpdate>
  2. <block type="page/html" name="root" output="toHtml">
  3. <action method="setTemplate"><template>page/3columns.phtml</template></action>

Si vous vouliez changer la présentation de votre boutique par un agencement en 2 colonnes, vous changeriez la ligne correspondante (reprise ci-dessous) pour déclarer l’utilisation du fichier .phtml dont vous avez besoin (dans ce cas, le fichier 2columns-left.phtml ou le fichier 2columns-right.phtml).

  1. <action method="setTemplate"><template>page/2columns-right.phtml</template></action>

Vous trouverez plus d’informations au sujet de la balise « action » dans la section d de ce chapitre.

Deuxièmement, le fichier default.xml crée des « blocs containers » filled with application data for output to your .phtml template files. D’abord, si vous regardez au fichier standard 3 columns.phtml, vous verrez qu’il appelle la méthode (ou fonction) getChildHtml() un certain nombre de fois :

(extrait du fichier 3columns.phtml à partir de la ligne 56)

  1. <?=$this->getChildHtml('header')?>
  2. /div><!-- [end] header --><!-- [start] middle --><div class="main-container">
  3. <div id="main" class="col-3-layout">
  4. <?=$this->getChildHtml('breadcrumbs')?>
  5. <!-- [start] left -->
  6. <div class="col-left side-col">
  7. <?=$this->getChildHtml('store')?>
  8. <?=$this->getChildHtml('left')?>
  9. </div>
  10. <!-- [end] left -->

Chacun de ces points fait référence aux « blocs containers » définis dans votre fichier default.xml ainsi que les autres fichiers modules en .xml. Vous noterez qu’il y a un container pour la colonne de gauche ‘left’, de droite ‘right’, pour le contenu ‘content’ et les autres zones standards d’une page web. Ces références déterminent des sorties de données qui seront utilisées par les fichiers .phtml. Regardez comment :

/app/design/frontend/default/core/default.xml

  1. <block type=”page/html_breadcrumbs” name=”breadcrumbs” as=”breadcrumbs”/>
  2. <block type=”core/text_list” name=”left” as=”left”/>
  3. <block type=”core/messages” name=”global_messages” as=”global_messages”/>
  4. <block type=”core/messages” name=”messages” as=”messages”/>
  5. <block type=”core/text_list” name=”content” as=”content”/>
  6. <block type=”core/text_list” name=”right” as=”right”>

Pour résumer, par défaut, votre fichier default.xml crée des « Blocs de données », votre fichier .phtml fait ressortir ces données où vous le souhaitez. D’où les noms ‘left’, ‘right’, ‘content’, etc. pour les éléments de votre fichier .phtml.

Même après, VOS propres modules viendront mettre à jour les « blocs containers » disponibles avec un contenu plus spécifique. Par exemple, vous noterez qu’une fois que vous avez navigué au-delà de la page d’accueil, et cliqué une catégorie, la « Compare Box » (boîte de comparaison) apparaît. Une fois que vous avez cliqué, les éléments de navigation apparaissent.

Ces blocs sont rendus visibles grâce à leurs fichiers spécifiques initLayout.xml. Ces fichiers mettent à jour votre disposition par défaut avec plus de blocs spécifiques. Ainsi, pour que la « boîte de comparaison » apparaisse, on paramètre qu’elle s’affiche une fois que le catalogue actuel est cliqué. C’est donc paramétré dans le fichier layout/catalog/initLayout.xml.

Voilà le code :

  1. <layoutUpdate>
  2. <reference name="top.menu">
  3. <block type="catalog/navigation" name="catalog.topnav">
  4. <action method="setTemplate"><template>catalog/navigation/top.phtml</template></action>
  5. </block>
  6. </reference>
  7. <reference name="right">
  8. <block type="catalog/product_compare_sidebar" name="catalog.compare.sidebar">
  9. <action method="setTemplate"><template>catalog/product/compare/sidebar.phtml</template></action>
  10. </block>
  11. </reference>

Si vous lisez le code et pensez à ce qui va se passer, cela prend un sens. La balise <layoutUpdate> MET A JOUR votre code avec les nouveaux blocs. Comment il sait où mettre les nouveaux blocs ? Souvenez-vous de votre fichier default.xml où vous avez définit les « blocs containers » pour les éléments ‘right’, ‘left’, etc. Donc quand ça dit :

  1. <reference name = "right">

Ca dit à MAGENTO d’insérer le bloc suivant dans la colonne de droite (‘right’) quand vous allez dans la partie ‘Catalog’ (puisque c’est situé dans l’arborescence au niveau layout/catalog/). Et donc le bloc apparaît quand vous naviguez dans la section catalogue de la boutique. Ca définit également un « template » à utiliser pour ce nouveau bloc, dans notre exemple, la « boîte de comparaison » a sa propore définition de gabarit (= template) qui se situe dans catalog/product/compare/sidebar.phtml (dans le dossier de votre thème).

Les valeurs/attributs des noms de référence :

Comme nous l’avons vu, les références peuvent utiliser différents attributs pour afficher les blocs sur votre page. Les valeurs possibles sont :

root – on le changera principalement pour ajouter un nouveau fichier .phtml en tant que template de base (exemple : 1column.phtml, 2columns-left.phtml, 2columns-right.phtml, etc.)

head – qui sera utilisé pour les changements dans la partie <HEAD> d’une page.
top.menu – définit le contenu pour le menu du haut.
left – définit le contenu pour la colonne de gauche.
right – définit le contenu pour la colonne de droite.
content – définit les blocs placés dans la partie de contenu principale de notre page.
before_body_end – est uilisé pour ajouter un block avant la fin de notre page marquée par la balise </BODY>

Il existe d’autres noms de référence, mais ils sont plus spécifiques à une page donnée qu’à une utilisation globale, par exemple :

customer_account_navigation
customer_account_dashboard

sont utilisés sur les pages de compte client.

product.info.additional – définit un bloc supplémentaire pour insérer les « produits associés », « calculateur de frais de port », etc.

Les méthodes (ou fonctions) d’actions :

Les méthodes d’actions nous permettent de changer beaucoup de paramètres du thème, sans faire de changement « à la main » dans nos fichiers .phtml. La méthode listée dans les attributs d’une méthode fait référence à une méthode dans le Model qui est associé avec le blocs dont il est question. Les méthodes les plus importantes sont décrites ci-dessous :

SetTemplate

La méthode d’action setTemplate nous permet de changer le fichier .phtml utilisé par défaut pour un bloc déterminé. Par exemple, en navigant dans app/design/frontend/default/default/layout/catalog/product/view.xml on peut voir la référence :

  1. <reference name="root">
  2. <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
  3. </reference>

et en atribuant une autre valeur à <template>, on peut changer le fichier .phtml utilisé par défaut pour notre page produit. Les valeurs de <template> possibles sont :

1column.phtml
2columns-left.phtml
2columns-right.phtml
3columns.phtml
one-column.phtml
dashboard.phtml

Comme on peut le voir dans app/design/frontend/default/default/layout/checkout/cart.xml, il y a également 2 valeurs pour un panier vide ou non.

  1. <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
  2. <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
  3. <action method="chooseTemplate"/>

La méthode chooseTemplate est utilisée pour attribuer une valeur de template (setCartTemplate / setEmptyTemplate) en fonction du nombre de produits dans votre panier. Si on en a plus de 0, alors c’est :

  1. <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>

qui est utilisé. Si on n’en a pas, c’est le suivant qui est utilisé :

  1. <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action<

La fonction fournie par le Modèle est décrite ci-dessous :

  1. public function chooseTemplate()
  2.    {
  3.       if ($this->getQuote()->hasItems()){
  4.          $this->setTemplate($this->getCartTemplate());
  5.       } else {
  6.          $this->setTemplate($this->getEmptyTemplate());
  7.       }
  8.    }

Ce qui peut apporter des précisions sur comment utiliser cette permutation particulière. En fonction de nos besoins, on peut écrire de nouvelles fonctions personnalisées dans nos blocs et ainsi assigner un « template » en conséquence des résultats retournées par une fonction.

addCss

Cette méthode sert à ajouter un fichier CSS additionnel à notre page sur une base du « page-par-page » ou du global.

Si on utilise le nom référence « head » et la métode d’action addCss ainsi :

  1. <reference name="head">
  2. <action method="addCss"><link>style.css</link></action>
  3. </reference>

alors notre page aura une ligne de code additionnelle pour attacher le fichier de feuille de style style.css. Ce qui donnera par exemple :

  1. <link rel="stylesheet" type="text/css" media="all" href="http://www.ourstore.com/skin/frontend/default/default/css/style.css" ></link>

Comme on peut le voir, le chemin utilisé par la balise fait référence au dossier /skin/frontend/default/default/css/

addCssIe

Cette méthode est très similaire à la précédente, mais elle permet d’attacher une feuille de style qui sera utilisée quand le navigateur du visiteur sera Internet Explorer ou Maxthon. Donc en utilisant cette méthode, on peut attacher une feuille de style spécifique pour ces navigateurs. C’est très utile si votre page nécessite des ajustement de feuilles de styles qui dépendent d’un navigateur spécifique.

Usage :

  1. <reference name="head">
  2. <action method="addCssIe"><link>style.css</link></action>
  3. </reference>

écrit dans la page :

  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" media="all" href="http://www.ourstore.com/skin/frontend/default/default/css/style.css"></link>
  3. <![endif]-->
addJs

addJs est une méthode utile pour attacher un script .js de la même manière que nous avons pu attacher une feuille de style avec addCss. Le chemin du script sera par défaut le dossier /js/varien/ mais on peut le changer en focntion de nos besoins.

Usage :

  1. <reference name="head">
  2. <action method="addJs">varien/script.js</action>
  3. </reference>

Va ajouter un script à notre page avec l’attribut src :

  1. <script src="http://www.ourstore.com/js/varien/product.js" />
addJsIe

Ajoute un fichier .js dans la partie <head> de notre page quand un navigateur Internet Explorer ou équivalent est utilisé. Si on peut ajouter différentes feuilles de style en fonction du navigateur utilisé, on peut également faire la même chose avec nos fichiers .js. Ainsi, on peut utiliser différents scripts pour les utilisateurs IE/Maxthone et pour les utilisateur d’autres navigateurs.

Usage :

  1. <reference name="head">
  2. <action method="addJsIe">our/script.js</action>
  3. </reference>

Va ajouter un script à notre page avec l’attribut src :

  1. <script src="http://www.ourstore.com/js/our/script.js" />

Et ce toujours dans les balises de commentaire pour Internet Explorer :

  1. <!--[if IE]><![endif]-->
setContentType

La méthode setContentType permet d’outrepasser les infos par défaut contenues dans la partie <head> de notre page et qui sont envoyées au navigateur. On peut ainsi changer la valeur du paramètre <content> et inscrire text/xml à la place de text/html (ou un autre si on le souhaite).

Usage :

  1. <reference name="head">
  2. <action method="setContentType"><content>text/xml</content></action>
  3. </reference>
setCharset

Nous permet d’outrepasser les infos d’encodage <charset> par défaut de la partie <head> en « page-par-page » ou de manière globale. A partir du moment où l’on enregistrera nos fichiers avec le bon encodage, ceci ne sera pas nécessaire.

Usage :

  1. <reference name="head">
  2. <action method="setCharset"><charset>ISO-8859-2</charset></action>
  3. </reference>

Dans ce cas précis, on a changé l’encodage UTF-8 par défaut par un encodage d’Europe centrale ISO-8859-2.

addLink

La méthode addLink peut être utilisée pour définir un paramètre auquel on peut faire référence dans nos fichiers de template .phtml sans avoir à intervenir manuellement dans ces fichiers .phtml.

Exemple d’usage :

En ajoutant un bloc issu du fichier app/design/frontend/default/default/layout/customer/account.xml dans notre <reference name=”content”> du fichier app/design/frontend/default/default/layout/checkout/cart.xml on peut permettre aux consommateurs d’accéder aux informations du compte directement depuis le panier.

  1. <block type="customer/account_navigation" name="customer_account_navigation" before="-">
  2. <action method="setTemplate"><template>customer/account/navigation.phtml</template></action>
  3. <action method="addLink" translate="label"><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
  4. <action method="addLink" translate="label"><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
  5. <action method="addLink" translate="label"><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label>
  6. </block>

Le fichier cart.xml devrait maintenant ressembler à :

  1. <layoutUpdate>
  2.    <reference name="root">
  3.       <action method="setTemplate"><template>page/1column.phtml</template></action>
  4.    </reference>
  6.    <reference name="content">
  7.       <block type="customer/account_navigation" name="customer_account_navigation" before="-">
  8.          <action method="setTemplate">
  9.             <template>customer/account/navigation.phtml</template>
  10.          </action>
  11.          <action method="addLink" translate="label">
  12.             <name>account</name>
  13.             <path>customer/account/</path>
  14.             <label>Account Dashboard</label>
  15.          </action>
  16.          <action method="addLink" translate="label">
  17.             </action>address_book</name>
  18.             <path>customer/address/</path>
  19.             <label>Address Book</label>
  20.          </action>
  21.          <action method="addLink" translate="label">
  22.             <name>account_edit</name>
  23.             <path>customer/account/edit/</path>
  24.             <label>Account Information</label>
  25.             <base>{{baseSecureUrl}}</base>
  26.          </action>
  27.       </block>
  28.       <block type="checkout/cart" name="checkout.cart">
  29.          <action method="setCartTemplate">
  30.             <value>checkout/cart.phtml</value>
  31.          </action>
  32.          <action method="setEmptyTemplate">
  33.             <value>checkout/cart/noItems.phtml</value>
  34.          </action>
  35.          <action method="chooseTemplate"/>
  37.          <block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon">
  38.             <action method="setTemplate">
  39.                <template>checkout/cart/coupon.phtml</template>
  40.             </action>
  41.          </block>
  42.          <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping">
  43.             <action method="setTemplate">
  44.                <template>checkout/cart/shipping.phtml</template>
  45.             </action>
  46.          </block>
  47.          <block type="checkout/cart_crosssell" name="checkout.cart.crosssell" as="crosssell">
  48.             <action method="setTemplate">
  49.                <template>checkout/cart/crosssell.phtml</template>
  50.             </action>
  51.          </block>
  52.       </block>
  53.    </reference>
  54. </layoutUpdate>

Bien sûr, avec ce qu’on a vu plus haut, on peut également changer dans le code précédent :

  1. <action method="setTemplate"><template>page/1column.phtml</template></action>

pour répondre à nos besoins. Pour montrer notre panier sans les autres blocs, j’ai utilisé par exemple :

  1. <action method="setTemplate"><template>page/one-column.phtml</template></action>

Agencement des blocks

Comme on l’a vu auparavant, la plupart de nos fichiers .xml ont une balise <block>. Elle définit un type ‘type’ de bloc, son nom ‘name’ et son alias ‘as’ de manière à ce qu’on puisse lui faire référence dans nos pages. La structure d’un bloc standard ressemble à ça :

  1. <block type="catalog/product_view_super_config" name="product.info.config" as="super_config">
  2. <action method="setTemplate"><template>catalog/product/view/super/config.phtml</template></action>
  3. </block>

type=”catalog/product_view_super_config” – définit le type de notre bloc sur la page. Cet exemple fera référence au fichier /app/code/core/Mage/Catalog/Block/Product/View/Super/Config.php qui définit la classe Mage_Catalog_Block_Product_View_Super_Config name=”product.info.config” – détermine un nom pour notre bloc et doit être unique as=”super_config” – donne un ‘surnom’ à notre bloc que l’on peut utiliser avec la fonction getChild sur une page en particulier.

Les blocs utilisés dans nos fichiers .xml peuvent changer ou outrepasser à peu près tous les aspects de notre design. On peut les utiliser pour changer simplement, en page par page, quel fichier de template .phtml sera utilisé, pour ajouter des scripts additionnels, des feuilles de style à notre page, ou encore pour déplacer des sections particulières de la page sans avoir besoin de changer les fichiers .phtml.

Comprendre les fichiers .phtml

Introduction

Les fichiers .phtml sont des fichiers de template qui gèrent le code envoyé au navigateur. Ils ne sont rien de plus que des fichiers HTML qui renferment des balises PHP. On les utilise pour styliser notre page et le look de notre site.

Changer les fichiers .phtml requierera des connaissances de base en XHTML, CSS et la compréhension de l’utilisation des fonctions PHP dans une page.

Regardons le fichier header.phtml situé dans templates/page/html.

  1. <div class="header-top-container">
  2.    <div class="header-top">
  3.       <h1 id="logo">
  4.          <a href="<?=$this->getUrl('')?>">
  5.             <img src="<?=$this->getLogoSrc()?>" alt="<?=$this->getLogoAlt()?>"/>
  6.          </a>
  7.       </h1>
  8.       <p class="no-show">
  9.          <a href="#main"><strong><?=__('Skip to main content')?> »</strong></a>
  10.       </p>
  11.       <div class="quick-access">
  12.          <div class="account-access">
  13.             <strong><?=$this->getWelcome()?></strong><?=$this->getChildHtml('topLeftLinks')?>
  14.          </div>
  15.          <div class="shop-access">
  16.             <?=$this->getChildHtml('topRightLinks')?>
  17.          </div>
  18.       </div>
  19.    </div>
  20. </div>
  21. <?=$this->getChildHtml('topMenu')?>

Dans ce fichier, on recontre les balises XHTML classiques, l’usage de classes CSS mais aussi, le plus important, les fonctions MAGENTO utilisées pour obtenir l’agencement des blocs XML et le faire figurer dans notre fichier .phtml.

On voit principalement dans notre template les balises < ? et ?> utilisés pour les appels de fonctions.

Tirés de l’exemple ci-dessus :

<?=$this→getUrl(’‘)?> - utilisé sans paramètres, retournera l’URL de base de notre boutique.

<?=$this→getLogoSrc()?> - fera apparaître le logo dont le chemin d’accès est basé sur celui utilisé dans le fichier etc/config.xml : <logo_src>images/logo.gif</logo_src>.

Si on veut changer le logo, on peut agir de deux manières : la première possibilité est de remplacer le chemin de <logo_src> par celui qu’on veut. La deuxième possibilité est de changer en dur le chemin, directement dans le fichier .phtml :

  1. <img src="<?=$this->getLogoSrc()?>" alt="<?=$this->getLogoAlt()?>"/>

mais cette option n’est pas recommandée car nous devrions utiliser les ‘core’ fonctions et apprendre leur usage.

<?=$this→getLogoAlt()?> - cette fonction nous permet de changer la balise ‘alt’ de notre logo. Ainsi, si notre logo est par exemple manquant, l’info contenue dans son ‘alt’ apparaîtra en remplacement. Changement qu’on peut également obtenir en changeant <logo_alt>Magento Commerce</logo_alt> ou en le definissant directement dans le fichier .phtml.

<?=__(Skip to main content)?> - tous les tags qui ressemblent à celui-ci seront utilisés pour traduire dynamiquement le contenu des pages dans une autre langue. Sous-entendu <?=__('English text to translate')?>.

<?=$this→getChildHtml(’topLeftLinks’)?> - la fonction getChildHtml() est la fonction la plus importante utilisée dans notre template. Elle appelle un bloc particulier définit dans un fichier .xml, le traduit en HTML, et ensuite l’envoie au navigateur. Elle permet d’appeler des blocs de partout et des fichiers .xml correspondants.

Pour utiliser getChildHtml(‘topLeftLinks’) on doit avoir définit le premier ‘as’ du ‘child’, regardons default.xml de plus près (il est dans le dossier layout/core/). Voilà ce que vous devriez voir :

  1. <block type="page/html_toplinks" name="top.left.links" as="topLeftLinks"/>

Comme on le voit, getChildHtml(‘topLeftLinks’) utilise les alias ‘as’ et les appelle depuis le XML. La fonction getChildHtml() ne permet à MAGENTO d’appeler un bloc que si celui-ci a été définit dans le fichier .xml correspondant.

On peut également outrepasser ce mécanisme en utilisant l’appel d’une autre fonction :

<?=$this→getLayout()→getBlock(’top.left.links’)→toHtml()?>

Cette structure va appeler le bloc top.search (basé sur son nom ‘name’ et non pas son alias ‘as’) depuis n’importe où dans n’importe lequel de nos templates, donc on n’a pas besoin de le définir dans nos fichiers .xml. Rappelez-vous d’utiliser l’attribut ‘name’ plutôt que l’attribut du ‘as’ avec cette méthode.

On doit savoir que chaque fichier .phtml et chaque fonction fera toujours référence au fichier ou aux fichiers .xml correspondant(s). On peut identifier les fichiers .phtml utilisés simplement en recherchant le morceau de code qui ressemble à :

  1. <action method="setTemplate">
  2.    <template>wishlist/sidebar.phtml</template>
  3. </action>

il nous dira quel fichier .phtml est utilisé.

Structure du dossier

Toutes les vues (ou écrans) utilisées dans notre application ont des dossiers et des sous-dossiers séparés pour ranger leurs fichiers de template. Regardons la structure du dossier :

callouts – dossier dans lequel sont placés les fichiers pour les callouts et les pubs.
catalog – dossier dans lequel sont placés les fichiers utilisés dans notre catégorie, agencement de navigation, pages produits et pages de comparaison.
catalogsearch – ici, on trouve les fichiers qui sont utilisés pour déterminer l’apparence des pages de résultat de recherche et du moteur de recherche.
checkout – toutes les pages utilisées pendant la vérification et le shopping dans notre boutique. On trouvera également ici le template du panier, et les blocs pour le ‘cross-selling’ et les coupons.
cms – dossier pour les templates des pages statiques.
core – dossier qui contient les templates de ‘permutation de boutique’ du visiteur (pas encore actif) - toutes les pages client (exemple : l’admin compte, formulaires d’adresses, liste des commandes, reviews)
datafeed – dossier pour stocker nos fichiers csv, txt ou xml, utilisés pour les moteurs de comparaison et autres applications externes.
directory - ici on trouve le convertisseur de monnaie pour la boutique.
email – ici se trouveront les pages qui nécessitent l’envoi d’un email, comme par exemple commande, mot de passe perdu, abonnement à la newsletter, …
install – fichiers de template pour l’installation de MAGENTO
newsletter – subscribe.phtml placé dans ce dossier nous permettra de changer l’apparence de la boîte ‘s’inscrire à la newsletter’ sur notre page
page – le dossier le plus important dans lequel on trouvera tous les fichiers principaux utilisé pour designer notre site. Plus de descriptions vous seront données dans le sous-chapitre suivant.
payment – templates utilisés pour le design de nos formulaires de paiement (exemple CC payment.)
poll – 2 fichiers pour changer le look du mini sondage en fonction des statuts ‘pas encore voté’ / ‘résultat des votes’
rating – bloc d’évaluation (‘rating’) utilisé sur nos pages produits
review – tous les fichiers utilisés pour le rendu des blocs utilisés par les reviews
sales – pages des détails des commandes, des factures, des commandes récentes
searchlucene – résultats pour le controler Zend_Lucene utilisé dans MAGENTO
tag – sont stockés ici les templates de tags pour les produits
whishlist – fichiers de template pour gérer le résultat des actions de note ‘liste de vœux’.

Réaliser des changements basiques à nos templates

Tous les fichiers utilisés pour définir l’apparence classique de notre template sont situés dans le dossier template/page. Vous y trouverez :
1column.phtml
2columns-left.phtml
2columns-right.phtml
3columns.phtml
one-column.phtml
dashboard.phtml

Ce sont essentiellement les fichiers du squelette HTML de nos pages. En changeant ces fichiers, on peut définir une nouvelle structure de page.

Il y a aussi un sous-dossier html sous template/page dans lequel on peut changer le pied de page ‘footer’, l’en-tête ‘header’ et les blocs de liens de notre template.

Chacun d’entre eux utilise de simples appels de fonctions, comme par exemple getChildHtml(), de manière à ce que l’on puisse identifier les blocs en cherchant dans l’agencement des fichiers XML.

Par exemple, quand on verra :

  1. <reference name="root">
  2. <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
  3. </reference>

on comprendra que cette page utilisera le fichier 2columns-right.phtml comme squelette de page.

Utiliser les fonctions MAGENTO pour appeler les blocs containers

Comme on l’a décrit plus haut, il existe deux façons d’appeler des blocs.

  1. <block type="page/html_toplinks" name="top.left.links" as="topLeftLinks"/>

<?=$this→getChildHtml(’as’)?> - en utilisant l’alias du bloc ‘as’ définit dans le fichier .xml, on peut afficher un bloc sur notre page à condition qu’il ait été déjà déterminé dans le fichier .xml correspondant.

<?=$this→getLayout()→getBlock(’name’)→toHtml()?> - en utilisant le nom ‘name’ du bloc définit dans le fichier .xml, on peut appeler n’importe quel bloc, qu’il ait été déjà définit ou non dans le fichier xml correspondant.

e. ajouter des fichiers .css et .js à un template (partie II)

Il y a deux méthodes pour ajouter des feuilles de style ou des scripts .js à notre template. La méthode recommandée est de les ajouter dans la partie <head> du fichier default.xml. Mais vous avez aussi la possibilité d’ajouter directement les fichiers dans une racine particulière de fichier de template.

  1. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/js.js" > </script>
  2. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/form.js" ></script>
  3. <script type="text/javascript" src="<?=$this->getJsUrl()?>varien/menu.js" ></script>

Comme on le voit ici, on peut aussi se servir de la méthode getJsUrl qui ajoute des chemins de scripts à notre attribut src. La méthode pourra retourner par exemple http://yoursite.com/js/ de manière à ce que la source ressemble à ce qui suit :

  1. <script type="text/javascript" src="http://yoursite.com/js/varien/js.js" ></script>
  2. <script type="text/javascript" src="http://yoursite.com/js/varien/form.js" ></script>
  3. <script type="text/javascript" src="http://yoursite.com/js/varien/menu.js" ></script>

Ajouter une feuille de style n’est pas plus compliqué qu’ajouter un fichier js. On utilise également une fonction qui retourne un chemin vers notre dossier de thèmes :

  1. <link rel="stylesheet" href="<?=$this->getSkinUrl('css/styles.css')?>" type="text/css" media="all"/>

ce qui donnera :

  1. <link rel="stylesheet" href="http://yoursite.com/skin/frontend/default/default/css/styles.css" type="text/css" media="all"/>

C’est-à-dire que la fonction getSkinUrl() définit le chemin actuel vers notre dossier de thèmes : http://yoursite.com/skin/frontend/default/default/

Ouvrir des fichiers .phtml dans Dreamweaver

Par défaut, Dreamweaver ne peut pas lire les fichiers PHTML. Vous pouvez ajouter le type de fichier dans la section « Types de fichiers / Editeurs » - « Ouvrir en mode code » dans les préférences si vous souhaitez avoir un accès rapide, mais avec cette méthode, vous ne pourrez pas voir le fichier en mode « Création ». Donc, si vous utilisez Dreamweaver (versions 4, MX, MX2004, 8 ou 9 alias CS3) pour le design de vos sites, et que vous souhaitez ouvrir les fichiers de template de MAGENTO (ils ont une extension en .phtml) dans Dreamweaver, vous pouvez suivre ces étapes pour qu’il puisse interpréter du code PHP (avec la coloration des mots clé, hinting, et al) et supporter le fromat .phtml et vous permettre également de prévisualiser l’apperçu « Création ». Ci-dessous les trois étapes à suivre : *

NOTES IMPORTANTES : Ce guide est pour Dreamweaver sur Windows (XP ou Vista) ou Mac OS X. Notez : J’ai exclu la numérotation des versions dans les adresses de localisation des fichiers, et si vous utilisez une version antérieure à la 9 (CS3), remplacez « Adobe » par « Macromedia » dans les chemins. Des espaces ont également été supprimés pour conserver les adresses sur une même ligne.

* Utilisateurs de Dreamweaver 4 : Si vous utilisez l’archaïque Dreamweaver 4, vous n’aurez besoin de suivre que la première étape. Mais d’une manière générale, il est recommandé que vous passiez à Dreamweaver 8 ou plus récent pour avoir les fonctionnalités des superbes feuilles de style CSS et des Standards du Web.

Etape 1 : Ajouter .phtml au fichier de configuration extension.txt

Ouvrez avec le Notepad (bloc texte) le fichier de configuration suivant, et changez les lignes spécifiées ci-dessous : XP, Vista : C:\Program Files\Adobe\Dreamweaver\Configuration\Extensions.txt Mac OS X : Applications > Adobe Dreamweaver CS3 > configuration > Extensions.txt

A la première ligne, ajoutez PHTML comme suit :
HTM,HTML,SHTM,SHTML, ... ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, ... ,MASTER:All Documents
Dans les fichiers PHP, ajoutez PHTML comme suit : PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP File

Etape 2 : Ajouter .phtml au fichier extensions.txt du dossier Application Data

Ce fichier est exactement pareil que celui situé dans le dossier de configuration de Dreamweaver, sauf qu’il est situé dans le dossier des Application Data (données d’application également nommé AppData chez les utilisateurs de Vista) de votre profil utilisateur. Comme pour l’étape 1, trouvez le fichier et changez les lignes comme indiqué ci-dessous :

XP : C:\DocumentsandSettings\[user]\ApplicationData\Adobe\Dreamweaver\Configuration\extensions.txt
Vista: C:\Users\[user]\AppData\Roaming\Adobe\Dreamweaver\Configuration\Extensions.txt
Mac OS X : Users > Library > Application Support > Adobe > Dreamweaver 9 > Configuration > Extensions.txt
A la première ligne, ajoutez PHTML comme suit :
HTM,HTML,SHTM,SHTML, ... ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, ... ,MASTER:All Documents
Dans les fichiers PHP, ajoutez PHTML comme suit :
PHP,PHP3,PHP4,PHP5,PHTML,TPL,PHTML:PHP Files

Etape 3 : Ajouter PHTML au fichier MMDocumentTypes.xml

Ce fichier est un fichier XML qui devrait se situer :
XP, Vista : C:\ProgramFiles\Adobe\Dreamweaver\Configuration\DocumentTypes\MMDocumentTypes.XML
Mac OS X : Applications > Adobe Dreamweaver CS3 > configuration > DocumentTypes > MMDocumentTypes.XML
Ajoutez deux fois PHTML dans cette ligne (approximativement la ligne 75) comme suit :
<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic"
winfileextension="php,php3,php4,php5,phtml"
macfileextension="php,php3,php4,php5,phtml" file="Default.php"
writebyteordermark="false" />

Eteignez et relancez Dreamweaver et vous ne devriez plus avoir de problème avec les fichiers PHTML.