El «Theme hijo» es una de las grandes novedades de la última versión de Prestashop, la 1.7. Por fin ya no tenemos por qué modificar el theme original y podremos realizar los cambios pertinentes sobre el tema hijo que no se perderán al actualizar el core. El tema hijo «hereda» toda la apariencia y funcionalidad del theme padre. Llevábamos tiempo deseando que Prestashop lanzase esta mejora al suponer una gran ventaja a la hora de personalizar un theme Prestashop.
¿Qué es un Child Theme?
Es la gran novedad de la última versión 1.7 de Prestashop como decíamos y sirve básicamente para trabajar sobre una plantilla o tema nuevo que se llama hijo. Ya no tenemos que copiar por completo el theme base ya que podemos mediante código y configuración, extender la apariencia y las funcionalidades del tema principal/padre como por ejemplo el conocido Classic, sobre una plantilla nueva Child.
Ventajas del Tema Child
La ventaja principal es que podemos trabajar en un tema creado específicamente para «no tocar» el principal. A partir de un theme base, aplicamos todas las modificaciones y después actualizar el core del sistema con seguridad de que las pertinentes actualizaciones no van a afectar al tema hijo ni a nuestras personalizaciones de estilo css o los tpl.
Crear paso a paso un tema hijo en PS 1.7
Tomamos de referencia el tema Clásico de Prestashop. Para crear el child theme, nos vamos a la carpeta «Prestashop/themes«. Creamos una nueva carpeta con un nombre diferente, por ejemplo «child-theme» que contenga tres archivos: config, theme.yml y preview.png (este archivo será la captura mostrada en el backend y hará referencia al theme). Seguidamente editamos el archivo theme.yml con un editor cualquiera. Nosotros utilizamos por ejemplo Sublime Text. Como verás en la siguiente imagen, tienen que estar estas líneas de código:
name: classic
display_name: classic
version: 1.0.0
autor: Name: “xxxxx”
Email: “xxxx@xxxxx.com”
url: “http://www.xxxxxx.com
Pues tendremos que modificarlas y cambiarlas por la siguiente información:
- Añadimos una línea de código antes de «name» tal que así:
parent: classic - En la línea «name», escribiremos el nombre de nuestra carpeta «child-theme«
- En la línea de display_name, encontraremos el nombre que aparecerá en el backend (child-theme)
- La versión hace referencia a la de nuestro tema hijo
- El autor: toda esta información la vemos en el backend de Prestashop.
Ojo, no podemos olvidarnos de eliminar el símbolo «#» donde aparece escrito «use_parent_assets:true» para que esto funcione. Es una sub entrada de «Assets» para definir si quieres usar CSS y JS del tema padre (true) o no (false). Si nos vamos al backend de Prestashop, nos aparecerá el tema hijo y lo seleccionaremos para utilizar ese y no el otro. ¡Ya estaría creado y configurado!
Con la configuración que acabamos de realizar en el archivo theme.yml, tu tema hijo usará las plantillas del tema padre. Hay varias maneras de extender una plantilla a otra, o bien modificando algunos bloques o bien modificando toda la estructura de la plantilla.
Vamos a ver un ejemplo de cómo modificar la plantilla de categorías. Primero que todo, debes crear la plantilla Categoría en el tema hijo:templates/catalog/listing/category.tpl
Para modificar algunas partes, extendemos el template que queremos modificar en el parent theme y definimos el bloque que queremos modificar. Lo único que necesitas hacer es añadir el código parent:«ruta para indicar que la plantilla viene del parent theme». Ejemplo:
{extends file='parent:catalog/listing/category.tpl'}
Si por el contrario queremos modificar la plantilla por completo, tendremos que extender la plantilla del listado de productos sin tener que copiarla al tema hijo porque Prestashop usará el archivo padre:
Por ejemplo, queremos cambiar el bloque del product_list_header pues escribiremos el siguiente código:
Es más, puedes incluso crear nuevos templates siguiendo los métodos anteriores de extensión e incluyendo tu archivo en uno de los bloques del archivo que estás extendiendo. Puede que además te interese este artículo sobre cómo traducir tu tema en Prestashop 1.7. ¡Y hasta aquí en tutorial de hoy sobre el child theme! Esperamos que te haya servido de ayuda.