A petición de un buen compañero de trabajo, hoy os voy a contar cómo crear un tema hijo (childtheme) en Prestashop 1.7.x.

Antes de comenzar, pongámonos con la parte teórica para responder a dos preguntas clave:

¿Qué es un tema hijo o childtheme?

Un childtheme es un tema que extiende todas las funcionalidades y apariencia de un tema padre o tema base del que extiende.

¿Por qué debería crear un childtheme y cuándo?

La ventaja que se obtiene al crear un tema hijo es que podemos modificar la funcionalidad y apariencia de un tema de Prestashop (por ejemplo: del tema por defecto Classic) sin tener que preocuparnos de las posibles posteriores actualizaciones del Core de Prestashop, ya que con el tema hijo evitaremos que con esta actualización nuestras modificaciones de plantillas, CSS y/o JS de nuestro tema personalizado se pierdan.

Por tanto, siempre que estemos ante la necesidad de modificar cualquier fichero de la carpeta del tema Classic, deberíamos plantearnos crear un tema hijo si queremos que nuestros cambios perduren tras las actualizaciones del Core.

Crear un childtheme

He aquí la página de producto del tema Classic de Prestashop:

Imaginemos que queremos mostrar la referencia debajo del nombre del producto, que el tema Classic no lo hace por defecto.

Es muy tentador ir a la plantilla (.tpl) de la página de producto: [rootPath]/themes/classic/templates/catalog/product.tpl y realizar ahí las modificaciones oportunas.

Sin embargo, hacer esto es un error ya que si en el futuro se realiza una actualización del Core podríamos perder los cambios realizados.

Para evitar esto, llega la posibilidad de crear un tema hijo.

¿Cómo se crea un tema hijo?

Crear un tema hijo es realmente sencillo. El tema padre pone una semillita en el tema madre y... :P

Ahora en serio. Para crear un tema hijo sólo necesitamos crear una carpeta en themes/ con el nombre que queramos ponerle a nuestro tema hijo. Yo me complicaré un montón y le llamaré csoon-childtheme.

Tras esto, clonamos la carpeta config del tema padre (Classic) en la carpeta del tema hijo (csoon-childtheme) y el preview.png (como aún no tengo modificaciones del tema hechas, dejo la misma preview ya que no hay cambios), de modo que tendremos lo siguiente:

Ahora realizaremos unas pequeñas modificaciones en el fichero de configuración del tema hijo: theme.yml.

Básicamente, lo que he hecho ha sido cambiar la información básica del tema (líneas 1-8) y descomentar (quitar la almohadilla "#") que había delante de use_parent_assets para que se incluyan los assets del tema padre y toda la funcionalidad se mantenga tal cual está en el tema padre.

Con esto, ya tenemos un tema hijo creado. Ahora mismo es un tema hijo sin sentido, ya que no se ha realizado ninguna modificación respecto al tema padre, pero lo que es estar, está. De hecho, es hora de ir al Backoffice > Diseño > Tema y logotipo. Aquí ya debemos visualizar tanto el tema Classic seleccionado como un nuevo tema disponible llamado csoon-childtheme:

Seleccionamos el nuevo y ya estamos listos para realizar modificaciones en el tema hijo e ir viéndolos aplicados en el front.

Realizar modificaciones en el tema hijo

Procedamos a incluir la referencia justo debajo del nombre del producto en la página de producto.

Para ello, creamos una plantilla para la página del producto en el tema hijo: [rootPath]/themes/csoon-childtheme/templates/catalog/product.tpl que extienda de la plantilla del tema padre.

1{extends file='parent:catalog/product.tpl'}

Si recargamos la página, seguiremos sin ver cambios, ya que simplemente extendemos de la plantilla del padre, sin cambio realizado aún.

Ahora, para añadir la referencia justo debajo del nombre del producto modificaré el bloque que contiene dicho elemento: page_header_container

Así está este bloque en el padre:

1{block name='page_header_container'} {block name='page_header'}
2<h1 class="h1" itemprop="name">
3  {block name='page_title'}{$product.name}{/block}
4</h1>
5{/block} {/block}

Así quedará este bloque en el tema hijo:

1{block name='page_header_container'} {block name='page_header'}
2<h1 class="h1" itemprop="name">
3  {block name='page_title'}{$product.name}{/block}
4</h1>
5<p class="product-reference">{$product.reference}</p>
6{/block} {/block}

Para tener algún cambio más de ejemplo, eliminaremos la descripción de la página de producto, lo cual se encuentra en el bloque product_description_short del tema padre:

1{block name='product_description_short'}
2<div id="product-description-short-{$product.id}" itemprop="description">
3  {$product.description_short nofilter}
4</div>
5{/block}

Lo modificamos y quedará así:

1{block name='product_description_short'}{/block}

Por tanto, la plantilla product.tpl del tema hijo completa, con la referencia incluida y la descripción corta eliminada, quedará así:

1{extends file='parent:catalog/product.tpl'} {block name='page_header_container'}
2{block name='page_header'}
3<h1 class="h1" itemprop="name">
4  {block name='page_title'}{$product.name}{/block}
5</h1>
6<p class="product-reference">{$product.reference}</p>
7{/block} {/block} {block name='product_description_short'}{/block}

Este asunto, aunque es sencillo, tiene varias vertientes, ya que al igual que se pueden crear plantillas en el tema hijo, se pueden crear nuevos CSS y JS que predominen frente a los existentes en el tema padre.

Para no alargar demasiado el post, lo cortaré por aquí, totalmente dispuesta a hacer un nuevo post de creación de nuevos CSS y JS si así lo necesitáis.

Espero haberos podido ayudar a entender cómo se crean los hijos...