ezstarrating : VII - Le template d'affichage du datatype Star Rating

Date de publication: le mercredi 9 novembre 2011 à 14h46
Dernière modification: par Pascal BOYER le dimanche 18 décembre 2011 à 20h14

Il s'agit du template:

extension/ezstarrating/design/plain_site/templates/content/datatype/view/ezsrrating.tpl

Pour s'assurer que le système trouve tous les templates relatifs au datatype Star Rating, on va copier l'ensemble des templates dans le design public:

cp -Rp extension/ezstarrating/design/standard/templates/content/datatype/ design/plain_site/templates/

On vide les caches et on affiche le nouvel article:

Fig. 18: Affichage de l'attribut Star Rating sans javascript, ni style CSS ni image

La figure18 illustre l'absence de trois types d'éléments nécessaires au fonctionnement correct de l'extension:

• les styles CSS
• les images
• les javascripts

La feuille de style

Il faut la copier dans le siteaccess public:

cp -p extension/ezstarrating/design/standard/stylesheets/star_rating.css design/plain_site/stylesheets/

Si on utilise le template pagelayout.tpl par défaut, à savoir:

design/base/templates/pagelayout.tpl

on remarque que celui-ci contient, dans son en-tête, les lignes suivantes:

17     {section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
18         @import url({concat( 'stylesheets/', $css_file )|ezdesign});
19     {/section}
20 </style>

indiquant qu'il recherche la liste des feuilles de styles définie dans le fichier design.ini (ou dans l'une de ses surcharges).

Donc, dans le fichier de surcharge suivant:

settings/siteaccess/plain_site/design.ini.append.php

on ajoute la ligne suivante:

[StylesheetSettings]
CSSFileList[]
CSSFileList[]=star_rating.css   <== CETTE LIGNE

:
Il est préférable de modifier ainsi la ligne 18 (voir cet article ) du template pagelayout.tpl (il faut alors sortir les lignes 17, 18 et 19 des balises <style type="text/css"></style>):

18      <link rel="stylesheet" href={concat( 'stylesheets/', $css_file )|ezdesign} type="text/css" media="screen" />

Les images des étoiles

Comme pour les feuilles de styles, faire une copie des images utilisées dans le siteaccess public:

cp -p extension/ezstarrating/design/standard/images/star.gif design/plain_site/images/

Les javascripts

Juste après la ligne, par exemple, du template pagelayout.tpl:

{include uri="design:page_head.tpl"}

il faut inclure le template suivant (par exemple juste après la ligne:

{include uri="extension/ezjscore/design/ezwebin/templates/page_head_script.tpl"}

:
Suite à la mise à jour de Luxpopuli.fr de sa version 4.3 initiale vers la version eZ Publish 2011.11 (4.6) la ligne ci-dessus devient:
{include uri="extension/ezwebin/design/ezwebin/templates/page_head_script.tpl"}
car il n'existe pas de sous-répertoire extension/ezjscore/design/ezwebin/
Il a donc été nécessaire avec cette nouvelle version d'eZ Publish d'activer l'extension ezwebin. Cette extension provient d'une installation temporaire de test dont j'ai copié l'extension extension/ezwebin dans le répertoire extension/ de l'installation du site luxpopuli.fr. Le fait d'activer cette extension n'implique absolument pas qu'elle soit utilisée en tant que «Type de site».

L'unique ligne de ce template est très importante car elle permet de télécharger tous les javascripts nécessaires au bon fonctionnement de l'extension:

1 {* Load JavaScript dependencys + JavaScriptList *}
2 {ezscript_load( ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) )}

Enfin, il faut récupérer le javascript suivant (normalement, la ligne 2 ci-dessus doit permettre d'éviter cette étape):

http://real.us.yimg.com/lib/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js

que l'on placera, par exemple, à la racine du répertoire design/plain_site/javascript/ (ce javascript est normalement présent dans le package ezwebin_site.ezpkg).

Ne reste plus qu'à renseigner le fichier de surcharge settings/siteaccess/plain_site/ design.ini.append.php de la sorte:

[JavaScriptSettings]
JavaScriptList[]=yahoo-dom-event.js

Vider tous les caches.

Fig. 19: Résultat final !

Commentaires