comparte el articulo 

Introducción al diseño de temas en Prestashop I

Actualizado el 26/10/2011 < > 0 Comentarios

Resumen: Mostramos los elementos básicos para el diseño de temas para Prestashop. Sienta las bases para la construcción de temas personalizados de Prestashop.

Cuando decidimos utilizar algún CMS, una de nuestras principales preocupaciones es la construcción de un tema personalizado, que muestre en todo momento los detalles que nos interesan y se ajusten a nuestras necesidades.

Prestashop nuevamente nos sorprende, no solo haciendo más fácil este proceso sino dándonos la libertad de ajustar nuestra interfaz al 100% a nuestro negocio. Para flexibilizar el proceso de gestión de plantillas Prestashop utiliza el Motor de Plantillas para PHP “Smarty”, el cual entre otras cosas permite la separación entre el código PHP de la lógica y el HTML de la presentación, además de ayudar en un rápido desarrollo y despliegue de las aplicaciones realizadas con él. Para más información de Smarty podéis consultar los siguientes vínculos:

Detalles iniciales: diseñar temas para Prestashop

Antes de comenzar a fondo con la parte técnica, es necesario aclarar varios detalles que nos permitirán entender la estructura de los temas en Prestashop:

  • Cada uno de los temas están ubicados en la carpeta /themes, cada tema posee su propia carpeta; por lo que si creas una plantilla llamada “mitema” la dirección física sería “/themes/mitienda” .
  • Los temas están compuestos por: los archivos “templates” (.tpl), las imágenes (.jpg, .png, .gif), los archivos de estilo (.CSS) y si es necesario los de JavaScript (.js).
  • Cada tema tiene una imagen llamada “preview.jpg” donde se muestra un vistazo de cómo debe verse nuestro sitio una vez instalado.

Para una mejor comprensión de la estructura interna de una plantilla, veamos la siguiente imagen:

Estructura de tema de Prestashop

Estructura de tema de Prestashop

  • La carpeta “/css” contiene todos los archivos CSS del tema.
  • La carpeta “/img” contiene todas las imágenes.
  • La carpeta “/js” contiene todos los ficheros JavaScript.
  • La carpeta “/lang” contiene todas las traducciones. Un elementos a remarcar en esta carpeta es que debe tener permisos de lectura/escritura para que de esta forma el módulo de traducción pueda modificar los elementos necesarios.
  • La carpeta root incluye todos los archivos .tpl generados por Smarty así como el preview.jpg.

Manejo de las traducciones en un tema de Prestashop

Una de las funciones de Prestashop que le dan tal flexibilidad es el manejo dinámico de traducciones. Para resolver esto, Smarty orienta que todos los elementos traducibles (son los elementos que se mostrarán en alguna interfaz y a criterio del autor deba ser traducible)  estén con la siguiente estructura:

{l s='Texto traducible'}

Cuando la herramienta de traducción de Prestashop detecte esto automáticamente nos brindará la opción de traducir este texto a todos los idiomas deseados.

 Mecanismos de transmisión de datos en Prestashop

Prestahop presenta una estructura de transmisión de datos muy similar al resto de los CMS y aplicaciones desarrolladas con la arquitectura Modelo-Vista-Controlador, es decir separa las capas del modelo, la vista y las controladoras, además de definir algunas variables globales y mecanismos de transmisión de datos bien establecidos.

Veamos como maneja Prestashop la transmisión de los datos:

Transmisión de datos en Prestashop

Transmisión de datos en Prestashop

Nótese como en el controlador “hello.php” se inicializan las variables $surname y $lastname, al invocar a la vista “hello.tpl” este da la opción de imprimir “Hello world my name is” (una de las conclusiones a las que debe llegar es que en Smarty el comando l es el que ordena que se muestre algo) y se adjunta las variables transmitidas desde el controlador.

Personalizando un tema de Prestashop

Para lograr un tema único de Prestashop hay 2 formas fundamentales: crear un tema desde cero y personalizar uno ya creado. En este artículo daremos los pasos necesarios para personalizar uno y en el próximo detallaremos en la creación de un nuevo tema.

Para personalizar un tema debemos seguir los siguientes pasos:

1.- Copiar el tema que vamos a modificar

Copiamos para la carpeta “/themes” la carpeta con el tema que vamos a modificar, en caso de ya estar en la misma carpeta, pues duplicarlo y renombrarlo.

Nuevo tema. Ubicación

Nuevo tema. Ubicación

2.- Modificando la hoja de estilo.

Localizamos la carpeta CSS y podemos modificar el estilo de nuestro tema tanto como deseemos. Sería importantes antes de hacer esto revisara sus conocimientos de CSS, ya que de éstos dependerán los posibles cambios que pueda hacer.

Dentro de la carpeta CSS el archivo global.css es el que contiene todo el estilo de nuestro sitio.

Recuerde que si incluye alguna imagen nueva esta debe ser copiada en la carpeta “/img“.

3.- Crear”preview.jpg

Una vez finalizado los cambios al tema, debemos hacer un screenshoot al tema nuevo, este nos servirá para que el módulo de gestión de temas de Prestashop pueda mostrarlo.

En nuestro próximo artículo daremos paso a paso la creación de un nuevo tema de Prestashop.

Publicado el 19/10/2011, última actualización 26/10/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia

Autor: Ronald Baby González

URL: LaWebera.es :: Diseño Paginas Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras