Con la contribución U HTML Emails lograréis un diseño de correo electrónico bastante resultón. Miremos cómo queda un email estandar de Oscommerce:

Y ahora cómo quedaría el mismo email con U HTML Emails:

Como se puede ver el resultado es mucho más vistoso y profesional. Como dato importante, recordad que ciertos webmails tienden a marcar como spam los correos enviados automáticamente sin la cabecera completa, y si además mandamos el email con HTML, todavía más facilidad para que nuestros correos acaben en la carpeta de spam. Es importante avisar al cliente para que la revise por si se da el caso.

Contribución: U HTML Emails

Sin embargo, muchos prefieren mostrar dichos listados de productos en columnas. Para ello os recomiendo descargaros la contribución   con la que podréis lograrlo fácilmente. Básicamente se trata de sustituir un archivo y listo. Dependiendo de la versión que te descargues podrás controlar el número de columnas editando el código (sólo hay que cambiar un número) o directamente desde el panel de administración de Oscommerce. Una vez instalada lograremos mostrar los productos en varias columnas:

Contribución: Product Listing in Columns

1- En Firefox instala Colorzilla, un addon que te permitirá capturar los colores de la pantalla con un clic de ratón.

2- Selecciona el color que quieres cambiar en tu oscommerce (de un box, un tipo de letra, etc).

3- Edita stylesheet.css, busca el color y pon el que te guste.

Este primer truco tiene una pega, y es que los colores pueden repetirse varias veces en la hoja de estilos de Oscommerce. Así que mejor complementamos con este segundo truco.

4- Instala Firebug, un plugin que permite analizar el código de una web.

5- Inspecciona el elemento que quieres cambiar de color. Mira los estilos que le dan el color.

6- Busca el estilo en stylesheet.css y cámbialo.

Con estos dos complementos para firefox cambiar el aspecto de vuestro Oscommerce debería resultaros mucho más cómodo. Para los que no sepan cómo funcionan o cómo se instalan estos complementos os recomiendo que le echéis un vistazo a este vídeo tutorial sobre cómo instalar y usar firebug. Cuando tenga listo uno sobre cómo instalar y usar filezilla actualizaré esta entrada.

El ancho de los box y columnas viene inicialmente determinado por una constante WIDTH que se encuentra definida dentro de includes/application_top. Editando este archivo y cambiando el tamaño de dicha constante veréis cómo aumenta o disminuye el ancho de las columnas. También hay que tener en cuenta que los box de las columnas son generados usando una clase en php que podéis encontrar en includes/classes/boxes.php y también podéis modificar para darle otro aspecto (cambiar valores de cellpadding, cellspacing, etc). Si optáis por poner imágenes que no sean de fondo en las cabeceras de los box estas imágenes deben tener el tamaño adecuado o pueden llegar a descuadrar el box y hacer tu columna más ancha. Por último con stylesheet.css podéis modificar los colores que forman los box para ponerlos a vuestro gusto.

Si queréis tener algunos box con un estilo diferente al de los demás, podéis duplicar el código correspondiente en la clase boxes.php, modificarla y aplicarla a los box que queráis que sean diferentes. Y con un poco de programación podéis ayadir diferentes imágenes de fondo, colores distintos en cada línea del box, etc. El límite está en vuestra imaginación.

Mirad el diseño bien. Dos columnas, cabecera y pie de página. Típico de Oscommerce, pero mejorado a mano. Hemos instalado muchas contribuciones y programado muchas otras cosas manualmente, pero en tema de diseño nos hemos ceñido al que trae Oscommerce por defecto. Y personalmente creo que nos ha quedado muy bien. Sencillo, funcional y no daña la vista

Con esto quiero animar a todos los que usáis Oscommerce a que no os dejéis convencer cuando os dicen que uno de los puntos flacos de Oscommerce es el diseño. Cierto que el que trae por defecto es bastante vulgar, pero mirad lo que puede lograrse sabiendo aprovechar Oscommerce adecuadamente. Espero que os guste el diseño tanto como a mí.