Gérer l'ajout de css et js depuis les fichiers .tpl

[Peha]

Bonjour,

 

en tant que webdesigner, j'aimerai pouvoir contrôler l'ajout des css et des js depuis les fichier.tpl de mes thèmes, sans avoir besoin de surcharger un Controlleur pour me débarasser d'un script dont je n'ai pas besoin. (et aussi ne pas perdre le CCC (Compile Compress and Cache))

 

voir ce topic sur comment créer les méthodes SMARY nécessaires http://www.prestasho...methode-smarty/

 

Dans le fichier classes/FrontController.php

je modifie la fonction displayHeader en supprimant pas mal de trucs (que je déplace simplement dans une méthodes SMARTY)

public function displayHeader()
{
if (!self::$initialized)
$this->init();

// P3P Policies (http://www.w3.org/TR/2002/REC-P3P-20020416/#compact_policies)
header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"');

/* Hooks are volontary out the initialize array (need those variables already assigned) */
self::$smarty->assign(array(
'time' => time(),
'img_update_time' => Configuration::get('PS_IMG_UPDATE_TIME'),
'static_token' => Tools::getToken(false),
'token' => Tools::getToken(),
'logo_image_width' => Configuration::get('SHOP_LOGO_WIDTH'),
'logo_image_height' => Configuration::get('SHOP_LOGO_HEIGHT'),
'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
'content_only' => (int)Tools::getValue('content_only')
));
self::$smarty->assign(array(
'HOOK_HEADER' => Module::hookExec('header'),
'HOOK_TOP' => Module::hookExec('top'),
'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn')
));

//ici se trouvait l'appel du CCC
//et l'appel du fichier header.tpl
//je déplace tout ça dans config/smarty.config.inc.php
}

 

 

Dans le fichier config/smarty.config.inc.php

je rajoute 3 nouvelles methodes smarty : {addCSS} {addJS} et {header}

smartyRegisterFunction($smarty, 'function', 'addCSS', 'smartyAddCSS');
smartyRegisterFunction($smarty, 'function', 'addJS', 'smartyAddJS');
smartyRegisterFunction($smarty, 'function', 'header', 'smartyHeader');

 

les fonctions correspondantes :

 

function smartyAddCSS($params)
{
Tools::addCSS($params['url']);
//Pour que ça marche aussi dans header.tpl
$smarty->assign('css_files', $css_files);
}


function smartyAddJS($params)
{
Tools::addJS($params['url']);
//Pour que ça marche aussi dans header.tpl
$smarty->assign('js_files', array_unique($js_files));
}


function smartyHeader($params)
{
global $css_files, $js_files, $smarty;
if ((Configuration::get('PS_CSS_THEME_CACHE') OR Configuration::get('PS_JS_THEME_CACHE')) AND is_writable(_PS_THEME_DIR_.'cache'))
{
// CSS compressor management
if (Configuration::get('PS_CSS_THEME_CACHE'))
Tools::cccCss();

//JS compressor management
if (Configuration::get('PS_JS_THEME_CACHE'))
Tools::cccJs();
}

$smarty->assign('css_files', $css_files);
$smarty->assign('js_files', array_unique($js_files));
$smarty->display($params['file']);
}

 

Dans les fichiers .tpl

Ainsi, depuis n'importe quel fichiers .tpl je peux ajouter (ou pas) mes scripts JS ou CSS de manière transparente, le header étant appelé après l'ajout, le CCC sera actif.

 

De plus, j'ai mis en paramètre le nom du fichier tpl du header. Ainsi, la page catégorie peut avoir un header différent de l'accueil par exemple. Il suffit de l'appeler comme ça : {header file="$tpl_dir./headerAlternatif.tpl"} ce qui peut être très pratique pour personnaliser un thème.

 

ça donne ça :

monThème/index.tpl

{addCSS url="/nTpl/themes/prestashop_new/css/global.css"}
{addJS url="/nTpl/themes/prestashop_new/js/jquery.js"}
etc.

//note : je n'ai pas trouvé de variable pour avoir l'url du thème ce qui serait bien pratique. par exemple $tpl_url qui donne  http://nomDomane.com/theme/montheme/


{header file="$tpl_dir./header.tpl"}

{$HOOK_HOME}

 

ça fonctionne, même dans les tpl des modules.

 

L'air de rien, cette petite modification permettrait une infinité de possibilités créatives. Et faciliterai le maintient de la cohérence du design : si les créateurs de modules l'utilisaient, ils pourraient styler leurs modules ou ajouter des scripts dans les tpl sans risque de gêner les customisations futures car une simple surcharge des tpl dans le dossier /modules du thème permettrait de se débarrasser ou de remplacer les scripts en conflits avec le design global.

 

Qu'en pensez vous ?

[Peha]

note1 : je n'ai pas trouvé de variable pour avoir l'url du thème ce qui serait bien pratique.

par exemple $tpl_url > http://nomDomane.com/theme/montheme/

 

 

note2 : si la methode {addCSS url="monCSS"} (ou addJS) est appelée depuis le fichier header.tpl, le fichier sera bien ajouté, mais c'est trop tard pour la compression. (il doit quand même être placé avant le {foreach from=$css_files key=css_uri item=media}

 

note3 : ça va me revenir…

[Maury Girard]

je déterre ce thread afin de savoir si Peha

as trouvé la suite ^^

[SiteProjet]

note1 : je n'ai pas trouvé de variable pour avoir l'url du thème ce qui serait bien pratique.

par exemple $tpl_url > http://nomDomane.com/theme/montheme/

 

{$tpl_dir} ?

 

Cordialement

[manuelv]

Très utile .

 

On peut se demander pourquoi cela n'existe pas dans prestashop de base ?