Insertar bloques personalizados (hooks) en PrestaShop 1.7 y 8

La única forma de extender PrestaShop es mediante temas y plugins, y para que estos bloques personalizados se muestren, es necesario asignarle una posición (un hook).

Los temas de PrestaShop suelen incluir los más comunes por defecto, pero a veces, necesitamos establecer un hook en un lugar específico de la plantilla, para ello, definimos hooks personalizados.

Para definir un hook personalizado, primero debemos editar el archivo theme.yml que se encuentra dentro de la carpeta config de nuestro tema.

Una vez abierto, debemos localizar el bloque donde están declarados los hooks, si existe dentro de el un bloque llamado custom_hooks solo tendremos que definir el bloque, si no, tendremos que declarar primero el bloque custom_hooks y dentro los hooks personalizados a crear.

Es importante que el nombre y el título comiencen por «display» si se trata de un espacio para insertar en la interfaz, de lo contrario, el hook se considerará invisible por PrestaShop.

Para declarar el bloque, sólo tenemos que especificar un nombre, un título y una descripción, ten en cuenta que cada nuevo hook tiene que comenzar por -, por ejemplo:

custom_hooks:
  - name: displayHomepageSlider
    title: displayHomepageSlider
    description: Reserved space for homepage slider

Si tenemos que añadir mas de uno, simplemente debemos declarar uno nuevo comenzando por un -, quedando el archivo así:

...
hooks:
  custom_hooks:
    - name: displayHomepageSlider
      title: displayHomepageSlider
      description: Reserved space for homepage slider
    - name: displayUpperFooter
      title: displayUpperFooter
      description: Space between content and footer
...

Una vez definidos nuestros hooks personalizados, debemos incluirlos en nuestros archivos de plantilla, por lo que dentro del tema, localizamos los archivos de plantilla donde deseamos añadir estos nuevos espacios (si no sabes cuales son realmente puedes inspeccionar el código de fuente con el modo depuración habilitado) y añadir la siguiente linea:

{hook h='homepageSlider'}

Recuerda también que para mostrar un modulo ya existente o uno que estés creando, es importante que disponga de un hook declarado bajo el mismo nombre que nuestro hook personalizado, de lo contrario, no se mostrará, puedes copiar uno existente y cambiarle el nombre de la clase al nombre del hook que acabas de establecer (en este caso «DisplayHomepageSlider» por ejemplo).

Por último, para hacer uso de este nuevo espacio que has creado, deberás asignar el plugin deseado al nuevo hook para que este comience a mostrar contenido.

También deberás asignarlo en el archivo config/theme.yml de tu tema si vas a distribuirlo, ya que los hooks se configurarán automáticamente cada vez que actives el tema en PrestaShop.