Cómo crear un tema hijo en PrestaShop 1.7

PrestaShop 1.7 trae muchos cambios con respecto a las versiones anteriores relacionados principalmente con su aspecto. Una de las novedades más interesantes y evolutivas es la nueva forma para crear temas personalizados. Ahora se pueden usar los temas hijos de forma muy parecida a WordPress para extender el aspecto y comportamiento de otra plantilla.

De este modo, no hace falta duplicar o crear un tema completo. Puedes heredar aspectos y/o comportamientos del tema padre. En este punto recomiendo que el tema padre sea el tema “classic” que trae por defecto PrestaShop ya que recibe actualizaciones periódicamente pero, en la práctica puedes usar como padre cualquier otro tema que haya sido desarrollado para PrestaShop 1.7.

Si tienes conocimientos sobre la base de PrestaShop, crear un tema hijo o subordinado te resultará muy fácil.

Tema padre y estructura de archivos

En primer lugar debes tener localizado el tema que deseas usar como padre disponible en la carpeta de temas de la instalación de tu tienda. En el caso del tema que vamos a crear usaremos como padre el tema «classic» que trae PrestaShop por defecto.

A partir de ahí puedes crear una nueva carpeta con los archivos que representarán el tema hijo. En el caso del ejemplo que vamos a ilustrar crearemos una  nueva carpeta llamada “mytheme” con algunos directorios y archivos vacíos. En nuestro tema hijo «mytheme» tendremos la siguiente estructura:

CSS y JavaScript del tema hijo

Dentro de la carpeta assets de tu tema debes agregar todos los archivos CSS y JavaScript que formarán parte del tema hijo. Dentro de la carpeta assets debes crear una carpeta llamada css para los estilos y js para los archivos JavaScript. Si tienes dudas, en todo momento puedes revisar como está estructurado el tema «classic» de PrestaShop. La estructura de directorios y nombres de ficheros a sobrescribir deben ser con el mismo nombre y localización.

Cuando creas un tema hijo es porque necesitas modificar algunos detalles del tema padre o incluso también puede ser ideal para crear un tema completo totalmente diferente al tema padre. Hacerlo con un tema hijo te ahorrará mucho tiempo. A partir de ahora todos los archivos que necesites modificar, los puedes sobrescribir si es necesario.

Si necesitas modificar la hoja de estilos, lo ideal es sobrescribirlo en el tema hijo utilizando el archivo que trae por defecto vacío para los estilos propios:

/themes/mytheme/assets/css/custom.css

El archivo custom.css está en el tema padre vacío. Lo podemos aprovechar para agregar nuestros estilos propios.

Para diferenciar el tema hijo del tema padre vamos a agregar las siguientes líneas al archivo custom.css y así identificarlo:

Source code

#wrapper {
    background-color: red;
}

En este caso, tan solo agregamos al tema hijo un color de fondo para el contenedor principal de la tienda.

Para agregar nuevo código JavaScript puedes sobrescribir el archivo que viene vacío en el padre:

/themes/mytheme/assets/js/custom.js

El archivo de configuración del tema hijo

Dentro de la carpta config debe estar el archivo más importante y el que primero deberás rellenar. Se trata del archivo de configuración de la plantilla.

El archivo de configuración theme.yml que debe estar dentro del tema hijo es muy importante. En él puedes indicar todos los detalles de la plantilla tales como layouts, posiciones de los módulos, formatos y tamaños de imagen, etc.

Este debe estar situado en la siguiente ruta del tema hijo:

/themes/mytheme/config/theme.yml

En la primera parte de este archivo agregaremos:

Source code

parent: classic
name: mytheme
display_name: JA Modules theme.
version: 1.0.0
author:
  name: "Jose Aguilar"
  email: "info@jamodules.com"
  url: "http://www.jose-aguilar.com"
 
assets:
  use_parent_assets: false

En este caso estamos indicando que el el nombre del tema es “mytheme” y su padre es el “classic” y esto significa que “mytheme” hereda de “classic” todo su aspecto y comportamiento. Puedes agregar un nombre para mostrar en el directorio de módulos, la versión y la información del autor.

Después de esto, en el mismo archivo de configuración, puedes agregar más información tales como la compatibilidad, los tipos de plantilla disponibles, algunas configuraciones, módulos habilitados, posiciones de los módulos, tipos y tamaños de imágenes, etc.

A continuación el código completo de la configuración de nuestro tema «mytheme»:

Source code

parent: classic
name: mytheme
display_name: JA Modules theme.
version: 1.0.0
author:
  name: "Jose Aguilar"
  email: "info@jamodules.com"
  url: "http://www.jose-aguilar.com"
 
assets:
  use_parent_assets: false
 
meta:
  compatibility:
      from: 1.7.0.0
      to: ~
 
  available_layouts:
    layout-full-width:
      name: Full Width
      description: No side columns, ideal for distraction-free pages such as product pages.
    layout-both-columns:
      name: Three Columns
      description: One large central column and 2 side columns.
    layout-left-column:
      name: Two Columns, small left column
      description: Two columns with a small left column
    layout-right-column:
      name: Two Columns, small right column
      description: Two columns with a small right column
 
global_settings:
  configuration:
    PS_IMAGE_QUALITY: png
  modules:
   to_enable:
     - ps_linklist
  hooks:
    modules_to_hook:
      displayNav1:
        - ps_contactinfo
      displayNav2:
        - ps_languageselector
        - ps_currencyselector
        - ps_customersignin
        - ps_shoppingcart
      displayTop:
        - ps_mainmenu
        - ps_searchbar
      displayHome:
        - ps_imageslider
        - ps_featuredproducts
        - ps_banner
        - ps_customtext
      displayFooterBefore:
        - ps_emailsubscription
        - ps_socialfollow
      displayFooter:
        - ps_linklist
        - ps_customeraccountlinks
        - ps_contactinfo
      displayLeftColumn:
        - ps_categorytree
        - ps_facetedsearch
      displaySearch:
        - ps_searchbar
      displayProductAdditionalInfo:
        - ps_sharebuttons
      displayReassurance:
        - blockreassurance
      displayOrderConfirmation2:
        - ps_featuredproducts
      displayCrossSellingShoppingCart:
        - ps_featuredproducts
 
  image_types:
    cart_default:
      width: 125
      height: 125
      scope: [products]
    small_default:
      width: 98
      height: 98
      scope: [products, categories, manufacturers, suppliers]
    medium_default:
      width: 452
      height: 452
      scope: [products, manufacturers, suppliers]
    home_default:
      width: 250
      height: 250
      scope: [products]
    large_default:
      width: 800
      height: 800
      scope: [products, manufacturers, suppliers]
    category_default:
      width: 141
      height: 180
      scope: [categories]
    stores_default:
      width: 170
      height: 115
      scope: [stores]
 
theme_settings:
  default_layout: layout-full-width
  layouts:
    category: layout-left-column
    best-sales: layout-left-column
    new-products: layout-left-column
    prices-drop: layout-left-column
    contact: layout-left-column

Toda esta información se puede copiar del tema “classic” y modificarlo según las necesidades o deseos para el tema hijo.

Imágenes para el tema hijo

Dentro de la estructura de carpetas y ficheros del tema hijo también puedes incorporar una carpeta img para las imágenes del tema. Si necesitas agregar alguna imagen extra puedes usar un directorio de imágenes:

/themes/mytheme/img/

Por temas de rendimiento desaconsejo utilizar imágenes en la medida de lo posible. Cuantas menos imágenes use tu tema mucho mejor.

Plantillas de emails en el tema hijo

Si vas a hacer modificaciones en las plantillas de los emails, puedes crear la carpeta mails y agregar tus plantillas personalizadas. Siempre con el mismo nombre de archivo que utiliza PrestaShop. La ruta donde debes agregar tus plantillas sería:

/themes/mytheme/mails/

Plantillas de los módulos en el tema hijo

Si necesitas modificar visualmente algún módulo en tu tema hijo tan solo debes mover los archivos de visualización del módulo a tu tema hijo justamente dentro de la carpeta:

/themes/mytheme/modules/

Plantillas para las facturas en el tema hijo

Las plantillas que se usan para la factura también pueden ser modificadas en tu tema hijo agregando los archivos sobrescritos en la carpeta pdf:

/themes/mytheme/pdf/

Plantillas categorías, productos, mi cuenta, etc en el tema hijo

Si necesitas modificar visualmente alguna parte de tu plantilla, como por ejemplo la página del producto, tendrás que copiar el fichero que desees editar de la plantilla padre y depositarlo en el directorio del tema hijo correspondiente para sobrescribirlo. Las plantillas o archivos .tpl están todos dentro de la carpeta:

/themes/mytheme/templates/

Vista previa

El archivo preview.png es necesario agregarlo para mostrar una vista rápida del tema hijo. Esta imagen será la que se verá en la configuración del diseño y tema para tu tienda.

Diseño – Elegir tema

Una vez tenemos los archivos completados de nuestro tema hijo es posible seleccionar nuestro tema hijo desde el Backoffice.

Si nos situamos por encima de nuestro tema «mytheme» y pulsamos en el botón «Utilizar este tema» se sitúa nuestro tema hijo como tema actual de la tienda:

Al visitar la parte frontal de la tienda ya se muestra con el tema hijo que hemos creado de ejemplo.

Conclusiones

Ahora ya puedes personalizarlo a tu gusto modificando los archivos correspondientes y sobrescribiendo en el tema hijo las plantillas deseadas del tema padre.

De esta forma, en el caso de utilizar el tema «classic» como padre siempre podrás actualizar PrestaShop y tu tema hijo seguirá funcionando ya que heredará también las novedades introducidas en el tema padre.

Personalmente pienso que este sistema puede mantenerse por bastante tiempo o eso espero. Es un gran inconveniente tener que rehacer una plantilla de nuevo para poder actualizar después de un año. Es mucho trabajo que esperamos se pueda ahorrar con el tema hijo.

Todo apunta a que PrestaShop mantendrá este sistema por mucho tiempo. En WordPress hice un tema hace más de 10 años y todavía sigue funcionando en nuevas versiones de WordPress. ¿Esto sería un sueño en PrestaShop? ¿Qué opináis?

Descargar tema hijo de ejemplo