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
Índice de contenidos
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.
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:
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”.
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:
Ahora sí, para insertar el módulo en una posición, se pulsa en “Insertar un hook” en la posición superior derecha:
Buscamos nuestro módulo en el primer desplegable y después especificamos en el segundo desplegable dónde se quiere introducir:
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:
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:
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.
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:
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.
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.
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)
