Respecter le W3C pour les modules Prestashop

Hé oui aujourd’hui un point récurrent le W3C ! Certains me diront peut-être, « oh mais moi le W3C…. » certes mais  c’est toujours mieux de faire du WEB en respectant les normes. Personnellement j’utilise html validator, plugin pour Firefox cela me permet de vérifier s’il y a des erreurs de structure dans mon code ou des avertissements. C’est toujours « mieux » de faire compatible W3C déjà rien que pour soi, on évite des conflits (par exemple si on a des « id » identiques et qu’on utilise les sélecteurs de Jquery) on gagne donc du temps à faire les choses correctement.


Dans le cas de Prestashop, on trouve souvent des modules qui touchent à la partie « front-office », donc visible par le client et qui ne sont pas compatibles W3C. Souvent le module utilise une feuille de style CSS et le lien vers le fichier CSS est effectué directement dans le TPL, cela fonctionne, mais génère un avertissement pour le W3C, car il faudrait l’appeler dans la section « <head></head> » de la page.

Pour palier à ce problème il existe une solution toute simple, dans votre module créez une fonction comme ci-dessous.

/**
* Insère une feuille css file in the &lt;head&gt;
* @file string Name of the CSS file (ex. 'module.css')
* @media string Media of the CSS link file (ex. 'all', 'media')
*/
function css_file($file='',$media = 'all'){
global $css_files;
if($file == ''){
$file = $this-&gt;name.'.css';
}
$css_files[$this-&gt;_path.'css/'.$file] = $media;
}

Ensuite dans la fonction « hook » de votre module faites appel à la fonction « css_file » en indiquant le nom de la feuille CSS. Le fichier sera automatiquement chargé dans le header en passant par le chemin suivant : « /modules/votre module/css/ ».

function hooktop($params){
$this-&gt;css_file('slideshow.css');
global $smarty;
return $this-&gt;display(__FILE__, 'carouselnc.tpl');
}

5 commentaires sur “Respecter le W3C pour les modules Prestashop”

  1. J’ai été contant de trouver l’astuce mais je n’arrive pas à mettre en oeuvre cette solution.

    Pourriez vous m’aider dans un exemple concret ?

  2. Bonjour,

    Et qu’en est-il de faire ?

    public function hookHeader()
    {
    $this->context->controller->addCSS($this->_path.'[monCSS]’, ‘all’);
    }

    1. Bonjour,
      Juste c’est effectivement la bonne manière de procéder, cela semble être le code actuellement courant sous PS 1.5

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.