[Prestashop] Insertando un módulo HTML personalizado en un nuevo hook

Si se hacen adaptaciones a medida en tiendas Prestashop, se puede producir más de una vez el problema de necesitar introducir alguna sección en la web y con los módulos que vienen con la plantilla no se consigue

Creando un módulo HTML personalizado en 1min

Para crear un módulo HTML personalizado se dispone de la web http://contentbox.org/ donde se puede crear un módulo propio. Simplemente hay que pulsar en “Generate Your module” en la parte inferior de la web y habrá que introducir el nombre y descripción de dicho módulo para que al instalarlo se pueda encontrar fácilmente.

Content Box

 

Una vez completada esta parte, se descargará el módulo al equipo. Se instala como cualquier otro módulo de Prestashop y hay que entrar en la Configuración, de manera que se pueda escribir el código HTML que se necesite.

Por ejemplo, si se quiere crear una barra arriba del menú para poner los datos de contacto (si la plantilla no lo permite), se puede crear este código HTML:

Código HTML Content Box

 

Especificando la posición del módulo en nuestra web

Lo más probable será que al abrir la web, se vea este módulo personalizado en la cabecera o pie de página. Esto es así porque el módulo por defecto lo engancha o “hookea” en estas dos posiciones. Lo primero sería eliminarlo de estas posiciones. Para ello, habrá que ir a “Módulos/Posiciones de los módulos”, buscar las secciones Header y Footer y pulsar en “Desenganchar”.

Desenganchar Módulo Content Box

 

Ahora, se podría enganchar el módulo en cualquier otra posición de los hooks permitidos por la plantilla. Recomiendo leer la documentación de la plantilla para conocer cada una de las posiciones, de lo contrario, se tendrá que recurrir al método de prueba y error.

IMPORTANTE: Si no aparecen algunas posiciones que figuran en la documentación de la plantilla, es posible que estén como “invisibles”. Por ello, se recomienda marcar la opción “Mostrar los hooks invisibles” en la parte superior:

Mostrar hooks invisibles

 

Ahora sí, para insertar el módulo en una posición, se pulsa en “Insertar un hook” en la posición superior derecha:

Insertar hook

 

Buscamos nuestro módulo en el primer desplegable y después especificamos en el segundo desplegable dónde se quiere introducir:

Inserción hook

 

Si refrescamos la pantalla veremos que ya aparece correctamente en la posición que queremos.

Creando una posición nueva (nuevo hook personalizado)

Si la plantilla no nos permite introducir el módulo en el sitio exacto donde queremos, se puede crear una nueva posición personalizada. Para ello, se debe abrir el archivo de nuestro módulo desde /modules/mimodulo/mimodulo.php. Habrá que localizar la función “install” y aparecerá esta línea:

Función instalar hook

 

Lo siguiente será insertar un nuevo OR condicional para registrar un nuevo hook con el nombre que se elija. Aquí se puede ver que necesito crear una barra superior, por lo que se llamará “topBar”. Se puede ver cómo quedaría el código insertado:

Función añadida instalar hook

 

Se guarda el archivo y como ya se había instalado el módulo, se accede a Módulos y habrá que pulsar en “Reinicializar”.

CUIDADO, si ya había un código HTML insertado, hay que realizar una copia antes porque se perderá este código.

Reinicializar módulo Content Box

 

Ahora se tiene la nueva posición creada. Habrá que ir a “Insertar un hook” para registrar el módulo en la nueva posición como se ha explicado en el punto anterior, y después se puede verificar si se ha hecho todo correctamente, marcando la opción “Mostrar los hooks invisibles” y desplazándonos hasta la parte inferior:

Módulo Content Box Hook Invisible

 

El módulo se encuentra en una nueva posición, pero ahora falta insertar dicha posición en el fichero .tpl que se necesite. Como en este caso se necesita que aparezca en la parte superior de la web, se deberá insertar el siguiente código en el fichero header.tpl.

Código Hook Tpl

 

 

Como se puede observar, simplemente hay que insertar el código, reemplazando “topBar” por el nombre de vuestra nueva posición o hook.

Por último, solo queda darle un poco de estilo al código HTML a través del fichero css de la plantilla. Aquí podéis comprobar el resultado del módulo insertado en un nuevo hook de la web.

Vista final hook en pantalla

 

Espero que os sirva de utilidad para crear vuestros propios componentes en vuestros proyectos Prestashop. ¿Conoces algún otro método más sencillo o rápido? Por favor, déjanos tus comentarios, ¡queremos aprender de todos! (enlace contacto)

[Prestashop] Insertando un módulo HTML personalizado en un nuevo hook
Valora este post

Rubén González Platas

Programador web. Ayudo a empresas y emprendedores a crear su web corporativa y canal de venta online. ¿Tienes un proyecto en mente y no sabes cómo llevarlo a cabo? Contacta conmigo y te ayudaré.

Deja un comentario