Una vez configuradas todas las opciones del menú de administración, y dado de alta el catálogo de productos que se venderá a través de la tienda virtual, es tiempo de pensar en el aspecto visual que tendrá la web. Dejar la tienda con el diseño y apariencia que proporciona osCommerce por defecto puede ser la opción más rápida y fácil para empezar, pero es conveniente pensar en que antes o después se deberán realizar cambios en el aspecto de la misma con el objetivo de conseguir que nuestro sitio se distinga del resto.

Desgraciadamente la versión actual de osCommerce no proporciona ninguna opción de menú a través de la que se pueda cambiar el aspecto de la web en cuanto a su diseño se refiere. Todos los cambios han de realizarse modificando directamente los ficheros que componen el código fuente del software, razón por la que no es de extrañar que hayan proliferado en Internet los sitios dedicados a la creación de templates (plantillas) para osCommerce. Los templates no son más que modificaciones de los fuentes de osCommerce que proporcionan a la web un diseño distinto al que se muestra por defecto.

El propósito de este artículo es tratar de explicar como se encuentra estructurado el diseño de un sitio web gestionado con osCommerce, y como se puede modificar dicha estructura para realizar cambios en la composición y aspecto de los distintos elementos que se muestran en la tienda virtual.

Estructura

La estructura básica de la web compuesta por osCommerce es muy sencilla y se encuentra formada por cinco regiones principales maquetadas mediante tablas HTML. Empezando por la parte de arriba, la primera región que aparece es la cabecera, en la que se muestra normalmente una imagen con el logotipo de la web y una serie de iconos de acceso rápido. A continuación están la segunda y tercera región, que son las columnas con los cuadros de opciones que se muestran a la izquierda y derecha de la web respectivamente, flaqueando la cuarta región que contiene las opciones centrales en la que se muestra el mensaje de bienvenida, se listan los productos, y a través de la que interactúan los usuarios normalmente. Terminando en la parte inferior de la web se encuentra el pie de página con la fecha, estadísticas y mensajes de copyright.

La página web principal de osCommerce se construye en el fichero catalog/index.php, y cada una de las regiones antes mencionadas en su respectivo fichero PHP dentro del directorio catalog/includes. Así, header.php corresponde a la cabecera, column_left.php a la columna izquierda, column_right.php a la columna derecha, y footer.php al pie de página.

osCommerce Template

Dentro de index.php se pueden localizar fácilmente las sentencias que incluyen las diversas regiones:

...
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
...
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
...
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
...
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
...

Sabiendo esto es fácil realizar una modificación sencilla sobre el diseño, como eliminar la columna derecha por ejemplo, ya que basta con eliminar o comentar la sentencia que incluye dicha región:

<?php //require(DIR_WS_INCLUDES . 'column_right.php'); ?>

Lo importante al realizar este tipo de modificaciones es entender que en realidad estamos cambiando el código fuente de nuestra versión instalada de osCommerce. Si en un futuro queremos actualizar a una versión superior de osCommerce entonces tendremos que volver a realizar esa misma modificación sobre los fuentes de la nueva versión. Entendido esto, debe ser claro que los llamados templates en realidad no son más que modificaciones realizadas sobre los fuentes de una determinada versión de osCommerce.

Logotipo

Posiblemente uno de los primeros cambios que se quiere hacer cuando se monta una tienda en Internet con osCommerce es cambiar el logotipo por defecto que aparece en la web por uno propio. De acuerdo con lo visto en la sección anterior es intuitivo pensar que la imagen se monta en el fichero header.php que compone la región de cabecera, y de hecho es fácil buscando dentro del mismo encontrar una línea como la siguiente:

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'
. tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td>

En esta sentencia se compone un enlace (link) en el que DIR_WS_IMAGES identifica el directorio donde se encuentran las imágenes subidas a la web, normalmente catalog/images, y oscommerce.gif al nombre del fichero que contiene el logotipo de osCommerce que se muestra por defecto. Para cambiar el logotipo de una forma sencilla basta con subir una imagen propia de dimensiones similares a la por defecto al directorio de imágenes del servidor y sustituir oscommerce.gif por el nombre del nuevo fichero:

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'
. tep_image(DIR_WS_IMAGES . 'logo_mi_tienda.gif', 'Mi Tienda') . '</a>'; ?></td>

El segundo parámetro de la función tep_image es el texto alternativo que se mostrará para la imagen, y es lógico cambiar el valor «osCommerce» que aparece por defecto por el nombre de nuestra tienda.

Relacionado con el logotipo se encuentra también el icono de favoritos que muestran los navegadores normalmente junto a la URL del sitio en la barra de navegación y en la carpeta de favoritos del usuario. Para crearlo normalmente bastará con dejar la imagen deseada en un fichero de nombre favicon.ico en el directorio raíz del servidor web.

Bloques

Los bloques, módulos o cajas (boxes) son las unidades de construcción con las que se forman las páginas web de la tienda virtual. Los bloques son cada una de las opciones que aparecen enmarcadas dentro del sitio web con un título, como el cuadro de búsqueda, el árbol de categorías del catálogo, la selección de fabricante, el cuadro de novedades, … Cada bloque se maqueta como una tabla HTML dentro de las regiones principales, que como ya se comentó anteriormente, son también a su vez tablas HTML.

Los bloques normalmente aparecen en las columnas izquierda y derecha de la web, por lo que nuevamente debería resultar intuitivo buscarlos en los ficheros correspondientes a dichas regiones: column_left.php y column_right.php. Y de hecho, por cada bloque que se muestra en cada una de las columnas de la web es fácil encontrar una sentencia similar a la siguiente:

<?php
require(DIR_WS_BOXES . 'search.php');
?>

En esta sentencia de ejemplo DIR_WS_BOXES identifica el directorio donde se encuentran los ficheros que contienen el código fuente de los distintos bloques que osCommerce proporciona, normalmente include/boxes, y search.php identifica al bloque concreto incluido, en este caso concreto el cuadro de búsqueda. A poco que se siga buscando es fácil identificar sentencias similares para incluir otros bloques como el de la selección de monedas (currencies.php), el del cuadro de novedades (whats_new.php), y así sucesivamente. Los bloques tienen nombres en inglés bastante representativos de la funcionalidad ofrecida por los mismos.

El orden de visualización de los bloques dentro de las columnas en la web es el mismo orden en que se encuentran sus sentencias de inclusión dentro de los ficheros PHP, de arriba hacia abajo.

Eliminar un bloque
Para eliminar un bloque de una columna basta con borrar o comentar la sentencia correspondiente a dicho bloque. Así, si queremos eliminar el bloque del cuadro de búsqueda basta con localizar y comentar la sentencia vista anteriormente:

<?php
//require(DIR_WS_BOXES . 'search.php');
?>

En este punto es importante tener en cuenta que la visualización de un bloque a veces está condicionada por varios factores, como el hecho de que el visitante de la web sea un cliente registrado de la tienda, que esté consultando el detalle de un producto concreto, o que esté completando el pago de un pedido. En función de todo esto acotar la porción correcta de código a comentar para un bloque concreto puede requerir un poco más de trabajo, aunque el patrón de búsqueda siempre será el mismo.

Cambiar un bloque de una columna a otra
Para cambiar un bloque de columna a otra basta con borrar o comentar la sentencia correspondiente a dicho bloque en un fichero y ponerla en otro. Por ejemplo, para pasar el bloque de búsqueda de la columna izquierda a la derecha hay que comentar la sentencia del ejemplo del punto anterior en column_left.php y añadirla en column_right.php.

Crear un bloque nuevo
Me gustaría añadir que incluso es posible crear bloques nuevos, es decir, bloques propios que no vengan incluidos con osCommerce. Para ello se requiere saber programar en PHP, y como punto de partida lo mejor es tomar un bloque sencillo que tengamos instalado y funcionando, creando una copia del mismo modificada según nuestras propias necesidades. La explicación detallada de la construcción de un nuevo bloque queda fuera del alcance de este artículo, ya que básicamente es un tema de programación y no de modificación del aspecto de osCommerce.