Después de darle un vistazo a la parte del funcionamiento de un tema en PrestaShop, su estructura o algunas prácticas recomendadas, vamos a adentrarnos un poco más en como crear un tema en PrestaShop basándonos en la copia del que se nos ofrece por defecto.
El sistema de temas de PrestaShop, también llamados themes, templates o plantillas, consta de un motor de plantillas llamada Smarty con la que se pueden crear plantillas con poco conocimiento y del que hablaremos un poco más a delante en esta serie de tutoriales.
Hoy, hablaremos de los siguientes puntos:
- Copiar el tema por defecto de PrestaShop
- Modificando el CSS
- Algunos cambios para crear tema en PrestaShop 1.5
- Crear Captura y probar
- Estructura de un tema en PrestaShop
- Integración de un tema en PrestaShop
Comencemos ….
Copiar el tema por defecto de PrestaShop
Para no partir de cero y guiarnos un poco en la creación del tema, vamos a copiar el tema que viene por defecto en PrestaShop y le cambiamos el nombre:
Para hacer la copia nos vamos a la ruta /themes dentro de nuestro PrestaShop, copiamos la carpeta “PrestaShop” y le cambiamos el nombre por ejemplo a “RentalOnline”.
Modificando el CSS
Lo primero que vamos hacer, una vez hemos copiado el tema por defecto, es modificar el archivo CSS que se encuentra en /theme/RentalOnline/css, concretamente abrimos el archivo “global.css”. Si lo que queremos es modificar el diseño de la página de mantenimiento, tendremos que ubicarnos en “maintenance.css”.
Por supuesto se da por hecho que para crear un tema PrestaShop es fundamental tener conocimiento de CSS.
Para añadir imágenes tenemos que hacerlo dentro de la ruta de nuestro tema y en concreto en la carpeta /img.
Algunos cambios para crear un tema en PrestaShop 1.5
Para crear un tema en PrestaShop 1.5 hay que dar un paso más para que os funcione, no basta con copiar la carpeta y seleccionar tu tema en las preferencias.
Ahora, dentro de Preferencias/Temas, tenemos que añadir nuestro tema desde el botón que hay en la parte superior derecha «Añadir Nuevo«, como podéis ver en la imagen:
Y en la ventana que se nos muestra, debemos indicar el nombre de la plantilla y el nombre del directorio, que en nuestro caso, será para los dos campos: «RentalOnline»
Hacemos clic en «Guardar» y ya nos aparecerá nuestro tema para seleccionarlo (ver siguiente imagen):
Crear Captura y probar
Para ayudar a visualizar el tema en el panel de administración, es necesario que todos los temas tengan un archivo preview en la carpeta raíz del tema con el siguiente nombre: preview.jpg con un tamaño de 100×100 píxeles.
Para verificar que hemos hecho las cosas bien, vamos a nuestro panel de administración, accedemos a la pestaña «Temas» y la subpestaña «Aspecto/Preferencias«, seleccionamos nuestro nuevo tema «RentalOnline» y Guardamos.
Si todo ha ido bien, deberíamos ver nuestra plantilla funcionando en la parte frontend de nuestra web.
Estructura de un tema en PrestaShop
Hemos creado un tema sin cambiar absolutamente nada del código aun, tan sólo lo hemos preparado con unos archivos básicos copiados del tema por defecto y ahora procederemos a modificar los que nos hagan falta para darle nuestro estilo.
Para ello antes tenemos que conocer un poco la estructura de un tema en PrestaShop:
| Archivo o carpeta | Descripción |
|---|---|
| preview.jpg | Esta imagen es utilizada como una vista preliminar en el selector «Tema» de la sub-pestaña “Aspecto” en la pestaña «Preferencias». Esta imagen es obligatoria, ya que sin ella el tema no puede ser seleccionado. Obviamente, debe reflejar el diseño del tema, no su ?? logo o el nombre del diseñador… |
| 404.tpl | Utilizado cuando la página solicitada no es encontrada (error HTTP 404). |
| address.tpl | Utilizado al agregar o editar una dirección del cliente. |
| addresses.tpl | Utilizado al enumerar las direcciones de un cliente. |
| authentication.tpl | Utilizado al identificar a un usuario o crear una nueva cuenta de usuario. |
| best-sales.tpl | Utilizado para enumerar las mejores ventas. |
| breadcrumb.tpl | Utilizado para encontrar la ruta de navegación. |
| category.tpl | Utilizado para enumerar todos los productos de una categoría específica. |
| category–tree–branch.tpl | Utilizado sólo por el bloque de Categoría. |
| category–cms–tree–branch.tpl | … |
| cms.tpl | Utilizado para páginas informativas (sub-pestaña CMS>»Herramientas»). |
| contact-form.tpl | Utilizado por el formulario de contacto. |
| discount.tpl | Utilizado al enumerar todos los boletos de descuento para un solo cliente. |
| errors.tpl | Utilizado al mostrar errores. Potencialmente llamado por todas las páginas. |
| footer.tpl | Pie de página. |
| guest–tracking.tpl | Utilizado cuando un visitante no tiene una cuenta conocida en el sitio, pero desea que su cuenta sea rastreada – por lo tanto necesita crear una cuenta para ingresar. |
| header.tpl | Encabezado de la página |
| history.tpl | Utilizado cuando se enumera el historial de pedidos de un cliente. |
| identity.tpl | Utilizado cuando un cliente edita su información personal. |
| index.php | Archivo en blanco, los visitantes pre visualizar el contenido de la carpeta. |
| index.tpl | Página de bienvenida. |
| maintenance.tpl | Utilizado cuando el sitio se encuentra en modo de mantenimiento. |
| manufacturer.tpl | Utilizado al enumerar todos los productos de un solo fabricante. |
| manufacturer–list.tpl | Utilizado al enumerar todos los fabricantes. |
| my–account.tpl | Página de bienvenida para la cuenta de un cliente. |
| new–products.tpl | Utilizado al enumerar productos que fueron agregados de último al carrito. |
| order-address.tpl | Utilizado durante el proceso de compra: Paso 1, elección de direcciones (entrega, facturación). |
| order–carrier.tpl | Utilizado durante el proceso de compra: Paso 2, elección método de transporte. |
| order–confirmation.tpl | Utilizado durante el proceso de compra: Último paso, confirmación del pedido (previo pago). |
| order–detail.tpl | Utilizado para mostrar el contenido del pedido de un cliente. |
| order–follow.tpl | Utilizado cuando un cliente necesita solicitar una devolución del producto. |
| order–opc.tpl | … |
| order–opc–new–account.tpl | … |
| order–payment.tpl | Utilizado durante el proceso de compra: Paso 3, elección del modo de pago. |
| order–return.tpl | Utilizado para mostrar los detalles de la devolución de un producto de un cliente. |
| order–slip.tpl | Utilizado para mostrar vales de crédito del cliente. |
| order–steps.tpl | Barra de progreso del proceso de compra. |
| pagination.tpl | Utilizado por todas las páginas que enumeran productos. Muestra el botón de paginación, permiten saltar a la página siguiente/anterior de productos. |
| password.tpl | Utilizado cuando un cliente necesita cambiar su contraseña. |
| prices–drop.tpl | Utilizado para enumerar todas las promociones actuales. |
| product.tpl | Utilizado para mostrar los detalles de tan sólo un producto. |
| product–list.tpl | Utilizado por todas las páginas que enumeran productos. Muestra la lista actual de los productos. |
| product–sort.tpl | Utilizado por todas las páginas que enumeran productos. Muestra un menú que permite organizar y filtrar productos. |
| products–comparison.tpl | … |
| scenes.tpl | Utilizado para mostrar detalles de una escena dentro de una categoría de producto. |
| search.tpl | Utilizado para enumerar resultados de una consulta de búsqueda. |
| shopping–cart.tpl | Utilizado para enumerar productos del carrito de un cliente. |
| shopping-cart-product-line.tpl | Utilizado para mostrar una sóla hilera del carrito. |
| sitemap.tpl | Utilizado para mostrar el mapa de sitio. |
| store_infos.tpl | … |
| stores.tpl | … |
| supplier.tpl | Utilizado para enumerar todos los productos de un sólo proveedor. |
| supplier–list.tpl | Utilizado para enumerar todos los proveedores. |
| thickbox.tpl | Utilizado para acercar la imagen de un producto. |
| /cache | … |
| /css | Contiene todos los archivos de hojas de estilo para el tema. El archivo global.css se dedica la diseño de casi todo el sitio. A menos que sepa exactamente lo que está haciendo, no manipule estos archivos. |
| /img | Contiene todas las imágenes del tema. Debe remplazar estas imágenes con sus creaciones respectivas. Si no sabe qué hacer con ellos, mantenga los archivos originales. |
| /js | Contiene todos los archivos del tema JavaScript. A menos que sepa exactamente lo que está haciendo, no debe manipular estos archivos. |
| /lang | Contiene todos los archivos de traducción. Estos son generados por la herramienta de traducción de back–office y no se deben editar directamente. Si la traducción necesita edición, trasládese a la sección “Modificar traducciones” de la sub-pestaña “Traducciones” en la pestaña «Herramientas» del back–office y seleccione «Traducciones de front office«. |
Integración de un tema en PrestaShop
Para poder modificar o crear un tema en PrestaShop hay que saber ubicar los módulos y hooks, así que primero vamos a explicar que es cada cosa y después veremos donde se ubican.
Hooks: Son parte de código que te permite crear módulos para interactuar con los displays o eventos. Estos Hooks, que en realidad con contenedores, permiten recuperar eventos o cambiar la pantalla.
Para usar un hook, hay que ir a la clase del módulo y crear un método estático público a partir de la palabra «hook» seguido del nombre del «hook«, por ejemplo «hookRentalOnline«.
Hay dos tipos de hooks, Hooks de Acción (por ejemplo enviar un mail cuando el cliente crea un usuario) o Hooks de Vista (por ejemplo, para mostrar un módulo en una columna).
Módulos: Los módulos nos permiten añadir funcionalidades a nuestra tienda los cuales podrán ser colocados en contenedores de nuestra página web, los conocidos Hooks.
Existen distinos tipos de módulos:
- Forma de Pago
- Columna Izquierda
- Columna Derecha
- Página Principal
- Cabecera
- Pié de Página
- Pié del Producto
- Factura
En la siguiente parte del tutorial, empezaremos a modificar el tema para obtener el estilo que queremos conseguir.
Índice de nuestro monográfico sobre Crear un tema en PrestaShop:
Información Relacionada: Tu tienda online con Prestashop desde 5,45€/mes!
