Google+ Tutorial - módulo leo megamenú para prestashop - Miopiblog

martes, 24 de junio de 2014

Tutorial - módulo leo megamenú para prestashop

Este tutorial en español describe la utilización del módulo leo bootstrap megamenú para prestashop. En esta ocasión no utilizaremos la herramienta de edición en vivo, si no que aprenderemos a crear nuevos elementos del menú y editar ya existentes desde la interfaz por defecto del panel de administración del módulo.

Creación de nuevos elementos en leo megamenú


Para crear un nuevo elemento en el megamenú leo puedes seguir los siguientes pasos:


  1. Accede al panel de administración de tu tienda online. Una vez dentro, dirígete a "módulos" y busca el módulo "leo bootstrap megamenú". Cuando lo tengas localizado, haz click en "configurar".  


  2. A continuación, en el panel de edición del módulo, haz click en "nuevo elemento de menú" (también se puede asignar un widget al menú directamente, pero esa es otra opción). 




  3. Ahora toca rellenar los datos del formulario para crear un nuevo elemento de menú. A continuación describo los campos disponibles y a que hace referencia cada uno de éstos:

    • Título: el título que se verá en el menú para este elemento.
    • Subtítulo: posibilidad de añadir un subtítulo.
    • Parent ID: elemento padre. Aquí indicamos si queremos que el nuevo elemento se sitúe en la raíz del menú o "derive" como "hijo" de otro elemento, es decir, en forma de submenú emergente.
    • Is Active: sirve para activar / desactivar el elemento.
    • Show title: mostrar el título o no.
    • Menu tipe: mediante este campo indicamos que tipo de elemento vamos a crear. "Url" crearía un elemento que, al hacer click sobre el nos conduciría a la url indicada en cuestión. "Categoría" elemento que nos conduce a una página en la que se listan los productos, elementos y subcategorías, de una categoría. "Producto" crea un elemento que nos conduce a un producto al hacer click sobre el texto / imágen del menú. "Manufactura" nos conduciría a una marca de las que hemos especificado previamente en nuestra tienda. "Proveedor" como su nombre indica; a un proveedor especificado por nosotros. "Cms"; a una página cms que le indiquemos. "Html" permite insertar html personalizado en el menú.
    • Target open: mediante este campo indicamos si queremos que el enlace o página que abre este elemento, lo hará en una ventana nueva o no... etc. Hay varias opciones.
    • Menu clase: permite asignar una clase CSS al menú.
    • Icono de menu class: nos permite añadir un icono al elemento del menú. En este link puedes ver las diferentes clases de iconos: http://fontawesome.io/ y encontrarás instrucciones. 
    • Menú de imagen de icono: mediante esta opción podemos cargar una imagen para que se visualice en el nuevo elemento del menú.
    • Group submenú: visualizar todo en mismo nivel. Normalmente lo dejaremos en "no".
    • Column: columnas del elemento nuevo para nuestro menú.


  4. Una vez que lo tenemos, hacemos click en "guardar" y listo, ya hemos creado un nuevo elemento para el megamenú.
Aquí te dejo un vídeo que he elaborado, en el cual sigo el proceso explicado en este ejemplo:




Editar elementos del megamenú leo


Editar elementos del megamenú es sumamente fácil e intuitivo, como el resto del proceso para la configuración de dicho módulo. Estando dentro del panel de edición y configuración del módulo, tan solo hay que hacer click con el cursor del ratón sobre el icono en forma de lápiz del elemento de nuestro megamenú que queremos editar.




Una vez hecho esto, accederemos al panel de opciones del elemento descrito más arriba, desde el cual podemos modificar la configuración del mismo.

También es posible modificar las posiciones de los elementos del menú dinámicamente. Para hacerlo, tan solo "agarra" el elemento que quieres cambiar de posición y arrástralo hasta la posición deseada. Cuando lo tengas, suelta y haz click en "Actualizar posiciones".




Al igual que el módulo permite crear elementos siguiendo estos pasos, es posible crear visualmente nuevos elementos y modificar el megamenú mediante la herramienta "de edición en vivo". El proceso es sumamente sencillo.

Si precisas más información puedes echar un vistazo a la documentación original del módulo, aunque está en inglés.

Si has llegado hasta aquí puede que sea porque utilizas una plantilla de leo theme para prestashop. Si es así, puede que resulte de tu interés echar un vistazo a este tutorial en el que explico como usar el módulo de capa deslizante de leo (slider), utilizado, por ejemplo en la plantilla leomobile.

¿Aun no tienes community para tu empresa o tienda online? echa una ojeada a este otro artículo, puede que te haga falta contratar a uno.


No te olvides de seguirme en las redes sociales... estoy en todas! si no es así avísame :-)

21 comentarios :

  1. Buenas!!
    Gracias por tu aporte, pero resulta que estoy atascado en una cosiya, que creo que no comentas, en mi menu necesito enlazar a una url externa a mi web p.e google.com

    Si seleciono enlace de menu -> URL
    y en la URL escribo http://www.google.com

    Me pinta un enlace al estilo de
    http://www.midominio.com/index.php?controller=http://www.google.com

    Alguna idea o sugerencia??
    Gracias de antemano

    ResponderEliminar
  2. Hola Roberto, el sistema está preparado para hacer eso automáticamente. Mira, echa un vistazo a esta captura:

    http://tardis1.tinygrab.com/grabs/6669063053386161420d0159b733da920d18777399.png

    Creo que lo mejor será que los desarrolladores de la plantilla nos echen un cable, ya hay una consulta abierta al respecto: http://www.leotheme.com/support/forum/leo-bootstrap-megamenu-external-url.html

    Un saludo!

    ResponderEliminar
  3. Vi la captura que me mandas en la documentacion de la plantilla, pero... claro aporta mas bien poco, ellos se supone que dan la posibilidad de hacerlo, pero no funciona.
    Alguna forma de aprobechar esos Controller, para redirigirlos a la pagina externa?
    o alguna otra idea? ya que en la consulta abierta no contestan...

    Gracias de nuevo

    ResponderEliminar
  4. Hola otra vez Roberto.

    He contactado con ellos y se ofrecen a poner a nuestro servicio lo que necesitamos, si les paso los datos de "login" al backend de la tienda, pero no me explican como hacerlo... voy a probar a ver si me lo quieren aclarar y lo publico, en caso de que no les sea posible explicarnos como hacerlo, creo que lo mejor sería que contactes tu directamente con ellos para que te ayuden.

    Saludos!

    ResponderEliminar
  5. De momento lo he trampeado cambiando la URL por JS, a ver si tenemos suerte y te dicen algo, te seguire de cerca!!

    La verdad es que no entiendo por que tanto secretismo... si lo unico que ganan es buscarse problemas y dejar descontentos a sus clientes
    Muchas gracias por las molestias.

    ResponderEliminar
  6. Les he pasado el enlace a este artículo por si ellos mismos quieren responder aquí, ganarían bastante respecto a "soporte en español" pues este blog es utilizado como recurso por muchas personas... en fin... Si me comentan algo no dudes en que lo compartiré aquí. Por cierto, si quieres o te viene bien, puedes explicar como lo has hecho con javascript por si a alguien le sirve...

    La verdad es que mis conocimientos en programación no son demasiado "avanzados" aunque me muevo bien por dicho campo.

    Saludos y gracias por participar con tus comentarios :-)

    ResponderEliminar
  7. Hola, acabo de actualizar prestashop al 1.6 y he puesto la plantilla leo cosmetics, ya la tengo funcionando pero me acabo de dar cuenta que el modulo leo bootstrap menu no funciona bien en la versión movil (solo en el movil, en el ordenador va bien). Le das a cualquier categoria y te abre a las subcategorias, pero le das a una cualquiera y no hace nada, no va a los enlaces (configurados en el leo managewidets). Pero si le das a una categoria que no tiene subcategorias entonces si funciona bien. A vosotros os funciona bien? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, te recomiendo que contactes con soporte del menú, debería funcionar bien. Esta es una tienda online en la que se utiliza ese menú y funciona perfectamente: http://informagina.com/

      Eliminar
  8. Hola Antonio, ya tengo la solución al problema del megamenu en la versión móvil, la quiero compartir aqui por si acaso le pasase a alguien más.

    En modulos->Leo Bootstrap Megamenu, hay a la izquierda una opción con un despegable "Show Cavas si o no", lo tenía puesto en "sí" (que es como tiene que estar) lo cambié a "no" guardé los cambios, lo volví a poner en "si", volví a guardar y ya funciona. Un saludo :)

    ResponderEliminar
    Respuestas
    1. Muchas gracias por compartir. Entonces si funciona bien todo fenomenal. De momento es uno de los menús que más me han gustado dentro de prestashop. Un saludo y gracias de nuevo :)

      Eliminar
  9. Hola! Por si alguien me puede ayudar... El modulo me funciona bien, me falla solo en la version movil cuando cargo una subcategoria, no se desplega el menu en la izquierda, lo hace en la propia pantalla sin formato ni estilo, alguna idea de donde mirar? Estoy un poco verde en la version movil... Muchas gracias!!

    ResponderEliminar
  10. Perdon el fallo me ocurre tambien en las categorias de primer nivel, gracias

    ResponderEliminar
  11. Buenas Noches,

    Muchas gracias por el artículo, me ha servido de gran ayuda. Aún así tengo una duda con respecto al Leo Bootstrap Megamenu. Se trata de los Widgets. En mi caso tengo Widgets asignados a los elementos principales del menú. Por ejemplo, dentro de la CATEGORIA HOMBRE, en el desplegable tengo 3 Widgts asignados: Menú - Sleepear, Menú - Destacados, Menú - Conócenos Hombre. El problema que tengo es que soy incapaz de Hacer que aparezca dentro de ese desplegable el 4 Widget que sería Menú - Complementos. Lo he creado pero no me aparece. Y sin embargo en la categoría mujer me aparecen 4 widgets.

    También te digo que venían creados ya.

    Podrías decirme como se insertan los widgents en este menú.

    Muchas gracias de ante mano
    Un saludo
    Be

    ResponderEliminar
  12. Buenos Días,

    Tengo varios problemas como el Leo Boostrap Megamenu. Uno de ellos es que lo Widghets que tiene asociados parece que son limitados. Porque dentro de la Categoria de Menú-Mujer me deja tener 4 Widghets asociados y dentro de la categoría Menú - Hombre solo me deja 3. Además dentro de la Categoría Mujer al probar, elimine uno de ellos y ahora me sale: No hay se encuentra plantilla para el módulo leobootstramenu. He intentado volver a crear y no soy capaz.
    ¿Puedes ayudarme? Gracias, Belén

    ResponderEliminar
  13. Hola Belén, pásame el enlace a tu web a ver si te puedo ayudar.

    ResponderEliminar
  14. Yo me he instalado el theme leo clothes y el menu Boostrap Megamenu me da errores no puedo añadir ni cambiar nada me sale una pagina en blanco con el siguiente mensaje:
    [PrestaShop] Fatal error in module Helper:
    Call to undefined method Language::getIDs()

    esto le pasa a alguien? necesito ayuda.

    ResponderEliminar
    Respuestas
    1. Yo lo solucione reemplazando el archivo Language.php que se encuentra en la carpeta /classes por otro de una versión mas reciente de PS

      Eliminar
  15. Hola!

    Intente hacer la categoria +info para las cms y solo me dejaba elegir una y querria poner un menu con tres, como debo hacerlo?

    mil gracias

    ResponderEliminar
  16. Buenas tardes, en mi web tengo una categoria y si pasas el raton por encima se despliega la lista con las 34 marcas, el caso es que salen las 34 marcas en una sola fila hacia abajo. ¿Cómo puedo hacer para que aparezcan las 34 marcas en 2 filas?

    Gracias,saludos

    ResponderEliminar
    Respuestas
    1. Necesitas modificar los CSS, deberas poner al UL el tamaño que quieras tengan las 2 filas, y los LI el tamaño de cada fila.
      Quizas debas añadir mas cosas, editar la plantilla, etc. pero sin ver el HTML ni el CSS no te puedo decir

      Eliminar
  17. Lo que me parece increible es que se llame MEGAMENU y no tenga la posibilidad de que el "MENU" se visible siempre pegándose en la parte superior, que sea sticky...
    Siempre hay carencias, podrían currárselo un poco que tampoco es tan difícil ponerlo.

    ResponderEliminar

Seguidores (seguir blog)

Me siguen en google plus: