Tutorial crear módulo joomla 3

Crear un módulo en Joomla 3 paso a paso

30 julio, 2015 24 comentarios

Ya estás familiarizado con la creación de sitios web en Joomla y has trabajado con los módulos que lo componen. Pero ahora necesitas dar un paso más y crear una web personalizada, que incluya un módulo nuevo para este CMS ¿Cómo desarrollar un módulo desde cero? Con este tutorial paso a paso aprenderás a comprender el funcionamiento de los módulos en Joomla creando un módulo que muestre los artículos de una categoría a modo de carrusel.

En el artículo del mes anterior, al que puedes acceder siguiendo este enlace, se explicó cómo personalizar un sitio web en Joomla modificando un módulo existente (el mod_menu). En concreto, el artículo comentaba los pasos a seguir para sobrescribir la vista del módulo. Este mes profundizamos en el manejo de los módulos, pero desde otra perspectiva. No modificaremos uno existente, sino que crearemos uno nuevo. La razón es sencilla: en muchas ocasiones los clientes no desean una web con prestaciones estándar y no es posible encontrar los módulos que se adaptan a sus exigencias, por lo que resulta interesante desarrollarlo nosotros mismos.

Crear un carrusel de noticias

El hilo conductor de este tutorial será la creación de un módulo que muestre las imágenes de los artículos de una categoría de forma rotativa. Es lo que comúnmente se conoce como carrusel de imágenes.

El carrusel de imágenes es una solución elegante para webs con mucha información en su página de inicio ya que permite optimizar el espacio mostrando información de manera rotativa en una determinada franja del sitio web.

Carrusel con imágenes

Carrusel con imagen de artículos

Consideraciones previas

Vamos a trabajar con la versión de Joomla 3.1 y la plantilla por defecto beez3. El módulo que vamos a crear, se añadirá en la posición position-12.
Debido al tamaño de esa posición en la plantilla beez3, haremos que el carrusel muestre dos artículos por página.

Para conseguir el carrusel rotativo, se hará uso de bxSlider. Puesto que el principal objetivo de esta guía es la construcción de un módulo para Joomla, no entraremos en detalle respecto a la explicación del código jQuery o la configuración de bxSlider, que podréis consultar en su web.

Tal y como explicamos en nuestro anterior artículo, la estructura de ficheros de un módulo en Joomla es la mostrada en la siguiente imagen. Para aprender más sobre ellos, recomendamos leer el artículo comentado anteriormente.

Funcionamiento de un módulo Joomla

Funcionamiento de un módulo

 

Estructura del módulo

El módulo que vamos a construir lo llamaremos mod_carousel, por lo que vamos a construir una carpeta, que posteriormente comprimiremos e instalaremos, con la estructura de archivos y carpetas:

Estructura de carpetas y ficheros

Estructura de carpetas y ficheros

Tal y como se aprecia, los ficheros que realmente compondrán un módulo, están recuadrados en la imagen anterior.
La carpeta css contendrá un fichero para aplicar estilos específicos a nuestro módulo.
La carpeta lib contendrá los ficheros necesarios para que bxSlider funcione en nuestro módulo. Estos archivos se podrán descargar desde la web oficial de bxSlider.

mod_carousel.xml

El fichero xml de un módulo contiene una serie de etiquetas que indican:

  • Información sobre el módulo: name, author, description…
  • Estructura de ficheros y carpetas lo componen: files, folder, languages…
  • Qué parámetros del módulo se pueden configurar: fields…

Por ejemplo, algunos de los parámetros a configurar cuando el módulo esté instalado, serán:

  • De qué categoría queremos mostrar los artículos.
  • Si se quiere mostrar todos los artículos de esa categoría o no.
  • En caso de no querer mostrar todos los artículos, el número de artículos a mostrar.
  • El orden en el que se mostrarán los artículos.
Formulario de configuración del módulo

Formulario de configuración

La información en el fichero será la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="1.0" client="site" method="upgrade">
    BLOQUE 1

    BLOQUE 2

    BLOQUE 3
</extension>

 

Bloque 1

Sustituimos BLOQUE 1 por:

<name>Artículos destacados - Carousel</name>
<author>Kadum web</author>
<creationDate>Mayo 2015</creationDate>
<copyright>Copyright (C)</copyright>
<license>GNU/GPL  </license>
<authorEmail>jose@kadum.es</authorEmail>
<authorUrl>www.kadum.es</authorUrl>
<version>1.0.0</version>
<description>Mostrar un carrusel con las imágenes de
los artículos de una categoría</description>

Donde se proporciona información como el nombre del módulo, autor o descripción.

 

Bloque 2

Sustituimos BLOQUE 2 por:

<files>
    <filename module="mod_carousel">mod_carousel.php</filename>
    <folder>tmpl</folder>
    <folder>lib</folder>
    <folder>css</folder>
    <filename>helper.php</filename>
    <filename>index.html</filename>
    <filename>mod_carousel.xml</filename>
</files>
<languages>
    <language tag="en-GB">en-GB.mod_carousel.ini</language>
    <language tag="es-ES">es-ES.mod_carousel.ini</language>
</languages>

Donde se indican los archivos y carpetas necesarios para el funcionamiento del módulo.

Los archivos de idioma indicados entre las etiquetas <languages>, durante el proceso de instalación se copiarán automáticamente a la carpeta languages de Joomla.

Bloque 3

Sustituimos BLOQUE 3 por:

<config>
    <fields name="params">
        <fieldset name="basic">
            <field
                name="categoria"
                type="category"
                extension="com_content"
                label="MOD_CAROUSEL_FIELD_CATEGORIA_LABEL"
                description="MOD_CAROUSEL_FIELD_CATEGORIA_DESC" />
            
            <field
                name="todos"
                type="radio"
                class="btn-group"
                default="0"
                label="MOD_CAROUSEL_FIELD_TODOS_LABEL"
                description="MOD_CAROUSEL_FIELD_TODOS_DESC">
                <option
                    value="0">JNO</option>
                <option
                    value="1">JYES</option>
            </field>
            
            <field
                name="total"
                type="integer"
                first="2"
                last="12"
                step="1"
                default="3"
                label="MOD_CAROUSEL_FIELD_TOTAL_LABEL"
                description="MOD_CAROUSEL_FIELD_TOTAL_DESC" />
            
            <field
                name="orden"
                type="list"
                default="0"
                label="MOD_CAROUSEL_FIELD_ORDEN_LABEL"
                description="MOD_CAROUSEL_FIELD_ORDEN_DESC">
                <option
                    value="a.title">MOD_CAROUSEL_VALUE_TITLE</option>
                <option
                    value="a.id">MOD_CAROUSEL_VALUE_ID</option>
                <option
                    value="a.ordering">MOD_CAROUSEL_VALUE_ORDEN</option>
            </field>

        </fieldset>
        <fieldset
            name="advanced">
            <field
                name="moduleclass_sfx"
                type="textarea" rows="3"
                label="COM_MODULES_FIELD_MODULECLASS_SFX_LABEL"
                description="COM_MODULES_FIELD_MODULECLASS_SFX_DESC" />
        </fieldset>
    </fields>
</config>

Donde:

<fields name="params">

Nos indica que la información del formulario, se almacenará en el campo params de la tabla #__modules.

<fieldset name="basic">

Indica en qué pestaña del formulario de configuración se mostrarán los campos.

<field
    name="categoria"
    type="category"
    extension="com_content"
    label="MOD_CAROUSEL_FIELD_CATEGORIA_LABEL"
    description="MOD_CAROUSEL_FIELD_CATEGORIA_DESC" />

Genera una lista desplegable (con name categoria) de las categorías que tengamos definidas en Joomla. También crea una etiqueta cuyo texto se obtiene del fichero .ini

 

Lista de categorías

Lista de categorías

<field
    name="todos"
    type="radio"
    class="btn-group"
    default="0"
    label="MOD_CAROUSEL_FIELD_TODOS_LABEL"
    description="MOD_CAROUSEL_FIELD_TODOS_DESC">
    <option
        value="0">JNO</option>
    <option
        value="1">JYES</option>
</field>

Genera dos input type radio (con name todos). Y su etiqueta correspondiente.

Tipo radio

Tipo radio

<field
    name="total"
    type="integer"
    first="2"
    last="12"
    step="1"
    default="3"
    label="MOD_CAROUSEL_FIELD_TOTAL_LABEL"
    description="MOD_CAROUSEL_FIELD_TOTAL_DESC" />

Genera una lista desplegable (con name total) de números enteros comprendidos entre el 2 y 12. El valor por defecto es el 3. También, genera su etiqueta.

Lista desplegable de enteros

Lista desplegable de enteros

<field
    name="orden"
    type="list"
    default="0"
    label="MOD_CAROUSEL_FIELD_ORDEN_LABEL"
    description="MOD_CAROUSEL_FIELD_ORDEN_DESC">
    <option
        value="a.title">MOD_CAROUSEL_VALUE_TITLE</option>
    <option
        value="a.id">MOD_CAROUSEL_VALUE_ID</option>
    <option
        value="a.ordering">MOD_CAROUSEL_VALUE_ORDEN</option>
</field>

Genera una lista desplegable (con name orden) donde especificamos 3 option. El texto para la etiqueta y las opciones de la lista, se obtienen del fichero .ini

Lista desplegable personalizada

Lista desplegable personalizada

Podemos ver la relación de todos los tipos de campos en esta dirección.

Cuando guardemos el módulo, los campos configurados pasarán a la base de datos:

modulo-joomla-form-bd

Flujo formulario a tabla

 

mod_carousel.php

Este fichero se llama igual que la carpeta contenedora del módulo. Se podría considerar el controlador del módulo.
Cuando el módulo se ejecuta en la parte pública de Joomla, éste fichero es el primero en entrar en funcionamiento.
En nuestro caso, se encarga de obtener la lista de noticias a mostrar mediante la invocación del método getList de la clase modCarouseHelper. El método recibe como parámetro de entrada el objeto params.
Posteriormente, carga la vista por defecto del módulo, la cual, podrá mostrar la lista de noticias obtenidas.

Su código es el siguiente:

<?php
defined('_JEXEC') or die;

//Carga el fichero helper.php
require_once __DIR__ . '/helper.php';

//Obtiene la lista de noticias a mostrar
$list = modCarouseHelper::getList($params);

//Carga la vista por defecto del módulo
require JModuleHelper::getLayoutPath('mod_carousel');

helper.php

Este fichero contiene la clase modCarouseHelper con el método getList($params) que se invoca desde el fichero mod_carousel.php. Se podría considerar el modelo del módulo.
El método devuelve un array de objetos. Cada objeto representa un artículo que se mostrará en la vista.

La información sobre de qué categoría hay que obtener los artículos, número de artículos a mostrar u ordenación, están almacenados en la tabla #__modules, en el campo params. El parámetro de entrada $params contiene esos datos de la tabla. Para obtener cada uno de ellos, se emplea la estructura:

$params->get('campo');
joomla-modulo-bd-params

Flujo tabla a objeto

La implementación de getList podría llevarse a cabo mediante una consulta sobre las tablas #__content y #__categories para obtener los artículos deseados. Sin embargo, nos parece más elegante emplear el modelo de Articles para tal fin. En próximos artículos, trataremos cómo lanzar consultas sobre la base de datos.

El código del modelo será:

<?php
defined('_JEXEC') or die;
//Añadir clases de apoyo
$com_path = JPATH_SITE.'/components/com_content/';
require_once $com_path.'router.php';
require_once $com_path.'helpers/route.php';
JModelLegacy::addIncludePath($com_path . '/models', 'ContentModel');

class modCarouseHelper{
 public static function getList(&$params){
   // Obtener una instancia del modelo Articles
   $articles     = JModelLegacy::getInstance('Articles', 'ContentModel', array('ignore_request' => true));

   // Establecer los parámetros de la aplicación
   $app             = JFactory::getApplication();
   $appParams     = $app->getParams();
   $articles->setState('params', $appParams);

   // Filtrar por categoría
   $articles->setState('filter.category_id', (int) $params->get('categoria'));

   // Si no hay que mostrar todos los artículos
   if(!$params->get('todos')){
      // Limitar el número de resultados a mostrar
      $articles->setState('list.start', 0);
      $articles->setState('list.limit', (int) $params->get('total'));
   }
   // Filtrar por publicados
   $articles->setState('filter.published', 1);

   // Access filter
   $access     = !JComponentHelper::getParams('com_content')->get('show_noauth');
   $authorised = JAccess::getAuthorisedViewLevels(JFactory::getUser()->get('id'));
   $articles->setState('filter.access', $access);

   // Ordenar
   $articles->setState('list.ordering', $params->get('orden', 'a.ordering'));

   // Obtener los artículos mediante el modelo
   $items         = $articles->getItems();

   // Para cada artículo
   foreach ($items as &$item){
      //Obtener la ruta
      $item->slug     = $item->id.':'.$item->alias;
      $item->catslug = $item->catid .':'.$item->category_alias;
      $item->link     = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catslug));
      //Obtener la imagen principal
      $item->imagen    = json_decode($item->images)->image_intro;
   }

   return $items;    
 }
}

Puesto que Joomla emplea el patrón Singleton, en lugar de construir un objeto del modelo Articles, se hace uso de JModelLegacy::getInstance para obtener el objeto existente:

$articles  = JModelLegacy::getInstance('Articles', 'ContentModel', array('ignore_request' => true));

Al modelo $articles se le añaden filtros mediante el método setState(‘propiedad’,valor) para obtener los artículos que nos interesan.

$articles->setState('params', $appParams);
$articles->setState('filter.category_id', $params->get('categoria'));
$articles->setState('list.start', 0);
$articles->setState('list.limit', $params->get('total'));
$articles->setState('filter.published', 1);
$articles->setState('list.ordering', $params->get('orden', 'a.ordering'));

Una vez establecidos los diversos parámetros, se obtienen los artículos que cumplen tales restricciones:

$items         = $articles->getItems();

En el bucle while recorremos cada uno de los items. El empleo del ampersan (&$item) nos permite que los atributos (link e imagen) que se añaden en el bucle, se puedan utilizar desde la vista.

foreach ($items as &$item){...}

Para la construcción del enlace de cada artículo, se necesita la combinación (slug) id:alias tanto del artículo como de la categoría. Empleamos la combinación de dos métodos estáticos para la obtención de la url:

JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catslug));

Más info en sobre la generación de url en este enlace.

Para la obtención de la imagen, se extrae el valor de image_intro del atributo images. Puesto que este atributo tiene la información en JSON, se emplea: json_decode.

json_decode($item->images)->image_intro;

Por último, se devuelve $items. El controlador (mod_carousel.php) los pasa a la vista.

 

default.php

La vista muestra los datos obtenidos en el fichero helper.
Lo primero que haremos, será añadir los ficheros css y js que permitan a bxslider realizar su funcionalidad. Además, se añadirá un fichero css propio donde se dan estilos propios para nuestra plantilla.
Posteriormente, lanzamos configuramos los parámetros del método bxslider sobre una capa identificada como slider1
A continuación, del array de objetos $list obtendremos el título, enlace e imagen de cada artículo y los añadiremos dentro de la capa .slider1

<?php
defined('_JEXEC') or die;

//Carga de ficheros .CSS y JS
$doc = JFactory::getDocument();
$doc->addStyleSheet(JURI::base(true).'/modules/mod_carousel/lib/jquery.bxslider.css');
$doc->addScript(JURI::base(true).'/modules/mod_carousel/lib/jquery.bxslider.min.js', 'text/javascript');
$doc->addStyleSheet(JURI::base(true).'/modules/mod_carousel/css/mod_carousel.css');

//Inicializar bxSlider sobre .slider1
//Para configurar más opciones, visitar http://bxslider.com/options
$doc->addScriptDeclaration("
    jQuery(window).load(function(){
        jQuery('.slider1').bxSlider({
            slideWidth: 300,
            minSlides: 1,
            maxSlides: 2,
            slideMargin: 20,
            auto:true,
            autoHover:true,
            controls:true,
            autoControls: false,
        });
    });
");
?>

<div class="tilesgroup<?php echo '' ?>">
    <div class="slider1">
    <?php
    foreach($list as $item){
        echo '<div class="slide">'.
               '<h2><a href="'.$item->link.'">'.$item->title.'</a></h2>'.
               '<a href="'.$item->link.'"><img src="'.$item->imagen.'" /></a>'.
             '</div>';
    }
    ?>
    </div>
</div>

 

en-GB.mod_carousel.ini

Este fichero tan sólo contiene la definición de las variables de idioma empleadas en el fichero XML. El nombre del fichero sigue la estructura:
código_del_idioma.nombre_del_módulo.ini
en-GB.mod_carousel.ini

Al instalarse el módulo, se copia automáticamente en la carpeta language/[codigo_del_idioma]/

Su código es el siguiente:

MOD_CAROUSEL="Articulos Destacados Carrousel"
MOD_CAROUSEL_XML_DESCRIPTION="Descripcion del modulo"
MOD_CAROUSEL_FIELD_CATEGORIA_LABEL="Categoria"
MOD_CAROUSEL_FIELD_CATEGORIA_DESC="Mostrar los artículos de la categoria seleccionada"
MOD_CAROUSEL_FIELD_TOTAL_LABEL="Total"
MOD_CAROUSEL_FIELD_TOTAL_DESC="Indicar el numero de articulos a mostrar"
MOD_CAROUSEL_FIELD_TODOS_LABEL="Mostrar todos"
MOD_CAROUSEL_FIELD_TODOS_DESC="Mostrar todos los artículos de una categoria"
JNO="No"
JYES="Si"
MOD_CAROUSEL_FIELD_ORDEN_LABEL="Ordenar"
MOD_CAROUSEL_FIELD_ORDEN_DESC="Mostrar los articulos ordenados segun"
MOD_CAROUSEL_VALUE_TITLE="Titulo"
MOD_CAROUSEL_VALUE_ID="Id"
MOD_CAROUSEL_VALUE_ORDEN="Orden en su categoria"

 

Estilos y jQuery

El fichero mod_carousel.css se encuentra dentro de la carpeta css, no entramos a explicar en detalle los estilos debido a su simplicidad y que seguramente, para adaptarlos a otra plantilla, necesitaréis vuestros propios estilos.

/* Esconder flechas next y prev */
.bx-next, .bx-prev{ display:none; }
/* Mostrar flechas next y prev con hover */
.bx-wrapper:hover .bx-next, .bx-wrapper:hover .bx-prev{ display:block; }
/* Cambiar círculos centros de paginación por cuadrados */
.bx-wrapper .bx-pager{text-align:left;}
.bx-wrapper .bx-pager.bx-default-pager a {border-radius:0 !important;}
/* Cambiar estilos del h2 */
.slide h2{line-height:25px; margin:0; padding:0 0 5px 0; text-align:center; border-bottom:0;}
.slide h2 a, .slide h2 a:hover{text-decoration:none; background:none; color:#095197}

Para profundizar en los ficheros contenidos en la carpeta lib os remitimos a la web oficial de bxslider.

Instalación

Por último, generamos un fichero .zip con la estructura de ficheros comentada con anterioridad y ya lo tenemos listo para añadirlo mediante el Extension Manager de joomla.

Una  vez instalado, accede al gestor de módulos para habilitarlo, añadirlo a la posición position-12 del template beez3 y configurarlo para que obtenga los artículos de la categoría deseada.

Recuerda, que deberás tener creados artículos con imagen asociada dentro de dicha categoría.

 

Conclusiones

Tras poner en práctica este tutorial, la creación personalizada de sitios web con Joomla será mucho más fácil. Hemos de hacer hincapié a la hora de crear un módulo en Joomla 3 en el flujo generado entre los ficheros (mod_carousel.php, helper.php y default.php) junto con la definición del formulario de configuración (mod_carousel.xml). De esa forma, podremos llevar a cabo la generación del módulo que mejor se adapte a nuestras necesidades.
Podrás descargar el fichero comprimido con la estructura y archivos descritos. Para ello hazte seguidor de nuestro Facebook pulsando sobre la parte izquierda (el icono de la F) del siguiente botón (Si no ves el botón de Facebook, revisa las extensiones o complementos tipo AddBlock Plus del navegador)


Por favor, pulsa el botón Me gusta de facebook para hacerte seguidor de KadumWeb y poder acceder a los archivos descargables

Gracias por hacerte seguidor, pulsa aquí para acceder a los archivos descargables. Descomprime el archivo con la clave: kadumcarousel




Volver al blog

Comentarios (24)

Manu dijo:

Hola, muchas gracias por el tutorial. Esta genial, me ha ayudado mucho a entender el funcionamiento de un modulo.
Una cosa, he creado varios articulos y el carrusel aparece pero las imagenes no. Aparece el simbolo de enlace de imagen roto. Sabes a que puede ser debido esto o como arreglarlo. Saludos.

Manu dijo:

Solucionado

    Jose dijo:

    Muchas gracias por tu comentario, Manu. Me alegra saber que te ha servido de ayuda y que has podido solucionar por ti mismo tu incidencia.

Carlos dijo:

Gracias por una gran aportación

Jose dijo:

A ti, por hacérnoslo saber :)

Ricardo dijo:

Muchas gracias, me estoy desburrando en este ámbito, creo que dados algunos problemas de seguridad que esta teniendo Word Press, Joomla volvera un poco mas fuerte. Asi que bienvenida esta información. Gracias

    Laura dijo:

    Hola, Ricardo:
    Gracias por tu comentario. Tanto Joomla como WordPress hacen que crear una website sea algo sencillo y rápido. Y además, ambos son open-source.
    Desde Kadum desarrollo web, creemos que WordPress es la mejor opción para webs de pequeño tamaño y blogs. Es, quizás, el más sencillo para principiantes.
    Joomla es un CMS intermedio entre Drupal y WordPress y creemos que es la mejor solución para sitios web de tamaño intermedio, enfocados a social networking y a e-commerce. La popularidad de Joomla ha crecido en los últimos años y creemos que ha encontrado un gran mercado entre la gente que está preparada para algo más potente que WordPress pero más fácil de manejar que Drupal.
    Por ello, te animamos desde aquí a que pruebes a crear sitios webs con este CMS si tus necesidades están enfocadas a lo que hemos comentado en las líneas anteriores.
    Un saludo.

axel dijo:

como se puede hacer compatible con j2.5 ?

Jose dijo:

Hola alex:
Los métodos de la API de Joomla que se utilizan en el tutorial para este módulo son válidos tanto para Joomla 3 como para Joomla 2.5.
En concreto, este módulo está testeado con resultados satisfactorios en Joomla 2.5.27 Stable.

Como aspecto a tener en cuenta, puntualizar que el carrusel de imágenes utiliza funciones de jQuery. Por ello debemos asegurarnos de que la plantilla invoca al fichero jQuery.js. De lo contrario, aparecerá el error: jQuery is not defined

Por ejemplo, en la plantilla Beez2 no se utiliza jQuery, por tanto, se debería hacer una modificación en la vista del módulo de Joomla para indicar que se quiere añadir este fichero (https://code.jquery.com/jquery-2.2.3.min.js)

Para ello, en el fichero tmpl/default.php, después de
$doc = JFactory::getDocument();
se debe añadir:
$doc->addScript('https://code.jquery.com/jquery-2.2.3.min.js');
De esa forma, se incluye a través de un CDN el fichero javascript necesario para posteriormente utilizar la libreria bxslider

Desde Kadum desarrollo web esperamos haber resuelto tu duda. Un saludo

Juan dijo:

El archivo pide una contraseña. Podría decir cual es. Muy buen tutorial.

    Laura dijo:

    Buenas:
    Efectivamente, para poder descomprimir los ficheros que se incluyen en este tutorial de creación de módulos en Joomla necesitas una contraseña, pero viene indicada en el enlace de descarga.
    Se la reenvío por correo privado.

      Juan dijo:

      Ya recibí la contraseña. Muchas gracias Laura.

Adrián Herrero Lizana dijo:

Buenas tardes, He seguido todos los pasos, el primer problema que he tenido es que comprimiéndolo en .zip no me lo instala, pero si lo hago con la opción de descubrir sí. Por otra parte al crear un nuevo módulo de este tipo no me coge las traducciones sino que me salen los nombres de los tags ¿que podría ocurrir?

Gracias, un saludo

    Jose dijo:

    Hola Adrián. ¿Serías tan amable de pasarnos el archivo .zip de tu módulo?
    Un saludo.

Erick Parra dijo:

Hola, buenas noches, primero que nada muchas gracias por el excelente tutorial. Quisiera saber si me puedes ayudar, quiero hacer un modulo parecido al tuyo pero ademas que me muestre los artículos por categoría quisiera que me mostrara también el texto que tenga ese articulo es decir imagen + la información del articulo.
De ante mano te lo agradezco.

    Jose dijo:

    Hola Erick, muchas gracias por tu felicitación del tutorial de joomla.
    Para poder añadir el texto del artículo sólo deberás modificar la vista del módulo, es decir, el fichero default.php
    Existe un atributo llamado introtext, el cual contiene el texto del artículo. Ese atributo se carga directamente en el fichero helper.php, por lo que podrás hacer uso de él directamente en la vista.
    Así pues, en el fichero default.php (vista del módulo de joomla), tendrás que modificar el contenido del bucle foreach($list as $item), de modo que te quede algo similar a lo siguiente:

    foreach($list as $item){
       echo 	'<div class="slide">'.
          '<h2><a href="'.$item->link.'">'.$item->title.'</a></h2>'.
          '<a href="'.$item->link.'"><img src="'.$item->imagen.'" /></a>'.
          '<div class="texto">'.$item->introtext.'</div>'.
       '</div>';
    }

    Tan sólo tendrías que definir el estilo CSS que quieres que tenga el texto.

    Espero que esta ampliación de cómo crear un módulo en joomla te sea de utilidad.

      Erick Parra dijo:

      Muchísimas gracias por la ayuda y por compartir conocimiento con los que comenzamos en el mundo del desarrollo en joomla.

Beatriz García dijo:

Muchas gracias por tu artículo, no terminaba de entender el flujo de información en los módulos y por fin he conseguido entenderlo. He bajado el módulo y lo he instalado pero no me aparecen los artículos en carrusel, sino uno debajo del otro. ¿Se te ocurre por qué puede ser?
Gracias por adelantado

    Laura dijo:

    Beatriz, muchas gracias por tu comentario.
    Respecto a que se vean los artículos uno debajo del otro en lugar de en carrusel: ¿En qué plantilla has probado el módulo? ¿En qué posición? En algunas ocasiones, ha ocurrido que la posición donde se asigna el módulo es más pequeña que el espacio que necesita y por ello, en lugar de que floten las imágenes unas al lado de las otras, aparecen en vertical.
    Un saludo.

      Beatriz García dijo:

      Debe de ser un problema con la plantilla, estoy utilizando una plantilla creada por mi, y la verdad es que yo pensé lo mismo, el tamaño de la posición, así que incluso cargué el módulo en un artículo. Y se sigue mostrando igual, no aparecen las flechas ni los iconos del slide.
      Instalé el módulo en otro joomla con la plantilla beez3 y funciona. Gracias.

Andres dijo:

Gracias por tutorial, me sirivio de mucho. Tal vez puede recomendarme alguna documentacion para entender mejor el manejo de Modelos con Joomla? Gracias

    Laura dijo:

    Hola:
    Para profundizar más, prueba con Joomla! 3 y el MVC 2ª Edición
    Cree sus propias aplicaciones con componentes, módulos y plugins siguiendo el modelo MVC. El autor es José M. Peco
    (versión revisada y ampliada, que incluye componente para gestionar un Boletín de Novedades)

    Saludos

      Andres dijo:

      Muchas gracias por la información. ¿Tal vez tienes algun tutorial de la creación de un componente para Joomla?

        Laura dijo:

        Hola, Andrés:
        De momento no tenemos ningún tutorial relacionado con creación de componentes en Joomla pero nos sirve de idea para entrar al detalle en ese tema en una próxima entrada del blog.
        Sigue nuestra página en Facebook para saber cuándo actualizamos contenido.
        Un saludo

Deja un comentario