Convertion template osCSS 1 vers osCSS 2

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 fonctions 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é revus.

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. Récupérer dans le template eletronix, fourni avec le moteur , les fichiers suivants , et ajouter les  dans votre répertoire de template.

  • boxes.php
  • modules.php

Séparation des contenus

Pour commencer nous allons séparer les contenus, entre les appels génériques , communs à toutes les pages (header et footer) ; et le corps de page.

Nous répartirons les contenus dans 3 fichiers distincts,

  • 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 blocs de retour d’erreurs et de prises en charge des title, tag, plugins, javascripts et autres.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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

<?php echo $page->tep_get_header() ; ?>
  <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(' &raquo; '); ?></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 remplacé bloc header et footer, par les appels correspondant, à savoir :

Appel du fichier header.php

<?php echo $page->tep_get_header() ; ?>

Appel du fichier footer.php

<?php echo $page->tep_get_footer() ; ?>

Initialisation des boxes et modules

Pour initialiser les éléments présents et actifs 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 boîte languages, appelée comme suit :

<?php include(DIR_WS_BOXES.'languages.php'); ?>

Son initialisation se fera comme suit :

$this->oscss_boxes->_add('languages', 'hidden');

Tous les chargements de boîtes ont lieu avec l’appel suivant :

$this->oscss_boxes->_add('nom de la boxes', 'pile');

Avec pour argument :

  • Le nom de la boîte, sans le « .php », c’est à dire languages.php devient languages
  • Le nom de la « pile » dans laquelle on charge la boîte. Cette pile est obligatoire , mais vous pouvez ne pas l’utiliser. Dans ce cas, utiliser la pile « hidden ».
  • Dans d’autres circonstances, 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 boîtes, et les reportés 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 espaces de boîtes, l’une qui ne contient que le 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 piles pour les boîtes, celle du menu que nous appellerons ’haut », et celle de droite que nous appellerons « droite ».

Donnera dans le fichier init

/** Pile haut */
 $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és par cette méthode sont les modules non typés, c’est à dire ceux contenus à la racine du dossier module ; Ces modules sur la V1, étaient appelés directement par les pages, comptant désormais, elles sont appelées par le template. Il est ainsi possible de choisir quel module sera présent sur quelle page.

Là encore il est nécessaire d’initialiser le module.

Pour charger le module new produts, ça donne ça :

$this->oscss_modules->_add(FILENAME_NEW_PRODUCTS,'center',array('sort'=>60));

Nous avons la même logique que pour les boxes, 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 éléments déjà initialisés. 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 appeler la boîte menu, de la pile haut compte tenu que la pile « haut » ne contient qu’une boîte, nous pouvons appeler directement la boîte dont nous avons besoin par son nom .

        <?php $boxe =$page->oscss_boxes->_return('menu'); ?>
        <div id="nav"><?php include('boxe.php'); ?></div>

L’appel se décompose en 2 lignes, la première appelle la boîte précise que nous voulons, c’est à dire:

        <?php $boxe =$page->oscss_boxes->_return('menu'); ?>

La deuxième fournit le modèle html des boîtes et affiche le contenu de la boîte:

        <?php include('boxe.php');  ?>

D’autre part, nous voulons aussi afficher la colonne de droite qui est composée de plusieurs boîtes. Dans ce cas, la méthode la plus simple, consiste à appeler la « pile » droite, et ainsi faire une boucle . Nous écrirons donc l’appel sous cette forme :

  <?php while($boxe=templ_draw_list('type=boxes&pile=droite')): ?>
    <div id="<?php echo $boxe->name_clean; ?>Box" >
      <?php include('boxe.php'); ?>
    </div>
  <?php  endwhile; ?>

Le code se décompose comme suit :

  1. Une boucle while, pour lister toutes les boîtes, avec l’appel à la function templ_draw_list
  2. L’ajout d’un div, contenant un id composé du nom de la boîte et du mot Box, soit language Box par ex.
  3. De l’appel au template boxe.php d’affichage de la boîte.

-* Les modules

Pour appeler les modules non typés, utiliser la méthode comme suit :

           <?php while($themodule=templ_draw_list()):   /** Appel des module (new_products, product_listing ...) */  ?>
            <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 modules de type center. Lors de l’usage de cette function, le type par défaut est module, et la pile par défaut et center. Aussi dans l’appel ci dessus, il n’est pas nécessaire de préciser.

On peut aussi écrire :

       templ_draw_list('type=modules&pile=center')

dans notre appel de boucle, on fait appel au fichier de modèle module. tous les modules non types seront pris en charge par ce gabarit de template.

-* Le contenu de page

Dans ce moteur , le contenu de page est toujours pris en charge par les fichiers contenus dans le répertoire includes/content. Par contre les modules associés à ces pages sont appelés directement par le template.

Le contenu de page : Il était précédemment appelé par :

       templ_draw_list('type=modules&pile=center')

La Forme a changé est s’écrit :

<div id="pageContent">
            <?php  require_once($page->oscss_content()); ?>
</div>

Si vous souhaitez utiliser la partie CMS d’osCSS, par exemple pour les infirmations, ou autres, l’appel suivant vous permet de donner la priorité à un article de type CMS plutôt qu’à la page contenue dans /content/

<div id="pageContent">
            <?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>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *