Formater le code HTML des pages générées par Magento

  • De le 11 septembre 2009
  • Difficulté : 2/4

Formater le code HTML des pages générées par Magento Vous l'aurez sans doute remarqué, le formatage du code HTML des pages générées sous Magento peut vite devenir anarchique, surtout après avoir bidouillé pendant des heures notre template... Pour obtenir un code correctement parsé et une page syntaxiquement valide, la librairie PHP Tidy devient vite indispensable.

Tidy est une librairie fournie depuis PHP 5, qui permet de parser, diagnostiquer et réparer des documents HTML, XHTML ou encore XML. Plutôt utile lorsque l'on a omis par inadvertance de fermer une balise ou placé un élément de type "block" à l'intérieur d'un élément de type "inline". Le deuxième avantage de Tidy est la possibilité de formater proprement le code de la page, pratique pour une relecture rapide du code source et alléger sensiblement le poids des pages.

Bref, Tidy est la librairie idéale pour faire un peu de nettoyage, et la bonne nouvelle c'est qu'il est très facile de l'intégrer à Magento.

Prérequis

La librairie Tidy doit être disponible sur le serveur. Sous Wamp elle peut être activée depuis les extensions PHP. Le module de surcharge a été développé sous la version 1.3.2.3 de Magento. Le module sera nommé "Tidy".

Architecture du module

  • app/code/local/Magentix/Tidy/Block/
  • Html.php
  • app/code/local/Magentix/Tidy/etc/
  • config.xml
  • app/etc/modules/
  • Magentix_Tidy.xml

Développement du module

L'objectif est d'utiliser les fonctions offertes par le librairie Tidy avant de générer la page HTML. Nous allons ainsi surcharger la classe-bloc Mage_Page_Block_Html stockée dans le fichier app/code/core/Mage/Page/Block/Html.php. On récupère le code de la méthode _afterToHtml qu'il contient afin de le placer dans le fichier Block/Html.php de notre module :

app/code/local/Magentix/Tidy/Block/Html.php

class Magentix_Tidy_Block_Html extends Mage_Page_Block_Html {

    protected function _afterToHtml($html) {
        return $this->_afterCacheUrl($html);
    }

}

On peut alors y ajouter une fonction (ici _tidy()) qui retournera un code parsé et réparé par Tidy du code HTML contenu dans la variable passée en paramètre. Elle sera ensuite utilisée dans la fonction _afterToHtml() de notre classe, que l'on prendra soin de modifier :

app/code/local/Magentix/Tidy/Block/Html.php

<?php

class Magentix_Tidy_Block_Html extends Mage_Page_Block_Html
{
        protected function _afterToHtml($html) {
                return $this->_tidy($this->_afterCacheUrl($html));
        }
        
        private function _tidy($html) {
                /* On verifie que la fonction reparatrice de Tidy est bien disponible */
                if (function_exists('tidy_repair_string')) {
                        $tidy = new tidy;
                        $tidy->parseString($html,array('indent'=>false,'output-xhtml'=>true,'wrap'=>0),'utf8');
                        $tidy->CleanRepair();
                        $html = $tidy;
                }
                return $html;
        }
}

La liste des options de configuration de Tidy est disponible à l'adresse suivante :

HTML Tidy Configuration Options

Il est préférable d'éviter l'utilisation de l'option hide-comments (suppression des commentaires), qui supprimera également les commentaires conditionnels utilisés par défaut dans Magento pour la déclaration de feuilles de styles alternatives pour IE7 et IE8.

Il ne reste plus qu'à éditer le fichier de configuration afin de préciser à Magento l'override du module du core :

app/code/local/Magentix/Tidy/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_Tidy>
            <version>0.1</version>
        </Magentix_Tidy>
    </modules>
    <global>
        <blocks>
            <page>
                <rewrite>
                    <html>Magentix_Tidy_Block_Html</html>
                </rewrite>
            </page>
        </blocks>
    </global>
</config>

Pour finir, on spécifie à Magento l'existence du nouveau module, et on l'active :

app/etc/modules/Magentix_Tidy.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Magentix_Tidy>
            <active>true</active>
            <codePool>local</codePool>
        </Magentix_Tidy>
    </modules>
</config>
commentaires

Commentez cet article : Formater le code HTML des pages générées par Magento