Child Themes en Prestashop 1.7

Creación de temas hijos en Prestahop 1.7

Una de las grandes novedades que nos ha aportado la nueva versión de Prestashop 1.7, es la de poder crear “temas hijos” o “child themes”. Era una de las grandes reclamaciones por parte de la comunidad. Todos los que hemos trabajado alguna vez en “Wordpress”, conocemos las ventajas que supone trabajar de esta manera para personalizar nuestros temas.

¿Qué son los child Themes?

Básicamente es una forma de trabajar por la cual, mediante una plantilla o theme base (pongamos el caso el theme por defecto actual de Prestahop 1.7. El Classic), extendemos la apariencia y funcionalidades de esta en una nueva plantilla, mediante algo de código y configuración del theme, sin la necesidad de copiar totalmente el theme. O sea el theme hijo, hereda la apariencia y funcionalidades del padre.

¿Qué ventajas aporta trabajar con child themes?

La principal ventaja que nos aporta esta forma de trabajar, es que a partir de un theme base, podremos aplicar todas las modificaciones que necesitemos y posteriormente podremos actualizar el “core” del sistema con total seguridad que las actualizaciones no afectaran al theme hijo, o sea a nuestras personalizaciones de estilo css o de los tpl.

¿Cómo crear un chid theme en Prestashop?

Pasos para crear un child theme (con el theme classic que viene por defecto):

  • Crear dentro de themes una carpeta (poner el nombre de carpeta que deseemos. p.ej: “tema-hijo”.
  • Dentro del theme classic, copiar la carpeta config (solo hay el archivo config.yml) (otro archivo que deberíamos crear es el preview.png que será la captura que se mostrará del theme desde el backend)
  • Deberemos editar el archivo config.yml (con el editor que sea. En nuestro caso Sublime Text)

En las primeras líneas del documento encontraremos lo siguiente:

  • name: classic
  • display_name: classic
  • version: 1.0.0
  • autor:
    • Name: “Prestashop team”
    • Email: “pub@prestashop.com”
    • url: “http://www.prestashop.com

Deberemos editar y cambiar estos datos:

  • Añadiremos una primera línea antes de name con la palabra:  parent: classic
  • name: el nombre de nuestra carpeta (tema-hijo)
  • display_name: Será el nombre que nos aparecerá en el backend (p.ej: tema-hijo)
  • version: el número de versión de nuestro tema hijo.
  • autor: todos los datos del autor del tema hijo (toda esta parte se verá reflejada en el backend de Prestashop)

Finalmente, para que funcione deberemos ir unas líneas más abajo y descomentar (quitar el símbolo #) use_parent_assets: true

Para finalizar, deberemos ir al backend de Prestashop, donde ya nos debería aparecer el tema hijo y seleccionarlo, para utilizarlo “utilizar este tema”.

Con todo esto ya podríamos utilizar nuestro nuevo tema hijo, pero de todas maneras, esto no tiene mucha utilidad, ya que para modificar cualquier cosa lo deberíamos hacer desde el archivo padre. Para por ejemplo crear nuestra propia hoja de estilos, o scripts javascript deberíamos ir en el archivo config.yml y descomentar (#) las líneas que hacen referencia a css o js para añadir nuestras propias hojas de estilo css o nuestra librería de scripts (lógicamente también crear los archivos css o js en la ruta que de digamos) p.ej: (path: assets/css/miestilo.css)

código yml chld themes prestashop 1.7