Muchas veces creemos, que para poder personalizar un sitio a nuestro gusto hay que instalar, e instalar extensiones de terceros, y jugar con su configuración para poder obtener una personalización acorde a lo que queremos. Pero, ¿quedará exactamente como tu la quieres? No lo creo, por lo que empezaremos una serie de tutoriales sobre los “override” a las distintas extensiones del núcleo de Joomla, para lograr una personalización exacta de lo que queremos lograr y sin necesidad de extensiones adicionales.

En este artículos tocaremos el módulo “mod_menu”, que es el que se encarga de hacer visibles nuestros menús en el frontend. Para hacer una personalización en el, le daremos respuesta a algo que he visto en muchas preguntas de los foros, ¿cómo hacer un dropdown en mi menú?

Para lograr esto, en mi caso utilizare la plantilla “protostar” de Joomla 3. Es decir, haré una instalación de un Joomla 3 instalando los datos de ejemplo, utilizando “protostar” como plantilla del sitio. Cuando accedemos al sitio lo veremos de la siguiente forma:

Antes de insertar los pocos códigos que lleva lograr esto, configuraremos el menú. Nos aseguraremos de tener un enlace, que tenga varios sub-enlaces dentro. Por ejemplo:

Para nuestro elemento padre, en mi caso “Sitios de Ejemplo”, lo crearemos del tipo “Crear una URL”. Luego, en el campo “Enlace” colocamos el símbolo “#”, ya verán más adelante porque esto es así. Los elementos hijos si ya pueden ser de los que ustedes quieran o necesiten.

Una vez que configuramos nuestro menú, y accedemos al front para revisar si surge algún cambio, y en mi caso usando la plantilla protostar, no ocurre nada, la plantilla se sigue viendo de igual forma. Hagamos entonces que pase algo :) .

Primeramente, colocaremos el archivo correspondiente para empezar nuestro override. Para esto vamos a la carpeta “modules” en la raíz de nuestro sitio. Una vez dentro, copiamos el archivo default.php que se encuentra en la carpeta modules->mod_menu -> tmpl .

Ahora vamos a la plantilla de nosotros, que esta en la carpeta “templates” en la raíz de nuestro sitio. Dentro encontraremos la carpeta de la plantilla que estamos usando, que en mi caso es “protostar”. Una vez dentro de la plantilla accedemos a la carpeta “html” (si no la tienes, la creas con ese mismo nombre), para crear una carpeta con el mismo nombre del módulo al que le estamos haciendo el override (en este caso quedaría html - > mod_menu). Ya creada esta carpeta, podemos copiar dentro de html - > mod_menu el archivo que previamente habíamos copiado, en este caso default.php. Y con esto ya queda todo preparado para hacer nuestro override. (es recomendable que en cada carpeta nueva creada en nuestra plantilla colocar un archivo index.html por medidas de seguridad)

-----
Nota: Al crear una carpeta nueva en la raíz de la plantilla, debes actualizar el archivo templateDetails.xml con el fin de que Joomla sepa de la nueva carpeta.
-----

Teniendo nuestro override listo para ser personalizaciones, accedemos al archivo default.php que esta en la carpeta html - > mod_menu . Antes de hacer alguna modificación, veremos primero que queremos lograr. Para este caso queremos lograr un dropdown en nuestro menú de Joomla 3, por lo que haremos uso de bootstrap, ya que Joomla 3 ya lo trae en el núcleo, y la plantilla que en este caso es “protostar”, lo integra dentro. Haciendo este “análisis” tenemos que fijarnos qué estructura tiene un menú con dropdown en bootstrap. Si vamos a la documentación de bootstrap, veremos que la estructura es la siguiente:

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      DropdownLink <b class="caret"></b>
   </a>
 
   <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
   </ul>
 </li>

Esta estructura es a partir del enlace que tiene sub-enlaces dentro. Es decir, tenemos un enlace llamado “DropdownLink” que tiene varios sub-enlaces, “Action”,” Another action”… . Podrán notar también que he resaltado algunas cosas en el código, esto es debido a que esas “cosas” son las necesarias para que nuestro dropdown funcione correctamente. Ahora fijémonos en nuestro sitio, qué estructura tiene en mi menú, el enlace que tiene varios sub-enlaces:

Como pueden ver, no hay nada de lo que remarque en el código anterior, para que funcione correctamente el dropdown. Ya con esto sabemos entonces lo que tenemos que hacer, para lograr nuestra personalización.

Primera Modificación: <li class="dropdown">

Nuestra primera meta, es lograr que nuestra etiqueta <li> tenga una clase “dropdown”. Para ello vamos al archivo html/mod_menu/default.php que abrimos anteriormente. Dentro buscamos donde es que se asignan las clases a las etiquetas <li>. En la línea 68 apróximadamente, nos encontramos esto:

echo '<li'.$class.'>';

Aquí vemos que se concatena al lado de “li” una variable, $class. Esta es la variable que buscamos, ya que contiene las clases que se le asignan a la etiqueta <li> , como bien puedes ver en la imagen anterior donde tiene las clases, item-444, deeper y parent. Ahora, si son más curiosos, se darán cuenta que en la imagen anterior, las clases deeper y parent, no están en las otras etiquetas <li> . ¿Por Qué? esto es porque el elemento padre o enlace que tiene sub-enlaces o un sub-menú dentro, estas clases son colocadas para definir estilos predeterminados. ¿Y que logro sabiendo esto? pues, si no eres muy conocedor del tema “código” esto te da una pista de en donde puedes ubicar tu clase dropdown. Buscando en nuestro archivo default.php la palabra “deeper o parent” encontramos apróximadamente desde la línea 53 a la 61 esto:

if ($item->deeper)
{
   $class .= ' deeper';
}

if ($item->parent)
{
   $class .= ' parent';
}

Aquí vemos, como se le asigna a la variable $class las palabras que conforman las clases deeper y parent. ¡Bingo!, ya con esto es solo poner nuestra palabra dropdown en uno de las dos sentencias para tener nuestra primera modificación hecha. Quedaría de la siguiente forma:

if ($item->deeper)
{
   $class .= ' deeper dropdown ';
}

if ($item->parent)
{
   $class .= ' parent';
}

Segunda Modificación: <ul class="dropdown-menu">

Para nuestra segunda modificación, haremos lo mismo que en el procedimiento anterior. Vemos que clase sale en la imagen anterior, la ubicamos en nuestro archivo default.php que aproximadamente se encuentra en la línea 85 y añadimos la nuestra. En este caso, como verán abajo, he eliminado todas las clases predeterminadas y he puesto únicamente “dropdown-menu”

Antes de modificar

if ($item->deeper)
{
   echo '<ul class="nav-child unstyled small">';
}

Después de modificar

if ($item->deeper)
{
   echo '<ul class="dropdown-menu">';
}

Como ven, hemos hecho dos modificaciones muy simples, y sin necesidad de tener conocimiento altos de nada, solo usando un poco la lógica ;) . Si probamos estos cambios en el frontend nos daremos cuenta, que aún no sucede nada. Claro, aún nos falta una última modificación.

Tercera Modificación:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">

Para lograr esta, ya no podemos utilizar el archivo default.php, porque no nos da la oportunidad de modificar los enlaces ahí. Pero, ustedes conocen a Joomla, siempre tan escalable, siempre con otras alternativas. Para este caso es muy sencillo. Para lograr tener en el enlace que contiene el sub-menú, la clase dropdown-toggle solo tenemos que ir al menú de nosotros, en el Gestor de Menú de la administración. Una vez ahí accedemos al enlace que contiene al sub-menú, que en mi caso es, “Sitios de Ejemplo”.

Una vez dentro, vamos a la pestaña “Opciones avanzadas”, donde veremos el campo “Estilo CSS del enlace”:

Como ven, en el campo esta escrito algo, y no es más que la clase que queremos poner. Ya con esto, Joomla le asigna una clase al enlace del menú, en la etiqueta <a>. ¡Vieron que fácil! Pero tranquilo, que aún nos falta una última cosa en esa etiqueta <a> , y es data-toggle="dropdown".

Para lograr esto, primero haremos algo parecido a lo que hicimos al principio con el archivo default.php. Esta vez, copiamos el archivo default_url.php que esta en la carpeta modules/mod_menu/tmpl, para la carpeta mod_menu que esta dentro de la carpeta “html” de nuestra plantilla. Dentro del archivo default_url.php ubicamos la línea 29, que tiene lo siguiente:

?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php

Esta línea la vamos a modificar, y vamos a añadir lo siguiente:

?><a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php if($item->flink == '#') echo 'data-toggle="dropdown"'; ?> <?php echo $title; ?>><?php echo $linktype; ?> </a><?php

Como pueden apreciar, hemos insertado el código de bootstrap (data-toggle="dropdown") necesario, bajo una condición. La condición lo que evalúa es que si el atributo “href” del enlace tiene como valor el símbolo “#” entonces ubicará este nuevo atributo necesario para el menu dropdown de bootstrap. Con esto le damos respuesta del porqué escogimos el elemento padre del tipo “Crear una URL” y en el campo “Enlace” ubicamos el símbolo “#”.

Ahora que tenemos todas las clases y atributos necesarios, según nos indica boostrap en su estructura de menú desplegable, aún nos queda accionar todo esto, mediante una pequeña línea de jQuery. Esta línea la vamos a ubicar en un archivo .js que tengamos en nuestra plantilla (de no tenerlo, pues lo crean). En mi caso, la plantilla “protostar” tiene en la raíz de la plantilla una carpeta llamada “js” que es donde radican todos los .js utilizados en la plantilla. Dentro de la carpeta, en uno de los archivos, en mi caso escogí template.js, escribo la siguiente línea:

$('.dropdown-toggle').dropdown('toggle')

Se preguntarán de donde salio esto. Pues no lo invente yo, esto bootstrap, te lo explica en su documentación , que sirve para accionar el dropdown via javascript.

Ahora, si volvemos a mirar nuestro sitio nos encontraremos con el buen gusto de que todo esta exactamente como lo queríamos :

Bueno, no exactamente como lo queremos, ya que nos gustaría que por ejemplo, una flecha indicará al usuario visitador que el el menú se despliega con otras opciones:

Para esto, añadiremos a la línea que modificamos anteriormente en el archivo default_url.php, la siguiente condición:

<a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php if($item->flink == '#') echo 'data-toggle="dropdown"'; ?> <?php echo $title; ?>><?php echo $linktype; ?> <?php if($item->flink == '#') echo '<b class="caret"></b>'; ?></a>

Como ven, es la misma condición que utilizamos anteriormente para añadir el atributo data-toggle="dropdown" lo que esta vez si se cumple, añadiremos nuestra flecha, que no es más que una etiqueta <b> con una clase “caret”. Por supuesto, esto bootstrap es el que lo trae, no tuvimos que inventar nada.

Conclusiones

Espero hayan podido hacer este pequeño, pero grandioso override. Más abajo encontrarán adjunto la carpeta “mod_menu” con los 2 archivos que modificamos en el tutorial, para que les sirva de guía. Seguiremos en otros artículos con otras extensiones del núcleo de Joomla. Si desean profundizar en algunos, o si desean hacer algo específico en algunos, no duden de dejar un comentario para realizar su propuesta y así aprender todos.