Nous allons voir ici, comment transformer un template d’osCSS 1.xx vers le moteur de l’osCSS 2.xx
Le template exemple que nous allons utiliser est le template clean.
Généralités
Pour commencer, il faut comprendre que l’ensemble des fichiers appelés via des include ou require dans le template, n’est plus la méthode préconisée.
En effet, afin de séparer le traitement exécution du code, et celui de l’affichage, les boxes et modules ont été revu.
Il est maintenant nécessaire d’initialiser les boxes et modules, dans un premier temps, et ensuite de les appeler dans le template.
Petite note importante. Recuperer dans le template eletronix, fournis avec le moteur , les fichiers suivant , et ajouter les a dans voter repertoire de template
boxes.php
modules.php
Séparation des contenus
Pour commencer nous allons séparer les contenus, entre les appels generic, commun a toutes les pages (header et footer) ; et le corps de page.
Nous répartirons les contenus dans 3 fichier distinct,
- header.php,
- template.php
- footer.php
Le contenu du fichier header.php, comprend la déclaration html, et le bloc head. De plus, cette entête contient les bloc de retour d’erreur et de prise en charge des title, tag, plugins, javascripts et autres.
<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?> >
<head>
<meta http-equiv="content-type" content="text/html; charset=<?php echo CHARSET; ?>" />
<meta name="author" content="oscim"/>
<title><?php echo $page->the_title(); ?></title>
<meta name="description" content="<?php echo $the_desc ?>" />
<meta name="keywords" content="<?php echo $the_key_words ?>" />
<meta name="reply-to" content="<?php echo HEAD_REPLY_TAG_ALL ?>" />
<meta name="robots" content="all" />
<meta name="generator" content="osCSS-2" />
<base href="<?php echo (($this->page['var']['request_type']== 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.$template.'/'; ?>stylesheet.css" media="all"/>
<script type="text/javascript" src="includes/general.js" ></script>
<?php $this->draw_file_header(); ?>
<link rel="shortcut icon" type="images/x-icon" href="favicon.ico"/>
<link rel="alternate" type="application/rss+xml" title="global" href="<?php echo HTTP_SERVER.DIR_WS_HTTP_CATALOG.'rss.php' ?>" />
<link rel="canonical" href="<?php echo CanonicalUrl(); ?>" />
</head>
<body id="<?php echo page::oscss_body_id() ; ?>" class="<?php echo 'Type_'.$page->the_type(); ?>">
<?php /** Retour d'erreur checkup sur la boutique */ $this->messageStack->_draw('header'); ?>
<div id="page">
D’autre part, nous allons reporter dans le fichier footer les éléments de fin de page
<p class="copyright">
~ copyright © CounterAct Design 2005 ~
<br />
~ Propulsé par <a href="http://www.oscss.org/blog/" title=" osCSS ">osCSS</a>
· <a href="http://validator.w3.org/check?uri=referer" title=" validate XHTML ">XHTML</a>
· <a href="http://jigsaw.w3.org/css-validator/check/referer" title=" validate CSS ">CSS</a> ~
<br />
~ Basé sur <a href="http://www.oscss.org" title=" osCSS ">osCommerce</a> ~
</p>
</div>
<?php /** Retour d'erreur sur la boutique */ $this->messageStack->_draw('error'); ?>
<?php /** Fichier appel bottom page*/ $this->draw_file_footer(); ?>
</div><!-- end #page -->
</body>
</html>
Enfin, le reste du contenu sera attribué au fichier template.php
<div id="top">
<h1>osCSS Demo shop</h1>
<div id="nav"><?php require_once(DIR_WS_BOXES.'menu.php'); ?></div>
</div>
<div id="breadCrumb"><?php echo $breadcrumb->trail(' » '); ?></div>
<div id="pageContent"><?php require_once('includes/content/' . $page_content); ?></div>
<div id="sidebar">
<div id="languages"><?php include(DIR_WS_BOXES.'languages.php'); ?></div>
<div id="loginBox"><?php include(DIR_WS_BOXES.'login_box.php'); ?></div>
<div id="categoriesBox"><?php require_once(DIR_WS_BOXES.'categories.php'); ?></div>
<div id="searchBox"><?php require_once(DIR_WS_BOXES.'search.php'); ?></div>
<div id="cartBox"><?php require_once(DIR_WS_BOXES.'shopping_cart.php'); ?></div>
<div id="informationBox"><?php require_once(DIR_WS_BOXES.'information.php'); ?></div>
</div>
<?php echo $page->tep_get_footer() ; ?>
Dans cet exemple, nous avons remplacer bloc header et footer, par les appels correspondant, à savoir :
Appel du fichier header.php
Appel du fichier footer.php
Initialisation des boxes et modules
Pour initialiser les élément présent et actif dans le template, nous avons recours au fichier init.php du template. Celui ci est appelé avant le template, pour traiter et calculer l’affichage.
- Les boxes
si vous utilisez par ex, la boite languages, appelée comme suit :
Son initialisation ce fera comme suit :
Tous les chargement de boite ont lieux avec l’appel suivant :
Avec pour argument :
- Le nom de la boite, sans le ".php", cad languages.php devient languages
- Le nom de la "pile" dans laquelle on charge la boite. Cette pile est obligatoire , mais vous pouvez ne pas l’utiliser. Dans ce cas, utiliser la pile "hidden" Dans d’autre circonstance, vous pouvez dans le template appeler les boxes, par leur nom, ou sous forme de boucle, avec la pile à laquelle elles appartiennent.
-* Dans notre exemple , template clean
Dans notre exemple, nous allons donc transformer les appels de toutes les boites, et les reporté dans le fichier init.php
<div id="nav"><?php require_once(DIR_WS_BOXES.'menu.php'); ?></div>
....
<div id="sidebar">
<div id="languages"><?php include(DIR_WS_BOXES.'languages.php'); ?></div>
<div id="loginBox"><?php include(DIR_WS_BOXES.'login_box.php'); ?></div>
<div id="categoriesBox"><?php require_once(DIR_WS_BOXES.'categories.php'); ?></div>
<div id="searchBox"><?php require_once(DIR_WS_BOXES.'search.php'); ?></div>
<div id="cartBox"><?php require_once(DIR_WS_BOXES.'shopping_cart.php'); ?></div>
<div id="informationBox"><?php require_once(DIR_WS_BOXES.'information.php'); ?></div>
</div>
...
Nous pouvons distinguer 2 espace de boite, l’une qui ne contient que menu , et qui s’affiche en haut de page, et l’autre , qui construit la pile du menu de droite .
Aussi, nous allons utiliser 2 pile pour les boites, celle du menu que nous appellerons ’haut", et celle de droite que nous appellerons "droite"
Donnera dans le fichier init
$this->oscss_boxes->_add('menu', 'haut');
/** Pile droite */
$this->oscss_boxes->_add('languages', 'droite');
$this->oscss_boxes->_add('login_box', 'droite');
$this->oscss_boxes->_add('categories', 'droite');
$this->oscss_boxes->_add('search', 'droite');
$this->oscss_boxes->_add('shopping_cart', 'droite');
$this->oscss_boxes->_add('information', 'droite');
-* Les modules
Les modules chargée par cette méthode sont les modules non typé, cad ceux contenu à la racine du dossier module ; Ces module sur la V1, était appelé directement par les page content, désormais, elle sont appelé par le template. Il est ainsi possible de choisir quel module sera présent sur quelle page.
La encore il est nécessaire d’initialiser le module
Pour charger le module new produts, ca donne ca :
Nous avons la même logique que pour les boxe, un nom de module, suivi de la pile auquel il appartient .
Fichier de template, appels
Dans notre fichier de template, nous allons pouvoir utiliser tous les elements déjà initialisé. aussi le template ne prend en charge scrupuleusement que l’affichage.
-* Les boxes
Nous allons donc remplacer dans notre fichier template.php , les appels des boites et modules, par leur nouvelle forme
Pour commencer, nous allons appelé la boite menu, de la pile haut. compte tenu que la pile "haut" ne contient qu’une boite, nous pouvons appelé directement la boite dont nous avons besoin par son nom .
<div id="nav"><?php include('boxe.php'); ?></div>
L’appel ce décompose en 2 lignes, la premiere appel la boite precise que nous voulons, cad
La deuxième, fournis le modèle html des boites et affiche le contenu de la boite
D’autre part, nous voulons aussi affiché la colonne de droite qui est composé de plusieurs boites. Dans ce cas, la methode la plus simple, consiste a appelé la "pile" droite, et ainsi faire une boucle . Nous ecrirons donc l’appel sous cette forme :
<div id="<?php echo $boxe->name_clean; ?>Box" >
<?php include('boxe.php'); ?>
</div>
<?php endwhile; ?>
Le code ce decompose comme suit :
- Une boucle while, pour lister toutes les boites, avec l’appel à la function templ_draw_list
- L’ajout d’un div, contenant un id composé du nom de la boite et du mot Box, soit languagesBox par ex.
- De l’appel au template boxe.php d’affichage de la boite.
-* Les modules
Pour appelé les module non typé, utiliser la methode comme suit :
<div id="<?php echo $themodule->id ?>" class="<?php echo $themodule->css_class; ?> ">
<?php include('module.php'); ?>
</div>
<?php endwhile; ?>
Nous utilisons une boucle pour charger tous les module de type center. Lors de l’uage de cette function, le type par defaut est module, et la pile par defaut et center. Aussi dans l’appel ci dessus, il n’est pas necessaire de preciser
On peut aussi ecrire :
dans notre appel de boucle, on fait appel au fichier de modéle module. tous les modules non type seront prise en charge par ce gabarit de template.
-* Le contenu de page Dans ce moteur , le contenu de page et toujours pris en charge par les fichier contenu dans le répertoire includes/content. Par contre les modules associé a ces page est applé directement par le template.
Le contenu de page : Il etait précément appelé par :
La Forme a changé est s’ecrit :
<?php require_once($page->oscss_content()); ?>
</div>
Si vous souhaitez utilisé la partie CMS d’osCSS, par exemple pour les infirmation, ou autre, l’appel suivant vous permet de donner la priorité a un article de type cms, plutot qu’a la page contenu dans /content/
<?php /** Page cms de contenu (Page_home, .. ), ou page contenu dans content */
if((($conti=tep_get_cms_content($page->oscss_body_id(), true)) !=false ) && ( $page->oscss_body_id()!='Page_contact_us' ) ) echo $conti;
else require_once($page->oscss_content()); ?>
</div>
RSS 2.0