El Modelo-Vista-Controlador (MVC): una de las grandes maravillas de la programación. Y es a esta maravilla a la que le debemos la magia de los Overrides en Joomla! que en la versión 3.2 nos sorprende con el gestor de plantilla que incorpora una forma fácil y divertida de crear presentaciones alternativas para nuestros módulos y componentes.

A partir de hoy y mientras mis dedos y cerebro funcionen, presentaré cada mes un override a algún módulo o componente de Joomla 3.2+.

Desde que se adoptó el modelo vista controlador en Joomla!, siempre me ha gustado hacer overrides a mis módulos y componentes para ponerles máscaras distintas y dejar la vista a mi gusto. Y claro, Joomla! nunca deja de sorprenderme. La forma de realizar los Overrides ahora es tan sencilla que resulta muy divertido.

Anteriormente el proceso de override (un tanto tedioso debo decir)  se resumía en: entrar por ftp a las carpetas de tu site, copiar el archivo views/tmp/vista.php de tu componente o módulo en la carpeta html de tu template y editar el código. Bueno, pues es casi lo mismo… solo que ahora todo ese proceso se hace en un par de clics desde el amable backend de joomla! 3.2+

Además, nuestros módulos pueden gozar de muchas presentaciones alternativas que podemos aplicar en el momento en que queramos.

En esta primera entrega te explicaré como realizar override en los módulos y como puedes agregar presentaciones alternativas.

Doy por hecho que tienes conocimientos básicos de php, html y css y que cuentas con una instalación de joomla! 3.2+ trabajando al 100%. 

Comencemos

Todo ese asunto de copiar los archivos del core a la carpeta html de tu template para después modificarlo, se arregla ahora con unos cuantos clics. Para este ejemplo trabajaré con el módulo mod_custom (HTML personalizado).

1. Lo primero que haremos, precisamente,  es crear el override. Vamos al gestor de plantillas (Menú extensiones->Gestor de plantillas) y seleccionamos la opción “Plantillas” en la columna de la izquierda.

2. Seleccionamos nuestra plantilla, en nuestro caso “protostar” , haciendo clic en “Detalles y archivos de la plantilla Protostar”. 

3. A continuación se muestran las carpetas y los archivos de nuestra plantilla. Ubica la pestaña “Create Overrides” y selecciona el “mod_custom” 

Eso es todo. ¡Ahora el override está creado! Así de fácil. Lo que hizo Joomla! fue exactamente lo mismo que hacías manualmente antes: copiar los archivos de la vista del core de Joomla, en la carpeta “html” de tu template. Ahora solo queda examinar las carpetas en la pestaña “editor” (a) , ubicar el archivo “default.php” (b) del módulo, editarlo a placer en el panel de la derecha (c) y guardar los cambios:

Presentaciones alternativas

Ahora viene lo divertido. Vamos a agregar una “presentación alternativa” a nuestro módulo. Damos clic en el botón “New file” y en la ventana que aparece vamos a Seleccionar la carpeta deseada, en nuestro caso “html/mod_custom” (a), seleccionamos el tipo de archivo “php” (b), escribimos el nombre que deseemos darle, por ejemplo “flotante” (c) y damos clic en el botón “create” (d):

¡Listo! Si exploras la carpeta, verás que tienes dos archivos: “default.php” y “flotante.php”. Ahora te toca copiar el contenido del archivo “default.php” en “flotante.php” y editar individualmente cada archivo según lo que quieras que muestre cada presentación alternativa.

Este ejemplo simple lo podríamos hacer igual con solo agregar una clase en el css y llamarla al dar de alta el módulo. Es mejor utilizar las presentaciones alternativas cuando realmente se pretende cambiar el layout del módulo en cuestión. Por ejemplo, si tienes un mod_menu que quieres que se visualice con la etiqueta <nav>, y quieres otro con <table> y otro con <ul>. En ese caso sí se está cambiando el layout, pero si solo se va a tocar el estilo (css), no vale la pena utilizar una vista alternativa. En este caso, lo haremos a modo de ejemplo para entender cómo funciona.

Lo mejor es que puedes agregar la cantidad de presentaciones que quieras y solo tendrás que indicar la que quieres mostrar al momento de dar de alta tu módulo en la pestaña “avanzadas”:

El tipo de módulo “custom” puede contener cualquier texto e imágenes: agreguemos el texto “este módulo es flotante” y una imagen, la que sea. 

Ahora el Override de nuestra presentación alternativa

Regresa al gestor de plantillas, selecciona “plantillas” y elige la plantilla protostar. Edita el archivo flotante.php  para que quede de la siguiente forma: 

Lo único que resta es agregar el estilo css. Edita el archivo css del template y agrega la classe “flotar” y ponle los estilos necesarios: 

Una vez terminado esto, el módulo con la presentación alternativa “flotante” debería mostrar algo así: 

Mejorándolo un poco:

Agreguemos a nuestro override un poquitín de javascript y de paso hacemos que haya valido la pena hacer una presentación alternativa para que el módulo se oculte cuando el usuario dé clic sobre él. Ideal para avisos al iniciar la página:

¡Perfecto! Ahora solo falta que tú le agregues un poco de sal y pimienta para darle tu propio sazón. Es un ejemplo simple. Pero sirve mucho de ejemplo para lo que vamos a ir presentando mes a mes en esta sección.  Espero tus comentarios y tus ideas para aprovechar al máximo esta genialidad de Joomla!

Hasta la próxima.