Hemos hablado ya en varias ocasiones de PrestaShop en el blog, pero lo cierto es que una vez sabes manejar el CMS de ecommerce a la perfección y si además eres desarrollador, algo fundamental es poder ser autosuficiente y tener la destreza de poder crearte tu propio theme y esto es lo que intentaré que aprendas con esta serie de tutoriales que iré publicando a lo largo de estos días.
Para crear un tema en PrestaShop, también llamado theme o plantilla, tienes que conocer CSS, HTML y PHP. Si cumples estas premisas, antes de empezar a codificar un nuevo theme PrestaShop es preciso conocer también algunas cosas como el funcionamiento de un Theme PrestaShop, su estructura o algunas prácticas recomendadas.
¿Como funciona un tema en PrestaShop?
A la hora de crear una plantilla en PrestaShop es importante conocer que PrestaShop se compone de distintos archivos que podrás modificar según tus necesidades o lo que quieras mostrar. Algo que tenemos que tener en cuenta a la hora de crear un theme en PrestaShop:
- Todos los temas deben tener sus archivos localizados en la carpeta /theme de la raiz.
- Cada Theme tiene que tener su subcarpeta en la carpeta principal de themes.
- Cada theme en principio se compone de: Archivos de plantilla (.tpl), imágenes (.gif, .png, .jpg), archivos CSS, archivos javascript.
- Toda plantilla tiene una imagen para previsualizar la apariencia del theme (preview.jpg) en su carpeta.
La estructura entonces quedaría de la siguiente manera:
Traducciones en tus temas
Para poder permitir que cualquiera pueda traducir tu tema, usando la herramientas de traducción (pestaña “Tools/translations” del back-office), es necesario que tus textos estén englosados dentro de una función Smarty como la siguiente:
{l s='My Text'}
A saber antes de crear el tema
Antes de empezar con la creación del tema, vamos a hacer un listado con la lista de las mejores prácticas:
- No mezcles XHTML y código PHP.
- No mezcles XHTML y código CSS. Los CSS deben ir en un archivo a parte.
- Valida tu código XHTML y CSS. (Validar XHTML, validar CSS).
- Asegúrate de crear código legible para un mejor mantenimiento.
- Comenta el código (en Inglés a ser posible).
- Al editar un theme, primero ponlo en modo “Mantenimiento” en el backoffice.
- Cuando sea posible, usa CSS Sprites. Si quieres saber de que se trata, puedes informarte aquí.
Ahora que tienes unas nociones básicas, en el siguiente tutorial empezaremos a crear nuestro tema PrestaShop, así que atentos a las publicaciones.
Índice de nuestro monográfico sobre Crear un tema en PrestaShop:
Información Relacionada: Tu tienda online con Prestashop desde 5,45€/mes!
