Opencommercio - E-commerce in Italia

Costruiamo un template per il kart

di A. Gagliani capra@openitalia.net

Come esempio pratico di layout fatto col Simple Template System di Brian Gallagher, abbiamo adattato il tema grafico natalizio di webvida.com per Md-Pro e Postnuke. Premetto che non sono un grafico e si vede :-)
Creare un layout con STS è molto semplice:
- scaricate STS dai nostri downloads
- installare STS: cioè decomprimere il file zip in una cartella qualsiasi, poi copiare i seguenti files nella cartella /catalog/includes. Leggere le istruzioni della pagina precedente se si installa su una versione del kart già modificata.

application_top.php
header.php
column_left.php
column_right.php
footer.php
application_bottom.php
sts_start_capture.php
sts_stop_capture.php
sts_restart_capture.php
sts_display_output.php
sts_user_code.php
sts_template.html

Aggiungere le seguenti righe in /catalog/includes/configure.php. Inserirle prima
della riga finale con i caratteri di chiusura ?> dello script.

// STS: ADD: Define Simple Template System files
  define('STS_START_CAPTURE', DIR_WS_INCLUDES . 'sts_start_capture.php');
  define('STS_STOP_CAPTURE', DIR_WS_INCLUDES . 'sts_stop_capture.php');
  define('STS_RESTART_CAPTURE', DIR_WS_INCLUDES . 'sts_restart_capture.php');
  define('STS_TEMPLATE', DIR_WS_INCLUDES . 'sts_template.html');
  define('STS_DISPLAY_OUTPUT', DIR_WS_INCLUDES . 'sts_display_output.php');
  define('STS_USER_CODE', DIR_WS_INCLUDES . 'sts_user_code.php');
// STS: EOADD

- Scaricate per esempio il nostro tema natalizio da postnuke.it e incollate solo le due immagini jpg grandi nella cartella /images del kart.
- Ora aprite il file sts_template.html col vostro web editor preferito (OpenOffice.org, DreamWeaver o quel che sia) e sostituite il codice HTML più sotto con quello del file. Verificate il percorso delle immagini e adattate al vostro percorso assoluto delle immagini /images. Salvate. Vi apparirà nel browser il seguente template:

Buon Natale

Ecco l'HTML del file sts_template.html:

<html>
<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="778">

  <tr>
   <td><table align="left" bgcolor="#ffffff" border="0" cellpadding="undefined" cellspacing="undefined" width="778">
   <tr>
    <td><img name="wvHeaderRight" src="http://localhost/oscms2prova/catalog/images/wvHeaderRight.jpg" width="406 " height="222" border="0" alt=""></td>
    <td><img name="wvHeaderLeft" src="http://localhost/oscms2prova/catalog/images/wvHeaderLeft.jpg" width="372" height="222" border="0" alt=""></td>
   </tr>
</table></td>
     <tr><td align="middle" width="100%" bgcolor="#ff0000" height="23">
      <center>
        <strong><font color="#FFFFFF">$breadcrumbs</font><font color="#FFFFFF"> </font>
       <font color="#FFFFFF"">
                $myaccount
        | $cartcontents | $checkout</font></strong>
</center>
      </td>
<tr> <td align="middle" width="100%" bgcolor="#e0e2eb"><marquee> <strong>Le ultime offerte nataliazie per il vostro regalo...</strong> </marquee> </td></tr>

</table>
<div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><br>
  </font> </div>
<table width="100%" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <td width="125" valign="top">
      <p><font size="1" face="Arial, Helvetica, sans-serif">$categorybox</font></p>
      <p><font size="1" face="Arial, Helvetica, sans-serif">$whatsnewbox</font></p>
      <p><font size="1" face="Arial, Helvetica, sans-serif">$searchbox</font></p>
      <p><font size="1" face="Arial, Helvetica, sans-serif">$informationbox</font></p></td>
    <td valign="top">
<p>$content</p>

      </td>
    <td width="125" valign="top">
      <p></p>

      <p><font size="1" face="Arial, Helvetica, sans-serif">$languagebox</font></p>
      <p><font size="1" face="Arial, Helvetica, sans-serif">$currenciesbox</font></p></td>
  </tr>
</table>
<br>
<table width="100%" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <td>
      <div align="center"><font size="1" face="Arial, Helvetica, sans-serif">$footer </font>
      <font size="1" face="Arial, Helvetica, sans-serif" color="#ffffff">Simple Template System by <a href="DiamondSea.comhttp://www.Diamondsea.com/">DiamondSea.com</a><br>
   Design by <a href="http://www.webvida.com/" target="_blank">Webvida
&n bsp;         ThemeWorks</a>
        </font>
        <div align="center"><font size="1" face="Arial, Helvetica, sans-serif">$banner</font></div>
  </div>
    </td>
  </tr>
</table>
<br>
<table width="100%" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <td></td>
  </tr>
</table>
<font size="1" face="Arial, Helvetica, sans-serif"><br>
</font>

<p> </p>
</body>
</html>

E' semplicissimo HTML e i vari blocchi o contenuti sono ruichiamati nel codice semplicememte col nome della variabile corrispondente come descritto nella pagina precedente. Rimarrete stupiti dalla semplicità, e gli utenti già abituati ad usare Templates grafici, esempio di eNvolution(eNcompass) o di Md-Pro (AutoTheme) riconosceranno le semplici tecniche di impostazione grafica tramite HTML.
Adattando poi i fogli di stile per le scritte in bianco e lo sfondo della pagina rosso con i box header verdi si raggiunge il seguente risultato:

Buon Natale

Insomma, modificando l'immagine di Babbo Natale, inserendovi il nome del vostro kart, avete un bel tema temporaneo natalizio, che potrete poi semplicemente modificare, sostituendo solo il template contenuto nel file catalog/includes/sts_template.html ed abilitando o disabilitando le variabili template (quelle che iniziano col simbolo $ come volete. Leggete il prossimo esempio: