Magento et les templates PHTML

Dans magento les templates sont un mélange de code html, CSS, et php,. Ils peuvent également contenir du javascipt. Ils forment les PHTML, qui sont le rendu visuel des pages. Le code php correspond aux méthodes et variables contenues dans le noyau de magento (le core). Les templates de « gabarits » ont une plus grande importance, ils vont définir l’agencement de vos pages (1 colonne, 2 colonnes..). Dans ce tutoriel, nous allons voir le fonctionnement des templates.

Les templates gabarit

Les templates gabarit de pages sont stockés dans le dossier template/page de votre thème. Ce dossier contient les gabarits de pages (1column.phtml , 2columns-left.phtml, 2columns-right.phtml..).

Analysons le template 3columns.phtml, il contient peu d’éléments, les éléments principaux d’une page internet (balise head, header, content..). Chaque élément fait appel à un template, grâce à la méthode getChildhtml(), une des plus importantes des PHTML.

getchildHtml ()

Nous pouvons voir dans la balise head un appel d’un phtml enfant ‘head’ grâce à la méthode getchidHtml()

<?php echo $this->getChildHtml('head') ?>

Comment magento reconnaît t-il le chemin vers ce template ‘head’ ? Grâce au layout. Dans le layout page.xml on peut voir

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

Le PHTML head.phtml se trouve donc dans le dossier parent html/head.phtml.

$this et les templates

$this correspond à l’objet en cours, pour ce template il faut allez voir dans la classe template.php

=>app\code\core\Mage\Core\Block\Template.php

Cette classe étend la classe abstract contenant la méthode getchildHtml (). Abstract est une des classes principales des templates. Comment ouvrir rapidement une classe étendue et lister les méthodes d’une classe

balise head du template 3 columns.phtml

Ajouter du code dans un template gabarit

Ajouter du code CSS html ou autre dans un template de gabarit ajoute le code dans toutes vos pages ayant un gabarit 3 colonnes. Cela peut être utile dans certains cas. Comme vous pouvez le voir sur la photo ci-dessus j’ai rajouté du code CSS :

<div class="bar-ss-menu-contenair" >
                    <div class="bar-sou-menu left text-fff"> <?php $this->__('Vous êtes ici'); ?>  >  </div>
            <div class="bar-sou-menu-coul right "> <?php echo $this->getChildHtml('breadcrumbs') ?>  </div>
        </div>

La charte graphique d’un site magento prévoyait une barre colorée sous le header contenant le fil d’Ariane. J’ai donc mis du code CSS dans mes templates de gabarit, ainsi toutes mes pages contenaient une barre sous le header.

Les templates dans le back office

Vous avez aussi la possibilité d’appeler un template via le back-office de magento, par exemple dans la partie contenu d’une page CMS grâce à ce code :

{{block  type="core/template" template="homepage/home-haut.phtml"}}

Tutoriel complet sur => Import d’un phtml via back-office

En savoir plus sur les templates

Le chemin des classes utilisées dans un template est indiqué en haut du PHTML ex : pour le template media.phtml (app\design\frontend\default\default\template\catalog\product\view\media.phtml) en haut avant le code vous pouvez voir

 @see Mage_Catalog_Block_Product_View_Media

Les références aux méthodes se feront donc dans cette classe app\code\core\Mage\Catalog\Block\Product\View\media.php mais aussi dans toutes les classes étendues par celle-ci. Comment ouvrir rapidement les classes étendues et lister les méthodes d’une classe.