Como agregar un menú HTML vertical u horizontal a nuestra plantilla por defecto de PRESTASHOP

En realidad parece algo sencillo, pero en cuanto me puse a la tarea de personalizar una plantilla de Prestashop y mis clientes me pidieron que pusiera un menú vertical desplegable en su tienda de Prestashop, me encontré con que no era tan fácil como parecía (Me pedían algo como esto). Sobre todo porque el menú que me pedían que insertara era del estilo ese que le pasas el mouse por encima de los enlaces y te abre otro submenu y dentro otro submenú más. Y Prestashop tiene el módulo de categorías, pero no funciona al pasarle el mouse por encima. A parte otra cosa que no les gustaba a estos clientes era que el módulo de categorías, cuando despliegas cada submenú, éstos aparecen en la misma línea que el menú principal, lo que hace que visualmente no alcances a detectar dentro de qué categoría está cada uno de los ítems del menú. 

Además me di cuenta de que en los foros y "Googleando" tampoco encontré muchas soluciones.

Bueno, a decir verdad, la solución más obvia era utilizar un módulo HTML, colocarlo en la posición deseada y ponerle el código HTML del menú. Y aquí me topé con el primer obstáculo. El código del menú HTML consta de dos partes, por un lado tenemos la estructura del menú, y por el otro los estilos, que le dan forma y color al menú. Y los módulos que encontré no me permitían incluir HTML y CSS todo en el mismo código. 

Hasta que por obra y gracia de San Google me topé con un módulo que permitía poner un código HTML y agregarle ficheros CSS: Content Box

Este módulo lo que hace es agregar contenido HTML en el hook que quieras, y formatearlo con CSS de la forma que te apetezca.

El problema vino cuando busqué información de cómo usarlo. Y no encontré mucho que dijera cómo se debía hacer.

Bueno, todo muy bien pero... ¿cómo se hace? 

Antes que nada decir que utilizo Prestashop 1.6. No lo he probado en versiones anteriores, aunque creo que funciona también. Es más, el módulo dice que es compatible con todas las versiones de Prestashop.

01. Bajando el módulo

Primero que nada bajamos el módulo. Más adelante veremos que la misma página tiene una opción en la cual nos permite descargar el módulo o generar uno personalizado. Esto es extremadamente útil para agregar tantos códigos HTML como necesitemos. Simplemente poniéndole un nombre diferente nos generará otro módulo que podremos insertar en otra posición de nuestra plantilla PRESTASHOP. Es más, en mi caso en particular mis clientes me habían pedido que además de poner un menú desplegable en la parte izquierda de la tienda, que pusiera otro menú horizontal en la parte superior. Así que generé otro módulo con un nombre diferente y lo instalé y lo coloqué en la posición superior y ya está, solucionado.

Pero sigamos. Lo haremos paso a paso para que no tengan que estar como yo, improvisando y probando y dándome la cabeza contra la pared para que quedara bien. En los foros de prestashop sugerían utilizar éste módulo. Pero no he encontrado a nadie que explicara como funcionaba. Y estaba más perdido que hitler en el día del amigo jeje!

02. Instalación del módulo

Una vez bajado el módulo procedemos a instalarlo en nuestra tienda PRESTASHOP. A estas alturas creo que sabrán como instalar un módulo. De todas formas lo mostraré por si alguien no lo sabe. Si eres de los que ya lo saben, pasa al punto 3.

Para instalar un módulo en Prestashop vamos a módulos:

Luego en la parte superior derecha le decimos que queremos agregar un nuevo módulo:

Especificamos la ubicación de nuestro módulo y le damos a "subir este módulo"

Y ya está. Si vamos al listado de módulos y en el campo de búsqueda escribimos "content" nos aparecerá nuestro módulo recién instalado.

03. Agregando nuestro menú a la posición deseada

Una vez que tenemos nuestro módulo instalado lo siguiente es colocarlo en la posición correcta. Esto depende de si lo queremos en la parte izquierda de la tienda o en la parte superior.

Mucho de esto depende de si utilizamos el tema por defecto o si por el contrario tenemos una plantilla personalizada. Si este fuera el caso puede ser que las posiciones estén cambiadas. Yo utilicé la plantilla por defecto de Prestashop 1.6.

Si queremos que el menú aparezca en la izquierda, el hook a insertarlo es el displayLeftColumn mientras que si lo queremos en la parte superior, deberíamos colocarlo en el displayTopColumn .

 Para los que no saben cómo se hace:

Van al módulo contentbox, dándole en "Configurar". Una vez dentro le damos en la parte superior derecha, donde dice "Configurar los Hooks" . 

  

Luego veremos las posiciones que tiene asignado ese módulo en nuestra tienda. Para el bloque de la izquierda debería estar en displayLeftColumn . Si no está en esa posición haremos clic en la parte superior derecha (nuevamente) en donde dice "Insertar un Hook"  

Una vez dentro nos cercioramos de que el módulo sea el correcto (en nuestro caso "Contenbox") y en donde dice "Insertar un hook en"  le ponemos "displayLeftColumn".

Si lo queremos en la parte superior le ponemos "displayTopColumn".

04. Agregando código a nuestro módulo

Vamos al listado de módulos y buscamos el nuestro (contenbox) y le damos a "configurar" y accederemos a las opciones de configuración del módulo.

Una vez dentro lo primero que veremos es un editor WYSIWYG en el cual se agrega el código HTML que se desee. La primera consideración a tener en cuenta es que al tener activado este editor, si pegamos un código HTML, éste no funcionará. Porque al tener este editor activado el código aquí pegado o ingresado lo detecta como un texto al cual le da un formato. Para evitar esto debemos bajar más en las opciones y donde pone "DEVELOPERS CONFIGURATIONS" desactivar el editor, donde dice "Use text Editor" colocando el desplegable en NO.

05. Creando nuestro menú en HTML

Bueno, hay varias formas de hacer esto. Todo depende de la profundidad de los submenúes y del tipo de menú que se necesite. Y sobre todo del conocimiento que se tenga sobre HTML. Sabiendo esto seguro no tendrán problema de crear un menú totalmente funcional.

Hay una web muy interesante que se llama CSS MENU MAKER que nos permite crear un menu a nuestro gusto y luego poder descargarlo. Debo decir que en esta página, para descargar los módulos, hay que pagar. Lo bueno es que te permiten ver el código HTML de tu menú, así como también el código CSS. Así que lo único que tendríamos que hacer es copiar cada uno de ellos y poner el Html en nuestro modulo y el CSS en un archivo con esa misma extensión y subirlo al módulo de Prestashop.

Ya crearé un artículo para poder ayudar a los más neófitos a crear su propio menú en Html. De todas formas recordar que un menú en HTML se hace con las listas desordenadas (Bueno... yo utilizo las desordenadas...)

Una cosa que me dio muchos mareos fue lo de agregar submenúes. Lo aclaro aquí, aunque como ya dije, haré un artículo al respecto.

Por ejemplo si tenemos el siguiente menú:

<div id="cssmenu">
<ul>
  <li>Inicio</li>
  <li>Noticias</li>
  <li>Artículos</li>
  <li>Contacto</li>
</ul>
</div>

Si quiséramos agregarle un submenú a la sección "Noticias" nuestro código quedaría así:

<div id="cssmenu">
 <ul>
      <li>Inicio</li>

      <li>Noticias
            <ul>
                   <li> Locales </li>
                   <li> Regionales </li>
                   <li> Internacionales </li>
             </ul>
     </li>

      <li>Artículos</li>
      <li>Contacto</li>
 </ul>
</div>

Los> ul> determinan el inicio y cierre del submenú. Nótese algo muy importante y es que la etiqueta de cierre del </li> de Noticias va después de cerrar la etiqueta </ul>.

Para agregar los enlaces simplemente se hace así:


 <li><a href="direccion del enlace"> Noticias </a>
            <ul>
                   <li> <a href="direccion del enlace">  Locales  </a> </li>
                   <li> <a href="direccion del enlace"> Regionales </a> </li>
                   <li>  <a href="direccion del enlace">Internacionales </a> </li>
             </ul>
     </li>

Siguiendo esta misma lógica se pueden anidar tantos submenúes como se necesite. La única precaución es ir acomodando el código (con los TAB) de forma que podamos identificar de forma clara cada menú y cada submenú.

06. Insertar un archivo CSS

Ya desactivado el editor WYSIWYG, si colocamos nuestro código del menú, veremos que no funciona, porque un menú en HTML consta, como ya dije, de dos partes. La estructura del menú, con los enlaces y sus respectivos submenúes, y otra parte que corresponde al CSS, que como ya saben es lo que le da los colores, los tamaños, las posiciones, etc.

Para solventar esto el módulo viene con una opción la cual se le puede especificar un archivo CSS, el cual lo usará de la forma que se lo indiquemos.

Para agregar un archivo CSS debemos ir a "Module´s Files" y le damos a "Añadir archivo" y luego le damos a "GUARDAR" :

Debajo de eso nos aparecerá un recuadro que dice "Load Files on HTML Header" con la lista de los archivos css y allí elegiremos el que queremos usar. Podemos tener varios archivos css y elegir el que más nos convenga:

Recordar darle a GUARDAR una vez hayamos seleccionado el archivo CSS que queremos utilizar.

07. Sólo nos queda ver el resultado

Con todo lo realizado sólo nos queda ir a nuestra tienda y ver cómo nos quedó nuestro menú. Recuerden que los tamaños, como el ancho del menú, así como los colores y las alineaciones de los textos están todos definidos en el CSS. Por lo que si necesitan cambiar algo de todo eso, el archivo a modificar es el propio CSS.

En caso de que vean algo mal, lo pueden ir arreglando editando el archivo CSS. Como dije anteriormente yo prepare un html con el codigo del menu y tenia en la misma carpeta, un archivo css con el formateo del menú. Cuando lo tenía listo, subía el CSS y colocaba el codigo HTML y ya está.

08. Agregar otro menú, u otro código HTML, utilizando el mismo módulo

Como ya lo comenté anteriormente, la misma web que nos permite descargar este módulo, tiene una opción que nos permite crear un módulo igual pero con diferente nombre. De esta forma podremos instalarlo como si se tratara de un módulo diferente y podremos cargar otro código HTML y ubicarlo en la posición que necesitemos.

Una cosa a tener en cuenta es que cuando utilicemos archivos CSS, cuando definamos el id del objeto (en nuestro caso el menu) tendremos que tener la precaucion de no asignarle un nombre que ya esté asignados en nuestra plantilla. No suele ocurrir pero puede pasar que le pongamos de nombre menú, por ejemplo, y justamente tengamos una clase css con el mismo nombre.

Para generar otro módulo simplemente le damos a "Generate your module"

Le ponemos un nombre y una pequeña descripción, si lo deseamos, y luego le damos a Generate your module.